¿Qué es Base64 y para qué se usa?

Base64 es un esquema de codificación que representa datos binarios usando solo 64 caracteres ASCII imprimibles (A-Z, a-z, 0-9, + y /). Se usa para incrustar imágenes directamente en HTML o CSS, transmitir archivos adjuntos en emails (MIME), almacenar datos binarios en JSON o XML, y en tokens de autenticación como los JWT. No es cifrado: cualquiera puede decodificarlo.

¿Base64 cifra los datos o solo los codifica?

Base64 solo codifica, no cifra. La codificación es reversible y pública: cualquier persona con acceso al texto en Base64 puede decodificarlo en segundos. Si necesitas proteger la confidencialidad de los datos, debes cifrarlos primero (por ejemplo con AES) y después, si es necesario, codificar el resultado en Base64 para transportarlo.

¿Cuándo debo usar URL encoding en lugar de Base64?

URL encoding (también llamado percent-encoding) sustituye caracteres especiales como espacios, &, = o ? por su equivalente %XX para que puedan incluirse en una URL sin ambigüedad. Base64 es preferible para datos binarios o cuando necesitas una representación compacta en campos de texto. En query strings de URLs se suele preferir URL encoding o la variante Base64url (que reemplaza + y / por - y _ para evitar conflictos con la URL).

¿Por qué el texto codificado en Base64 es más largo que el original?

Base64 representa cada 3 bytes de datos originales como 4 caracteres ASCII, lo que supone un incremento de tamaño del 33% aproximadamente. Este sobrecoste es el precio de usar solo caracteres seguros y universales. En archivos grandes, como imágenes incrustadas en CSS, conviene evaluar si el impacto en el tamaño de la página compensa la reducción de peticiones HTTP.

¿Cómo puedo incrustar una imagen en HTML usando Base64?

Codifica el archivo de imagen en Base64 y úsalo como valor del atributo src en una etiqueta img con el prefijo de tipo MIME: data:image/png;base64, . Esto elimina la petición HTTP adicional para cargar la imagen, lo que puede ser útil para iconos pequeños o imágenes críticas de carga inicial. Para imágenes grandes no se recomienda porque aumenta el tamaño del HTML.

meskeIA

Codificador Base64

Codifica y decodifica texto en Base64, URL y Hexadecimal

Términos de UsoTérminos|Política de PrivacidadPrivacidad|Contacto

Formato de codificación

Texto de entrada

📊 Comparativa de Formatos de Codificación

Formato	Charset	Overhead	Ejemplo ("Hola")	Uso principal
Base64	A–Z, a–z, 0–9, +, /	+33%	SG9sYQ==	MIME, JWT, Data URIs, APIs
Base64url	A–Z, a–z, 0–9, -, _	+33%	SG9sYQ	URLs, cookies, tokens OAuth
URL Encoding	ASCII + %XX para el resto	Variable	Hola (sin cambios)	Query strings, form data
Hexadecimal	0–9, A–F	+100%	48 6f 6c 61	Hashes, colores, depuración
Sin codificar	Cualquier byte	0%	Hola	Almacenamiento local, binarios

🎯 ¿Cuándo usarás cada formato?

🌐

APIs REST con imágenes

Cuando una API acepta JSON pero necesitas enviar imágenes o archivos binarios, codifica en Base64 e incluye el resultado como string en el payload JSON. Es el estándar para APIs de visión artificial (Google Vision, OpenAI GPT-4V).

📝

Formularios y URLs web

El URL Encoding es imprescindible para parámetros de búsqueda y formularios HTML. Un espacio no codificado puede romper una URL; 'á' o 'ñ' causan errores en servidores que no esperan UTF-8 sin codificar.

🔍

Depuración y criptografía

El hexadecimal es el formato estándar para mostrar hashes (SHA-256, MD5), claves criptográficas y contenido binario de archivos. También es cómo se expresan los colores web (#FF5733) y las direcciones MAC de red.

🔑

Autenticación moderna (JWT)

Los JSON Web Tokens usan Base64url (no Base64 estándar) para codificar el header y payload. Al decodificar la segunda parte de un JWT puedes leer los claims del usuario sin necesitar la clave privada.

❓ Preguntas Frecuentes

¿Base64 es lo mismo que cifrar datos?

No. Base64 es una codificación reversible sin clave: cualquiera puede decodificarlo en segundos. El cifrado (AES, RSA) requiere una clave secreta para revertirlo. Usar Base64 para "ocultar" información es un error de seguridad grave. Para datos sensibles usa cifrado real y, para contraseñas, funciones de hashing como bcrypt o Argon2.

¿Por qué URL encoding usa %20 para el espacio y no +?

Depende del contexto. En query strings de formularios HTML (application/x-www-form-urlencoded), el estándar tradicional usa + para el espacio. En el resto de la URL (ruta, fragmento), se usa %20. JavaScript's encodeURIComponent() siempre usa %20, que es la forma más segura y compatible. Esta ambigüedad histórica es la razón por la que los servidores suelen aceptar ambos.

¿Cuándo usar Base64url en vez de Base64 estándar?

Usa Base64url cuando el resultado vaya a aparecer en una URL, nombre de archivo o cookie. Base64 estándar usa + y / que tienen significado especial en URLs (+ = espacio, / = separador de ruta). Base64url los reemplaza por - y _ que son seguros en URLs sin percent-encoding. JWT, OAuth 2.0 y muchas APIs modernas usan exclusivamente Base64url.

¿Qué es un Data URL y cómo lo uso en HTML/CSS?

Un Data URL tiene el formato data:[tipo-MIME];base64,[datos]. Permite embeber archivos directamente en HTML o CSS sin petición HTTP adicional. Ejemplo: <img src="data:image/png;base64,iVBORw0...">. Es útil para iconos pequeños (<2KB), pero no para imágenes grandes porque no se cachean por separado y aumentan el tamaño del documento principal.

¿Por qué hexadecimal usa dos caracteres por cada byte?

Un byte tiene 8 bits, que puede representar valores del 0 al 255 (2⁸ = 256 valores). En hexadecimal, cada dígito representa 4 bits (un nibble), por lo que necesitas exactamente 2 dígitos hex para representar los 8 bits de un byte. Por ejemplo, el byte 255 en decimal es FF en hex (F=1111 en binario, FF=11111111). Esto hace el hex compacto y fácilmente convertible a binario.

¿Cuál es la diferencia entre encodeURI y encodeURIComponent en JavaScript?

encodeURI() codifica una URL completa y deja sin codificar los caracteres con significado especial en URLs (/, :, ?, #, &, =, @). encodeURIComponent() codifica todo excepto letras, dígitos y - _ . ! ~ * ' ( ), ideal para valores de parámetros. Regla simple: usa encodeURIComponent() para codificar valores individuales de query string; usa encodeURI() solo si necesitas codificar una URL entera que ya tiene su estructura.

¿Cómo funciona el padding (=) en Base64?

Base64 procesa los datos en grupos de 3 bytes (24 bits) y los convierte en 4 caracteres. Si los datos no son múltiplos de 3 bytes, se añaden bytes de relleno y se marca con = al final: un = significa que el último grupo tenía 2 bytes originales; == significa que tenía 1 byte. El receptor usa el padding para saber cuántos bytes reales había. Base64url suele omitir el padding para URLs más limpias.

¿Cuándo usar cada formato: Base64, URL Encoding o Hex?

Usa Base64 para transportar datos binarios (imágenes, archivos) por canales de texto como JSON o email. Usa URL Encoding para parámetros en URLs y formularios web, especialmente con caracteres especiales y no ASCII. Usa Hexadecimal para representar hashes criptográficos, valores de color (#RGB), claves y contenido binario donde necesites legibilidad byte a byte. Cada formato tiene su dominio natural; mezclarlos incorrectamente genera errores difíciles de depurar.

📋 Guía: Elige el formato correcto para tu caso

1
¿Los datos van en una URL o query string?→ Usa URL Encoding (encodeURIComponent en JS). Nunca pongas caracteres sin codificar en parámetros GET.
2
¿Los datos son binarios y van dentro de JSON o email?→ Usa Base64 estándar. Es el estándar MIME y el que esperan la mayoría de APIs que aceptan archivos en JSON.
3
¿El resultado va en una URL, cookie o token?→ Usa Base64url (reemplaza + por - y / por _). JWT y OAuth lo exigen. Omite el padding = para URLs más limpias.
4
¿Necesitas inspeccionar bytes individuales o representar un hash?→ Usa Hexadecimal. Es el estándar para hashes (SHA-256, MD5), direcciones MAC, colores y depuración de protocolos.
5
Verifica el resultado con DevToolsEn Chrome/Firefox, la pestaña Network muestra los payloads reales. Puedes ver Base64 en peticiones, URL encoding en query strings y hex en hashes de recursos.
6
Documenta el formato usado en tu APISi tu API devuelve o acepta datos codificados, especifica siempre el formato exacto (Base64, Base64url sin padding, hex lowercase...). La ambigüedad es la fuente principal de bugs de integración.

💡 Consejos para Usar Codificaciones Correctamente

🔗

Base64url para tokens

Si generas tokens de sesión, reset de contraseña o CSRF, usa siempre Base64url. Los + y / del Base64 estándar en URLs causan bugs silenciosos difíciles de reproducir.

🔍

Inspecciona JWTs en jwt.io

Copia cualquier JWT y pégalo en jwt.io para decodificarlo visualmente. El payload (segunda parte) es solo Base64url — cualquiera puede leerlo, nunca pongas secretos ahí.

⚠️

Cuidado con el doble encoding

Un error común es codificar en URL algo que ya estaba codificado: %20 se convierte en %2520. Siempre decodifica antes de re-codificar. DevTools muestra los valores reales sin doble encoding.

📦

Tamaño: hex es el más grande

Base64 añade 33%. Hex añade 100% (cada byte → 2 chars). URL encoding varía: caracteres ASCII sin cambio, otros hasta +12 chars (%XX%XX). Elige según el canal, no solo la legibilidad.

🎨

Hex en CSS: shorthand

#RGB es shorthand de #RRGGBB cuando los dígitos se repiten: #F80 equivale a #FF8800. Hex en minúsculas (#ff8800) es más común en código; mayúsculas (#FF8800) en herramientas de diseño.

🛡️

Valida el tipo MIME recibido

Si recibes Base64 de usuarios y lo conviertes a archivo, valida los magic bytes reales del contenido, no el tipo declarado en el prefijo data URI. Un PNG malicioso puede declararse como imagen/jpeg.

⚠️ Advertencias importantes sobre codificación

Ninguno de estos formatos es cifrado: Base64, URL Encoding y Hex son completamente reversibles sin clave. No protegen la confidencialidad de los datos.
No uses Base64 para contraseñas: Es un error de seguridad muy común. Las contraseñas deben hashearse con bcrypt, Argon2 o PBKDF2. Nunca codificarse.
Doble encoding silencioso: Codificar datos ya codificados (ej: URL encoding de Base64 que contiene +) genera errores difíciles de depurar. Verifica siempre el estado de los datos antes de codificar.
Texto Unicode y btoa(): La función btoa() del navegador falla con caracteres fuera de Latin-1 (tildes, emojis, caracteres CJK). Esta herramienta usa encodeURIComponent() internamente para manejarlos correctamente.
El padding "=" no es opcional: Aunque muchos sistemas toleran Base64 sin padding, el estándar RFC 4648 lo exige. Si recibes un error de "invalid padding", prueba añadir uno o dos "=" al final antes de asumir que los datos están corruptos.
No incrustes imágenes grandes en Base64: Codificar imágenes en Base64 para CSS o HTML aumenta el peso un 33% y elimina el paralelismo del navegador. Solo es eficiente para iconos o imágenes muy pequeñas (<2 KB).

🔗Apps relacionadas

🛡️Cifrado AESAES-256 moderno #️⃣Generador HashesMD5, SHA-256, SHA-512 🔒Generador ContraseñasContraseñas seguras