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 solo 64 caracteres de texto simple (letras, dígitos, +, / y = como relleno). Los navegadores, los correos electrónicos y muchas API almacenan las imágenes de este modo para que una imagen pueda viajar dentro de texto simple en lugar de como un archivo aparte. El decodificador invierte ese proceso: se pega la cadena y aparece la imagen original.

El formato de URL de datos

En la web, una imagen en base64 suele escribirse como una URL de datos. El esquema de URL data: se definió en 1998. El patrón es:

Por ejemplo:

Cada parte cumple una función:

• data: indica que se trata de una URL de datos y no de 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 después de la coma están codificados en base64. Es opcional. Sin él, los datos son texto simple o texto con codificación porcentual.
• Todo lo que va después de la coma es la propia imagen codificada.

Cómo funciona el decodificador

La decodificación se realiza en cuatro pasos.

1. La herramienta comprueba si la cadena empieza por data:. Si es así, lee el tipo MIME de ese prefijo.
2. Elimina los espacios, tabulaciones o saltos de línea, ya que las cadenas largas en base64 a veces se dividen en varias líneas. Esto sigue la regla de decodificación forgiving-base64 que usan los navegadores, cuyo primer paso es eliminar todos los espacios en blanco.
3. Decodifica el texto base64 y lo convierte de nuevo en bytes sin procesar.
4. Examina los primeros bytes del resultado. Todos los formatos de imagen comunes empiezan con una secuencia fija de bytes, llamada firma o «número mágico». Los archivos PNG empiezan con 89 50 4E 47, los archivos JPEG empiezan con FF D8 FF, y así sucesivamente. El decodificador usa la tabla de firmas de imagen del estándar MIME Sniffing de WHATWG. Compara estas firmas para confirmar el tipo de imagen y, si hace falta, corregirlo.

Una URL data: cuyo tipo no sea image/... se rechaza por no ser una imagen. Una URL data:image/... sin ;base64 se pasa al navegador sin cambios.

Si la cadena no tiene el prefijo data:, el decodificador la trata como datos base64 sin procesar, la decodifica y lee la firma de la misma manera. Si los bytes no coinciden con ninguna firma de imagen conocida y no parecen texto SVG, el decodificador informa de que la cadena no parece ser una imagen. No adivina un formato ni recurre a ningún tipo predeterminado.

El SVG se trata de otra manera porque es un formato de texto (XML) y no binario, por lo que no tiene una firma de bytes fija. En su lugar, el decodificador comprueba si el texto decodificado empieza con una etiqueta <svg, o con una declaración XML que contenga una.

Fórmula del tamaño de una imagen en base64

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

Los símbolos ⌈ ⌉ significan «redondear hacia arriba al siguiente número entero», porque base64 siempre trabaja en grupos de 4 caracteres y completa un grupo sobrante con signos =.

En archivos grandes resulta aproximadamente un tercio más grande que el original, 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 pesa más cuando hay pocos datos de partida.

Ejemplo práctico

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

En efecto, la cadena base64 tiene 116 caracteres, lo que coincide. Eso supone un aumento del 36 % sobre los 85 bytes originales (116 ÷ 85 ≈ 1,36), algo por encima de la cifra del 33 % porque el archivo es muy pequeño.

Formatos de imagen admitidos

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

Cómo decodificar una imagen en base64

1. Copie la cadena base64, con o sin su prefijo data:image/..., de HTML, CSS, la respuesta de una 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 decodificar.
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 eligiendo guardar la imagen, ya que se muestra como un elemento de imagen normal en el navegador.

Usos habituales de las imágenes en base64

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

Ventajas e inconvenientes de las imágenes en base64

La codificación base64 es cómoda, pero no es gratuita:

• El texto codificado es aproximadamente un tercio más grande que el archivo original.
• Los navegadores no pueden almacenar en caché una imagen incrustada como lo hacen con un archivo enlazado, por lo que se descarga de nuevo cada vez que se descarga la página o la hoja de estilos que la contiene.
• El navegador tiene que decodificar el texto base64 antes de poder mostrar la imagen, lo que requiere un pequeño procesamiento adicional.
• Por el aumento de tamaño y la pérdida de almacenamiento en caché, la incrustación en base64 funciona mejor con imágenes pequeñas, como iconos o logotipos sencillos. Las fotos 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 se decodifica una imagen en base64?

Pegue la cadena base64, con o sin 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 URL de datos?

Sí. El decodificador la trata como datos base64 sin procesar, decodifica los bytes y lee los primeros para identificar el formato a partir de su firma, como PNG, JPEG, GIF, WebP, BMP o ICO. El SVG se identifica buscando una etiqueta <svg en el texto decodificado. Si no coincide ninguna de estas, 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 en base64?

Las causas más comunes son una cadena que se cortó a mitad de camino o caracteres adicionales que no forman parte del alfabeto base64. La variante segura para URL, que usa - y _ en lugar de + y /, también se rechaza. Que falte el relleno = al final no suele ser un problema. Copiar la cadena completa, con su prefijo data:image/... si lo tiene, suele solucionarlo.

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

No. Base64 es solo una manera de representar bytes como texto; no oculta nada. Cualquiera puede decodificar una cadena base64 en segundos con una herramienta gratuita, así que nunca debe usarse para proteger imágenes privadas ni otros datos.

¿Cuánto más grande es una cadena base64 que la imagen original?

Aproximadamente un tercio más grande en el caso de archivos grandes, ya que cada 3 bytes de los datos originales se convierten en 4 caracteres de texto. Una imagen de 100 KB pasa a ocupar unos 133 KB una vez codificada. Las imágenes pequeñas pueden mostrar un aumento porcentual algo mayor por el redondeo.

Historia

Base64 surgió del correo electrónico, que antes solo transportaba texto simple. Una especificación de correo con privacidad mejorada de 1987 describió cómo convertir cada 3 bytes en 4 caracteres imprimibles de un conjunto de 64 caracteres. El esquema de URL data: de 1998 permitió después incrustar imágenes base64 directamente en páginas web. La definición vigente de base64 es la RFC 4648 (2006).

Referencias

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 — 3 bytes se convierten en 4 caracteres; relleno =.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 — sintaxis de las URL de datos; ;base64 es opcional; publicada en 1998.
3. WHATWG. Infra Standard. Forgiving-base64 decode — eliminación de espacios en blanco; tratamiento del relleno.
4. WHATWG. MIME Sniffing Standard. Coincidencia de un patrón de tipo de imagen — firmas de bytes de imágenes.
5. MDN Web Docs. Base64. Entrada del glosario sobre Base64 — la salida codificada es aproximadamente un tercio más grande.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 — codificación de correo electrónico de 1987 de 3 bytes en 4 caracteres imprimibles.