Codificador Base64
Texto · Archivos · Imágenes

Base64 es un esquema de codificación que convierte datos binarios (imágenes, archivos, bytes) en texto ASCII usando 64 caracteres (A-Z, a-z, 0-9, +, /). Se usa principalmente para: incrustar imágenes pequeñas directamente en HTML/CSS como Data URIs, transmitir datos binarios en protocolos de texto (email MIME, JSON, XML), codificar credenciales en HTTP Basic Authentication, y almacenar datos binarios en bases de datos de texto.

Base64 NO es cifrado ni compresión. Es solo codificación, convierte el formato de representación de los datos, pero no los protege ni los comprime. Al contrario, Base64 aumenta el tamaño de los datos en aproximadamente un 33% (cada 3 bytes se convierten en 4 caracteres). Para seguridad real usa cifrado (AES, RSA). Base64 no debe usarse para ocultar información sensible.

Un Data URI (data: URL) incrusta los datos del archivo directamente en el HTML/CSS en lugar de referenciar un archivo externo. Formato: data:[tipo MIME];base64,[datos]. Se usa para iconos pequeños, logos, o imágenes de fondo en CSS. No recomendado para imágenes grandes porque aumenta el tamaño del HTML y no se puede cachear por separado.

Base64 estándar usa los caracteres + y / que tienen significado especial en URLs, lo que puede causar problemas al transmitirse en query strings. Base64 URL-safe reemplaza + por - y / por _, haciendo la cadena segura para incluir en URLs y parámetros HTTP. Úsalo cuando el string Base64 vaya en una URL, cookie o token JWT.

En JavaScript usa las funciones nativas: btoa() para codificar y atob() para decodificar. Ejemplo: const encoded = btoa('Hola Neubox'); devuelve 'SG9sYSBOZXVib3g='. Nota: btoa/atob solo funciona con caracteres ASCII. Para texto con caracteres UTF-8 (tildes, ñ), necesitas un paso adicional de encoding.

HTTP Basic Authentication codifica las credenciales en Base64: usuario:contraseña → Base64 → se envía en el header Authorization: Basic dXN1YXJpbzpjb250cmFzZW5hXzEyMw==. Esto NO es seguro porque Base64 es reversible. Por eso, HTTP Basic Auth siempre debe usarse sobre HTTPS, nunca en HTTP plano.

Un JWT está formado por 3 partes en Base64 URL-safe separadas por puntos: header.payload.signature. El header y payload son simplemente objetos JSON codificados en Base64 (no cifrados, son legibles). Solo la firma verifica que no han sido alterados. Por eso, nunca pongas datos sensibles (contraseñas, tokens secretos) en el payload de un JWT sin cifrado adicional, cualquiera puede decodificarlo.

En CSS puedes usar un Data URI en background-image: .icono { background-image: url('data:image/svg+xml;base64,[base64 aquí]'); }. Es útil para iconos pequeños en botones y fondos decorativos. Limitación: el CSS aumenta de tamaño y no se puede comprimir ni cachear la imagen por separado. No recomendado para imágenes mayores a 5KB.