La codificación Base64 convierte datos binarios en un alfabeto de texto de 64 caracteres (A-Z, a-z, 0-9, más dos símbolos) para que puedan viajar de forma segura a través de sistemas diseñados para texto, como URLs, JSON, correo electrónico y CSS. Para decodificar, se invierte el proceso para recuperar los bytes originales. Es una codificación, no un cifrado: cualquiera puede decodificarla, por lo que no aporta seguridad.
La razón de ser de Base64 es simple. Muchos canales fueron diseñados para transportar texto y se atascan con datos binarios sin procesar. Una cadena JSON no puede contener bytes arbitrarios, un cuerpo de correo electrónico históricamente debía ser ASCII de 7 bits, y una URL tiene caracteres reservados con significado especial. Base64 transforma cualquier bloque binario en caracteres imprimibles seguros, a costa de aumentar su tamaño aproximadamente un 33%, ya que empaqueta 3 bytes en 4 caracteres.
Cómo funciona la codificación Base64#
Vale la pena entender el mecanismo una vez. Base64 toma tus bytes de 3 en 3. Tres bytes son 24 bits, que se dividen uniformemente en cuatro grupos de 6 bits. Cada grupo de 6 bits (un valor de 0 a 63) se asigna a un carácter del alfabeto base64. Así que cada 3 bytes de entrada se convierten exactamente en 4 caracteres de salida.
Cuando la entrada no es un múltiplo exacto de 3 bytes, el codificador agrega relleno al final. Un byte sobrante produce dos caracteres más ==; dos bytes sobrantes producen tres caracteres más =. Ese = final es relleno, no datos, y es por eso que las cadenas base64 suelen terminar con uno o dos signos de igual.
Bytes de entrada: M a n
ASCII: 77 97 110
Binario: 01001101 01100001 01101110
Grupos de 6 bits: 010011 010110 000101 101110
Base64: T W F u
Así que Man se codifica como TWFu. Decodifica TWFu y obtienes Man de vuelta, byte por byte. No se pierde nada, porque base64 es completamente reversible.
Las tres variantes que confunden a la gente#
Esta es la brecha que la mayoría de las explicaciones dejan abierta: "base64" no es un formato fijo. Hay tres variantes comunes, y usar la incorrecta es una fuente frecuente de errores de "decodifica basura".
| Variante | Caracteres 62 y 63 | Relleno | Dónde se usa |
|---|---|---|---|
| Estándar (RFC 4648) | + y / | Relleno = | JSON, datos generales, la mayoría de las APIs |
| Seguro para URL (RFC 4648 §5) | - y _ | A menudo sin relleno | URLs, nombres de archivo, segmentos JWT |
| MIME (RFC 2045) | + y / | Relleno = | Correo electrónico; divide líneas cada 76 caracteres |
Las diferencias importan en la práctica:
- Estándar es el predeterminado. Usa
+y/, que están bien dentro de JSON y la mayoría de los cuerpos de solicitud. - Seguro para URL cambia
+por-y/por_, porque+y/tienen significados reservados en una URL (un+puede convertirse en un espacio, un/es un separador de ruta). Esta es la variante que usan los JWT para sus segmentos de encabezado y carga útil. A menudo también se omite el relleno. - MIME es base64 estándar, pero inserta un salto de línea cada 76 caracteres para que los sistemas de correo antiguos no se atasquen con líneas largas. Si introduces esos saltos de línea incrustados en un decodificador estricto que no los espera, puede fallar.
Consejo: si una cadena base64 se decodifica como basura, verifica primero el alfabeto. Un
-o_en los datos significa que es seguro para URL y lo estás decodificando como estándar, o viceversa. Las variantes no coincidentes son el error número uno de base64.
Inline de imágenes como Data URLs#
El uso más práctico de base64 en la web es la data URL: incrustar un archivo pequeño directamente en HTML o CSS en lugar de enlazarlo. Una data URL tiene una forma fija:
data:[<tipo-mime>][;base64],<datos-codificados>
Para un icono PNG pequeño, la imagen codificada se convierte en una cadena que puedes insertar directamente en un background-image de CSS:
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...");
width: 16px;
height: 16px;
}
El navegador decodifica el base64, reconstruye el PNG y lo renderiza sin una solicitud de red separada. Lo mismo funciona inline en HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="icono" />
Cuándo ayuda y cuándo perjudica el inline#
Esta es la decisión que los explicadores omiten. El inline no es gratuito, porque base64 infla el archivo aproximadamente un 33% y los bytes inline no se pueden almacenar en caché por separado de la página o la hoja de estilo.
Usa una data URL cuando:
- El recurso es muy pequeño (un icono pequeño, un espaciador 1x1, un SVG de unos pocos kilobytes).
- Quieres eliminar una solicitud HTTP adicional para una imagen crítica visible sin desplazamiento.
- El recurso se usa una sola vez y rara vez cambia.
Enlaza a un archivo normal cuando:
- La imagen es grande. El aumento de base64 más la falta de caché separada hacen que la página sea más pesada y lenta.
- El recurso se reutiliza en muchas páginas, donde un archivo externo en caché gana fácilmente.
- La imagen cambia con frecuencia, ya que una copia inline invalida toda la página o la caché de la hoja de estilo en cada cambio.
La regla general: usa inline para recursos pequeños, únicos y críticos; enlaza todo lo demás.
Base64 no es cifrado#
Esto confunde constantemente a los principiantes, por lo que vale la pena decirlo claramente. Base64 es reversible por cualquier persona sin clave ni secreto. No oculta nada. Si codifica en base64 una contraseña o una clave de API, no la ha protegido; solo la ha hecho ligeramente menos obvia para un humano que hojea el texto. Un payload de JWT está codificado en base64url, que es exactamente la razón por la que cualquiera puede decodificarlo y leer sus afirmaciones sin el secreto de firma.
Cuando realmente necesite confidencialidad, use cifrado real. Base64 es para el transporte seguro de bytes a través de canales de texto, no para ocultarlos. Para el ángulo específico de JWT, nuestra guía sobre decodificar versus verificar un JWT de forma segura explica por qué leer un token es trivial mientras que confiar en él requiere verificación de firma.
Codifica y decodifica de forma segura en tu navegador#
Al igual que con SQL y JWT, los datos que codificas en base64 suelen ser sensibles: un archivo de configuración, una clave privada, una imagen interna. Pegarlos en una herramienta del lado del servidor envía esos bytes fuera de tu máquina. Un códec que se ejecuta completamente en el navegador mantiene todo local.
Paso 1: Codifica texto o un archivo#
Abre el codificador y decodificador base64 gratuito, pega texto o arrastra un archivo, y elige tu variante (estándar o segura para URL). Para una imagen, la herramienta lee el archivo, codifica los bytes y construye una URL data: lista para pegar con el tipo MIME correcto, todo en la página, por lo que el archivo nunca se sube.
Paso 2: Decodifica y previsualiza el resultado#
Pega una cadena base64 para decodificarla. Si es texto, obtienes el texto de vuelta. Si es una imagen codificada, el códec previsualiza la imagen decodificada directamente, así puedes confirmar que es válida en lugar de mirar un blob. Cuando la entrada no es texto imprimible, se muestra un volcado hexadecimal para que puedas inspeccionar los bytes sin procesar.
Paso 3: Copia la URL de datos en tu CSS o HTML#
Toma la cadena data:image/...;base64,... generada e insértala en un background-image o un <img src>. Reserva esto para activos pequeños y críticos según las reglas de incrustación anteriores, y enlaza imágenes más grandes o reutilizadas de forma normal.
Referencia rápida#
- Base64 asigna cada 3 bytes a 4 caracteres de texto, aumentando los datos aproximadamente un 33%.
- El
=final es relleno, no datos. - El estándar usa
+y/; el seguro para URL usa-y_; MIME divide líneas cada 76 caracteres. - Una URL de datos es
data:<mime>;base64,<datos>e incrusta un recurso sin solicitud adicional. - Incrusta recursos pequeños y únicos; enlaza recursos grandes o reutilizados.
- Base64 es codificación, no cifrado; no proporciona seguridad.
Para imágenes específicamente, el convertidor de imagen a base64 dedicado construye la URL de datos con vista previa en vivo, y el codificador/decodificador base64 de Molixa maneja texto, archivos y la alternativa de volcado hexadecimal para entrada no textual, todo del lado del cliente.
Preguntas Frecuentes#
¿Para qué se usa la codificación base64? Base64 convierte datos binarios en texto plano para que puedan viajar a través de canales diseñados para texto, como URLs, cargas JSON, cuerpos de correo electrónico y URLs de datos CSS. Permite incrustar una imagen directamente en una hoja de estilo, transportar un archivo dentro de un campo JSON o pasar datos binarios en un parámetro de URL sin que se corrompan por caracteres reservados.
¿La codificación base64 es segura o está encriptada? Ninguna de las dos. Base64 es completamente reversible por cualquiera, sin clave ni secreto, por lo que no proporciona seguridad alguna. Solo transforma bytes en caracteres imprimibles seguros para el transporte. Codificar una contraseña o clave de API en base64 no la protege. Cuando necesites confidencialidad real, usa encriptación de verdad, no base64.
¿Cómo convierto una imagen a una URL de datos base64?
Codifica los bytes de la imagen a base64, luego envuélvelos como data:image/png;base64,<datos-codificados> (cambia el tipo MIME según el archivo). Pega esa cadena en un background-image de CSS o en un <img src> de HTML y el navegador la decodifica y renderiza sin necesidad de una solicitud adicional. Un codificador del lado del navegador construye la URL de datos completa y previsualiza el resultado.
¿Cuál es la diferencia entre base64 estándar y base64 segura para URL?
Base64 estándar usa + y / para sus dos últimos caracteres, lo cual está bien en JSON y la mayoría de APIs. La versión segura para URL los reemplaza con - y _ porque + y / están reservados en las URLs, y a menudo elimina el relleno =. Los segmentos de encabezado y carga útil de JWT usan la variante segura para URL. Decodificar con el alfabeto incorrecto produce basura.
¿Por qué mi cadena base64 tiene signos igual al final?
Eso es relleno. Base64 trabaja en grupos de 3 bytes de entrada que producen 4 caracteres, así que cuando la longitud de entrada no es múltiplo de 3, el codificador agrega uno o dos caracteres = para completar el grupo final. Un byte sobrante produce ==, dos bytes sobrantes producen =. El relleno no contiene datos y algunos codificadores seguros para URL lo omiten.
¿Debo incrustar imágenes como base64 o enlazar a archivos? Incrusta solo activos pequeños, únicos y críticos, como un icono pequeño o una imagen visible sin desplazamiento donde ahorrar una solicitud HTTP sea importante. Base64 aumenta el tamaño aproximadamente un 33% y los datos incrustados no se pueden almacenar en caché por separado de la página, por lo que para imágenes grandes o reutilizadas con frecuencia, un archivo enlazado normal que el navegador almacene en caché es más rápido.
