Imagen ↔ Base64

¿Qué es la conversión de imagen a Base64?#

Un data URL es una cadena que incrusta un archivo completo en línea, precedido por su tipo MIME: data:image/png;base64,iVBORw0KGgo…. Una vez que una imagen vive dentro de una cadena de este tipo, se comporta como texto: puedes pegarla en HTML, CSS, JSON, un archivo Markdown o un archivo de código fuente, y quien la consuma la renderiza sin necesidad de descargar un archivo aparte. Esta página convierte un archivo de imagen en un data URL y un data URL de vuelta en una imagen visible, todo dentro de tu navegador.

Base64 infla los datos binarios aproximadamente un 33 % (cada tres bytes se convierten en cuatro caracteres ASCII), de modo que un data URL es más grande que el archivo al que sustituye. El intercambio merece la pena cuando lo que quieres es cero peticiones externas: firmas de correo en HTML, demos de un solo archivo, favicons incrustados en un <head>, iconos empaquetados en una configuración JSON o recursos en entornos (algunas páginas bloqueadas por CSP, vistas previas aisladas) donde cargar un <img src> desde el disco no es una opción.

Esta herramienta analiza los data URLs según el RFC 2397, acepta tanto cargas útiles en base64 como en texto codificado por ciento, detecta el MIME y valida que sea realmente una imagen antes de mostrar la vista previa, de forma que pegar una cadena rota falla de manera clara en vez de renderizar el icono de imagen rota.

Cómo se usa#

1. Arrastra una imagen a la zona punteada o haz clic en Subir y elige un archivo. Se aceptan PNG, JPEG, WebP, GIF, SVG, BMP, AVIF e ICO.
2. El área de texto Data URL de la izquierda se rellena con la cadena completa data:image/…;base64,…. Usa Copiar a la derecha para llevártela.
3. Para ir en el otro sentido, pega un data URL en esa misma área de texto. La vista previa de la derecha vuelve a renderizar la imagen y Descargar la guarda de nuevo como un archivo real con la extensión correcta.
4. Limpiar vacía ambos paneles.

El MIME se lee de la cabecera del data URL, no se deduce de la extensión del archivo, así que renombrar un .png a .jpg no engaña a la herramienta y la extensión de descarga siempre coincide con el tipo real.

Características clave#

• Conversión bidireccional. Imagen → data URL para incrustar; data URL → archivo para extraer. El mismo panel maneja ambas direcciones.
• Consciente del MIME. La extensión de descarga sugerida se deriva del tipo de medio real (image/svg+xml → .svg, image/jpeg → .jpg), no del nombre del archivo.
• Valida antes de la vista previa. Las cadenas mal formadas se marcan como no válidas en lugar de mostrar silenciosamente una imagen rota.
• Maneja bytes arbitrarios de forma segura. La codificación Base64 se trocea, de modo que las cargas útiles multibyte y binarias hacen el recorrido de ida y vuelta sin corrupción.
• Todo local. Las APIs FileReader y atob/btoa hacen el trabajo dentro de la página; no se sube nada.

Ejemplo práctico#

Tienes pixel.gif, un píxel transparente de seguimiento de 1×1 (el tipo que los clientes de correo usan como baliza de apertura), 43 bytes. Súbelo. El área de texto Data URL produce la cadena completa y exacta:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Ese es un data URL real y completo: pégalo en un <img src="…"> de HTML, en un background-image: url('…') de CSS o en un campo JSON y quien lo consume renderiza el píxel original sin ninguna carga de archivo. Tanto el MIME (image/gif) como la extensión de descarga .gif provienen de la cabecera del data URL, no del nombre del archivo original.

Para una foto más grande el principio es idéntico: solo crece el cuerpo base64 (aproximadamente 1,33× el tamaño en bytes) y el MIME pasa a ser image/jpeg o image/webp.

Preguntas frecuentes#

¿Por qué mi data URL es mucho más grande que el archivo original?#

Base64 representa cada tres bytes como cuatro caracteres, así que la cadena es aproximadamente 1,33× el tamaño binario. Para imágenes grandes esto es un desperdicio: considera primero la herramienta de compresión, u hospeda el archivo y enlázalo en lugar de incrustarlo.

¿Hay un límite de tamaño?#

El navegador maneja data URLs de hasta cientos de megabytes, pero en la práctica cualquier cosa por encima de unos pocos cientos de KiB inflará tu HTML, CSS y JSON y ralentizará los analizadores. Incrusta solo iconos pequeños, logos y sprites.

¿Puedo convertir un SVG?#

Sí. El SVG tiene el MIME image/svg+xml y ya es texto, así que el data URL es compacto y el recorrido de ida y vuelta se hace sin pérdidas.

El data URL que pegué dice «invalid». ¿Qué pasó?#

La cadena debe empezar con data: y contener una coma que separe la cabecera de la carga útil. Una copia truncada, un espacio inicial espurio o un flag ;base64 que falte harán que el análisis falle. Vuelve a copiar la cadena completa, cabecera incluida.