Decodificador Base64 de Imágenes | Decodificar y Previsualizar Imágenes en Línea

¿Qué es un decodificador de imágenes base64?

Un decodificador de imágenes base64 es una herramienta que convierte una cadena de texto codificada en base64 de nuevo en una imagen. Base64 es una forma de escribir datos binarios, como los bytes de un archivo de imagen, usando únicamente 64 caracteres de texto normales (letras, dígitos, +, / y = para el relleno). Los navegadores, los correos electrónicos y muchas API almacenan imágenes de esta forma para que una imagen pueda viajar dentro de texto normal en lugar de como un archivo separado. El decodificador invierte el proceso: se pega la cadena y aparece la imagen original.

El formato de las URL de datos

En la web, una imagen base64 suele escribirse como una URL de datos. El patrón es:

Por ejemplo:

Cada parte tiene una función:

• data: indica que es una URL de datos, no una dirección web normal.
• image/png es el tipo MIME, que indica al navegador qué clase de archivo es.
• ;base64 indica que los datos posteriores a la coma están codificados en base64.
• Todo lo que aparece después de la coma es la imagen codificada.

Cómo funciona el decodificador

La decodificación se realiza en cuatro pasos.

1. La herramienta comprueba si la cadena comienza por data:. Una URL de datos que indica un tipo multimedia distinto de una imagen, como data:text/plain, se rechaza de inmediato, porque nunca puede mostrarse como una imagen.
2. Elimina los espacios, las tabulaciones y los saltos de línea, ya que las cadenas base64 largas a veces se distribuyen en varias líneas. Un contenido que usa codificación porcentual en lugar de base64, algo que también permite RFC 2397, se conserva sin cambios.
3. Decodifica el texto base64 para convertirlo de nuevo en bytes sin procesar.
4. Examina los primeros bytes del resultado. Cada formato de imagen habitual comienza con una secuencia fija de bytes, denominada firma o «número mágico». Los archivos PNG comienzan por 89 50 4E 47, los archivos JPEG por FF D8 FF, y así sucesivamente. El decodificador compara estas firmas y asigna a la imagen el tipo que identifican.

Los bytes prevalecen sobre la etiqueta. Si una URL de datos indica data:image/png, pero los bytes comienzan por FF D8 FF, el decodificador reconstruye la URL como data:image/jpeg, de modo que la cadena ofrecida por el botón «Copiar URL de la imagen» nunca describe incorrectamente su propio contenido.

Si la cadena no tiene el prefijo data:, el decodificador la trata como datos base64 sin formato, la decodifica y lee la firma de la misma manera. Si los bytes no coinciden con ninguna firma de imagen conocida y tampoco parecen texto SVG, el decodificador informa de que la cadena no parece ser una imagen. No intenta adivinar el formato ni utiliza un tipo predeterminado como alternativa.

SVG se procesa de forma diferente porque es un formato de texto (XML), no binario, por lo que no tiene una firma de bytes fija. El decodificador comprueba los primeros 1.024 bytes del texto decodificado en busca de una etiqueta <svg, una declaración XML como <?xml version="1.0"?> seguida de dicha etiqueta, o una declaración de tipo de documento SVG seguida de ella. Se ignora una marca de orden de bytes al principio, que algunos editores añaden a los archivos UTF-8. Como SVG no puede identificarse mediante una firma de bytes, una URL de datos que declara image/svg+xml conserva el tipo que declara.

Fórmula del tamaño de una imagen base64

Base64 convierte cada 3 bytes de datos binarios en 4 caracteres de texto. La fórmula para calcular la longitud codificada es:

Los símbolos ⌈ ⌉ significan «redondear hacia arriba al siguiente número entero», porque base64 siempre trabaja con grupos de 4 caracteres y rellena con signos = el grupo que queda incompleto.

En archivos grandes, esto se traduce aproximadamente en un aumento del tamaño del 33 %, ya que 4 ÷ 3 ≈ 1,33. Los archivos pequeños pueden mostrar un aumento porcentual mayor, porque redondear hacia arriba al siguiente grupo de 4 caracteres tiene más efecto cuando hay pocos datos.

Ejemplo resuelto

El ejemplo PNG anterior se decodifica en 85 bytes de datos de imagen. Aplicando la fórmula:

La cadena base64 tiene efectivamente 116 caracteres, lo que coincide con el resultado. Esto representa un aumento del 36 % respecto a los 85 bytes originales (116 ÷ 85 ≈ 1,36), ligeramente superior al 33 % indicado, porque el archivo es muy pequeño.

Formatos de imagen compatibles

El decodificador lee la firma de bytes de los datos decodificados para identificar el formato. Reconoce estos tipos:

Cómo decodificar una imagen base64

1. Copie la cadena base64, con o sin su prefijo data:image/..., desde HTML, CSS, una respuesta de API o un correo electrónico.
2. Péguela en el cuadro de entrada.
3. La imagen se decodifica automáticamente un momento después de dejar de escribir o al pulsar el botón de decodificación.
4. La imagen decodificada aparece en el área de vista previa. Su URL de datos se puede copiar con el botón «Copiar URL de la imagen», y la propia imagen se puede guardar haciendo clic derecho sobre ella en la vista previa y seleccionando la opción para guardar la imagen, ya que se muestra como un elemento de imagen normal en el navegador.

Usos habituales de las imágenes base64

• Incrustación en HTML, CSS o JavaScript: colocar los datos de la imagen directamente en el código evita una solicitud de archivo independiente.
• Plantillas de correo electrónico: algunos clientes de correo bloquean de forma predeterminada las imágenes enlazadas externamente, pero una imagen base64 incrustada sigue mostrándose.
• Herramientas HTML de un solo archivo: una página completa, incluidas sus imágenes, puede distribuirse como un único archivo independiente.
• Respuestas de API: una imagen puede viajar dentro de una carga JSON sin necesitar su propio punto de acceso.
• Fondos e iconos CSS: a veces los iconos pequeños se escriben directamente en una hoja de estilos como una URL de datos.

Ventajas y desventajas de las imágenes base64

La codificación base64 resulta práctica, pero tiene costes:

• El texto codificado es aproximadamente un tercio más grande que el archivo original.
• Los navegadores no pueden almacenar en caché una imagen incrustada del mismo modo que un archivo enlazado, por lo que se descarga de nuevo cada vez que lo hace la página o la hoja de estilos que la contiene.
• El navegador debe decodificar el texto base64 antes de mostrar la imagen, lo que requiere una pequeña cantidad adicional de procesamiento.
• Debido al aumento de tamaño y a la pérdida de caché, la incrustación base64 resulta adecuada para imágenes pequeñas, como iconos y logotipos sencillos. Las fotografías grandes suelen servirse mejor como archivos de imagen normales.

Preguntas frecuentes

¿Qué es un decodificador de imágenes base64?

Es una herramienta que convierte una cadena de texto codificada en base64 de nuevo en una imagen visible, como un archivo PNG, JPEG, GIF, WebP, BMP o SVG.

¿Cómo decodifico una imagen base64?

Pegue la cadena base64, con o sin el prefijo data:image/..., en el decodificador. La herramienta leerá la cadena, la decodificará y mostrará la imagen resultante.

¿Se puede decodificar una cadena base64 sin el prefijo de la URL de datos?

Sí. El decodificador la trata como datos base64 sin formato, decodifica los bytes y lee los primeros bytes para identificar el formato mediante su firma, como PNG, JPEG, GIF, WebP, BMP o ICO. SVG se identifica buscando una etiqueta <svg en el texto decodificado. Si no coincide con ninguno de estos formatos, el decodificador informa de que la cadena no parece ser una imagen, en lugar de adivinar un formato.

¿Por qué no se decodifica mi imagen base64?

Tres causas abarcan la mayoría de los casos. La cadena puede contener caracteres fuera del alfabeto base64 estándar, que es A–Z, a–z, 0–9, +, / y =; la variante base64url utilizada en algunos tokens web escribe - y _ en su lugar, y no se acepta. Es posible que la cadena se haya cortado a mitad, dejando una longitud que es una unidad mayor que un múltiplo de cuatro, algo que ninguna cadena base64 válida puede tener. O puede que los bytes simplemente no correspondan a uno de los formatos de imagen compatibles. La ausencia de relleno = por sí sola no constituye un problema, y los espacios o saltos de línea se eliminan antes de la decodificación.

¿La codificación base64 es una forma de seguridad o cifrado?

No. Base64 solo representa bytes como texto; no oculta nada. Cualquiera puede decodificar una cadena base64 en unos segundos con una herramienta gratuita, por lo que nunca debe utilizarse para proteger imágenes privadas u otros datos.

¿Cuánto aumenta una cadena base64 respecto a la imagen original?

Aproximadamente un tercio en archivos grandes, ya que cada 3 bytes de los datos originales se convierten en 4 caracteres de texto. Una imagen de 100 KB se convierte en aproximadamente 133 KB una vez codificada. Las imágenes pequeñas pueden mostrar un aumento porcentual algo mayor debido al redondeo.

Historia

Base64 surgió a partir de esquemas de codificación desarrollados en las décadas de 1970 y 1980 para enviar datos binarios mediante sistemas de correo que solo procesaban texto normal. Se formalizó para el correo electrónico en RFC 989 (1987) y posteriormente en RFC 1421. Su uso para incrustar imágenes en páginas web fue posible cuando el esquema de URL data: se definió en RFC 2397 (1998), y se hizo más común a mediados de la década de 2000, cuando los desarrolladores buscaban formas de reducir las solicitudes HTTP independientes, especialmente en conexiones móviles lentas.

Referencias

1. RFC 4648: Codificaciones de datos Base16, Base32 y Base64
2. RFC 2397: El esquema de URL «data»
3. MDN Web Docs: URL de datos
4. Estándar WHATWG de detección de tipos MIME