🔢 Qué es Base64 y por qué es el traductor universal de la web

¡Antes de nada feliz año! Llevaba mucho tiempo sin dar la matraca por aquí, una vez acabados los patrones de diseño más o menos, vamos a hacer post de forma muy random, hoy le dedicamos unos minutos a Base64.

Si llevas un tiempo programando seguro que te has encontrado alguna vez con una cadena de texto muy larga, ininteligible y que suele acabar con uno o dos signos de igual (=). Rollo esto:

SG9sYSBNdW5kbyE=

Eso es Base64. No es encriptación (ojito con esto), es codificación. Es la herramienta que nos permite “disfrazar” datos complejos (imágenes, PDFs, audios) para que parezcan texto simple y puedan viajar sin romperse por internet.

🤯 1. El problema que resuelve

Situación inicial: Internet solo hablaba texto

Imagina los inicios de Internet y los emails y vaina. Los protocolos antiguos estaban diseñados para transportar texto (ASCII) de 7 bits.

Si intentabas enviar una imagen (que es un archivo binario, lleno de ceros y unos que no corresponden a letras legibles) a través de un sistema diseñado para texto, ocurría el desastre:

1. El sistema intentaba interpretar un byte de la imagen como una letra.
2. Se encontraba con un “carácter de control” (como un salto de línea o un nulo) donde no debía.
3. El sistema pensaba que el mensaje había terminado o se corrompía la transmisión.

Se necesitaba una forma de meter una imagen dentro de un mensaje de texto sin que los servidores de correo o los navegadores se volvieran locos.

✨ La solución en 60 segundos

Base64 toma cualquier dato binario (una foto, un zip, un audio, etc.) y lo traduce a un alfabeto seguro de 64 caracteres que todos los sistemas entienden:

• Letras mayúsculas A-Z
• Letras minúsculas a-z
• Números 0-9
• Dos símbolos extra (generalmente + y /)

De esta forma tu imagen binaria se convierte en una cadena de letras y números segura para viajar por cualquier lado como texto.

🌎 2. El Telégrafo y los Emojis 📠

Imagina que quieres enviar un Emoji (😎) por un telégrafo antiguo que solo tiene botones para letras y números.

1. El Dato Binario (El Emoji): Es información compleja que el medio de transporte (el telégrafo) no soporta nativamente.
2. El Codificador (Base64): Tú decides que el código para 😎 será la palabra “GAFAS”.
3. La Transmisión: Por el cable del telégrafo viaja la palabra G-A-F-A-S. El telégrafo está feliz porque solo son letras.
4. El Receptor (Decodificador): Al otro lado, tu amigo recibe “GAFAS”, consulta su tabla de códigos, y sabe que debe dibujar un 😎.

Base64 hace exactamente esto: traduce bytes raros a letras seguras para el viaje y las vuelve a convertir al llegar.

📜 3. Un poco de Historia y Funcionamiento

El origen de Base64 está ligado al estándar MIME (Multipurpose Internet Mail Extensions). Cuando el correo electrónico empezó a popularizarse, se dieron cuenta de que enviar solo texto era muy aburrido. Querían enviar adjuntos (fotos, documentos).

Para lograrlo sin cambiar toda la infraestructura de internet (que costaría un montón), inventaron Base64 para incrustar esos adjuntos dentro del cuerpo del mensaje.

¿Cómo funciona la magia matemática?

La regla de oro es: 3 bytes se convierten en 4 caracteres.

1. Tomas 3 bytes de tus datos originales (3 bytes * 8 bits = 24 bits).
2. Esos 24 bits los divides en 4 grupos de 6 bits.
3. Cada grupo de 6 bits tiene un valor entre 0 y 63.
4. Buscas ese valor en la tabla Base64 (0 es ‘A’, 26 es ‘a’, etc.).

¿Y si mis datos no son múltiplos de 3? Ahí es donde entra el famoso Padding (=). Si faltan bytes al final para completar el grupo, se rellena con signos de igual.

// Ejemplo práctico en JavaScript (Node o Browser)

// 1. Texto original
const texto = "Hola";

// 2. Codificando a Base64
// En navegador: btoa() (Binary to ASCII)
// En Node: Buffer
const codificado = Buffer.from(texto).toString('base64');

console.log(codificado);
// Resultado: "SG9sYQ=="
// Nota las "==" al final, es el padding porque "Hola" tiene 4 bytes, no es múltiplo de 3.

// 3. Decodificando
const original = Buffer.from(codificado, 'base64').toString('utf-8');
console.log(original);
// Resultado: "Hola"

---

🤔 4. ¿Para qué se usa hoy en día?

Aunque los correos modernos son más listos, Base64 sigue siendo vital en el desarrollo web.

🖼️ Data URIs (Imágenes en línea)

Puedes incrustar imágenes pequeñas directamente en tu CSS o HTML sin hacer una petición HTTP extra al servidor.

/* El logo está escrito directamente en el CSS */
.logo {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAU...");
}

🔐 JWT (JSON Web Tokens)

Si usas autenticación moderna, usas JWT. Un token JWT son tres partes separadas por puntos. ¿Adivinas qué codificación usan esas partes para viajar en la cabecera HTTP? Pozi, Base64 (Base64Url siendo más croqueto).

📄 Canvas y Archivos

Cuando manipulas imágenes en el <canvas> de HTML5 y quieres guardar el resultado, el navegador te devuelve una cadena Base64 (canvas.toDataURL()).

📈 5. Resumen: Ventajas y Desventajas

✅ Lo Bueno

• Compatibilidad total: Pasa por firewalls, correos antiguos y URLs sin romperse.
• Simplicidad: Cualquier lenguaje de programación tiene librerías nativas para manejarlo.
• Menos peticiones HTTP: Útil para iconos muy pequeños en la web.

❌ Lo Malo

• Inflación de tamaño: Aumenta el peso del archivo un 33%. No uses Base64 para imágenes grandes o vídeos, el impacto va a ser grande.
• Carga de CPU: El navegador/servidor tiene que gastar recursos en codificar y decodificar.

🖼️ 6. El Resumen Memorable

Base64 es como triturar tu comida (datos binarios) para meterla en un tupper (caracteres ASCII) y enviarla por correo. Al llegar, alguien junta los trocitos y recrea el plato original. Ocupa más espacio, pero te aseguras de que no se derrame por el camino.

¡EA! Ya sabes que esos chorizos de letras aleatorias tienen sentido. Saluditos y a seguir programando con una birrita 🍻