Qué es Base64 y cómo funciona

Qué problema resuelve Base64

Muchos sistemas de la web fueron diseñados para transportar texto: el correo electrónico, las cabeceras HTTP, los campos de un formulario o un documento JSON. El problema aparece cuando quieres meter dentro datos binarios, como una imagen, un archivo o un conjunto de bytes cualquiera. Esos bytes pueden contener valores que el canal interpreta mal, rompiendo el mensaje.

Base64 es la solución clásica: un esquema de codificación que representa cualquier secuencia de bytes usando solo 64 caracteres seguros y universales. Con él, un archivo binario se convierte en texto que viaja sin alteraciones, y puede volver a su forma original al otro lado.

Cómo funciona por dentro

La idea es simple. Base64 toma los datos de tres en tres bytes, que son 24 bits, y los divide en cuatro grupos de 6 bits. Cada grupo de 6 bits tiene un valor entre 0 y 63, y cada valor se corresponde con un carácter de este alfabeto:

• Las letras mayúsculas A-Z (valores 0 a 25).
• Las letras minúsculas a-z (26 a 51).
• Los números 0-9 (52 a 61).
• Los símbolos + y / (62 y 63).

Si el número de bytes no es múltiplo de tres, el final se completa con uno o dos signos = que actúan como relleno. Dos consecuencias prácticas se derivan de esto. La primera, que el resultado ocupa aproximadamente un 33 % más que el original, porque cada tres bytes pasan a ser cuatro caracteres. La segunda, que un texto codificado siempre tiene una longitud múltiplo de cuatro.

Algunos ejemplos reales:

Fluxom        ->  Rmx1eG9t
Hola, mundo   ->  SG9sYSwgbXVuZG8=
canción       ->  Y2FuY2nDs24=

«Fluxom» tiene seis bytes, exactamente dos bloques de tres, así que no necesita relleno. «Hola, mundo» tiene once bytes, por lo que termina con un =. En «canción», la «ó» ocupa dos bytes en UTF-8, así que son ocho bytes aunque la palabra tenga siete letras, y el resultado se alarga con un = final.

Dónde se usa Base64

Aunque no lo veas, Base64 está en muchos puntos de tu día a día como desarrollador:

• Correo electrónico. Los adjuntos viajan codificados con el estándar MIME.
• Data URLs. Permiten incrustar una imagen directamente en HTML o CSS.
• Autenticación básica HTTP. La cabecera Authorization: Basic dXN1YXJpbzpjbGF2ZQ== contiene usuario:clave en Base64.
• JSON Web Tokens. Las dos primeras partes de un JWT están codificadas en una variante llamada Base64URL.
• Claves y certificados. Los formatos PEM representan datos binarios con Base64.

Un ejemplo de Data URL con un pequeño SVG:

<img alt="Cuadrado cian" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMEU1RkYiLz48L3N2Zz4=" />

Base64 no es cifrado

La cabecera de autenticación básica del ejemplo anterior lo demuestra: el nombre de usuario y la contraseña son perfectamente legibles para quien intercepte la petición. Por eso se utiliza siempre sobre HTTPS. Si lo que necesitas es confidencialidad, hay que cifrar de verdad. En Fluxom, las herramientas de AES cifran un texto con una contraseña, y su resultado se entrega precisamente en Base64 para que sea fácil de copiar.

Codificar y decodificar con Fluxom

Las herramientas Base64 Encode y Base64 Decode cubren las dos direcciones:

1. Elige la herramienta según lo que necesites.
2. Pega el texto en el campo de entrada.
3. Pulsa Codificar o Decodificar.
4. Copia el resultado con Copiar.

La codificación trata el texto como UTF-8, por lo que acentos, eñes y emojis se convierten correctamente. Prueba con ¿Qué tal?, que da wr9RdcOpIHRhbD8=, o con 日本, que da 5pel5pys. Si intentas decodificar algo que no es Base64 válido, la herramienta muestra un aviso con el error.

Para imágenes existe una herramienta específica, el Image Base64 Encoder. Selecciona un archivo y obtienes una Data URL lista para pegar en tu HTML o CSS. Úsala con imágenes pequeñas: en archivos grandes, el aumento del 33 % y la imposibilidad de guardarlos en caché por separado hacen que no compense.

Base64 en tu propio código

En JavaScript, btoa y atob codifican y decodifican, pero trabajan con cadenas de un byte por carácter y fallan con texto Unicode. Para acentos, eñes o emojis hay que pasar primero por UTF-8, que es justo lo que hace Fluxom:

const bytes = new TextEncoder().encode("canción");
const base64 = btoa(String.fromCharCode(...bytes));
// "Y2FuY2nDs24="

const original = new TextDecoder().decode(
  Uint8Array.from(atob(base64), (c) => c.charCodeAt(0))
);
// "canción"

En Node.js es más directo: Buffer.from(texto, "utf8").toString("base64"). Este detalle explica muchos errores con caracteres especiales al codificar a mano.

Base64URL y los JWT

El alfabeto estándar incluye + y /, que tienen significado especial en las URL. Para usarlo en direcciones y tokens existe la variante Base64URL, que cambia + por -, / por _ y suele omitir el relleno =. La cabecera {"alg":"HS256","typ":"JWT"} queda así:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

El decodificador de Base64 de Fluxom espera el alfabeto estándar. Si tienes un fragmento Base64URL, sustituye antes - por + y _ por /. Para tokens completos es más cómodo usar el decodificador de JWT, que ya hace esa conversión y te muestra la cabecera y el contenido en JSON.

Resumen y buenas prácticas

Recuerda las ideas clave: Base64 convierte bytes en texto seguro, aumenta el tamaño en un tercio, no es cifrado y tiene una variante para URL. Úsalo para transportar datos binarios por canales de texto, evita incrustar archivos grandes y nunca confíes en él para proteger información sensible.

Cuando necesites comprobarlo o convertirlo, Base64 Encode y Base64 Decode te dan la respuesta en un instante y sin enviar tus datos a ningún servidor.