Cómo se usa
- 1.Para codificar, deja seleccionado «Imagen a Base64» y suelta una imagen en la página, pégala desde el portapapeles o haz clic en «Elegir una imagen».
- 2.Copia la versión que necesites: el data URI para un
srco unurl(), Base64 sin más para una API, o la etiqueta HTML o la regla CSS ya preparadas. Los archivos SVG también obtienen un data URI más corto, codificado para URL. - 3.Para decodificar, cambia a «Base64 a imagen» y pega un data URI o Base64 sin más. También sirve CSS o HTML que contenga uno.
- 4.Revisa la vista previa, el formato y el tamaño, y haz clic en Descargar para guardar la imagen con la extensión de archivo correcta.
Qué es un data URI
Un data URI mete un archivo entero dentro de una URL, de modo que una página puede mostrar una imagen sin descargarla por separado. La sintaxis es data:[<media type>][;base64],<data>; por ejemplo, data:image/png;base64,iVBORw0KGgo…. El tipo de medio indica al navegador qué son los datos; ;base64 dice que están codificados en Base64 y no como texto codificado para URL.
Base64 escribe cada 3 bytes del archivo como 4 caracteres ASCII simples, y por eso el resultado ocupa alrededor de un tercio más que la imagen. Gzip y Brotli recuperan parte de esa diferencia al enviar la página, pero el navegador sigue teniendo que decodificar el texto completo.
Cuándo conviene incrustar una imagen, y cuándo perjudica
Incrustar compensa con imágenes muy pequeñas: iconos, fondos diminutos y marcadores de posición de uno o dos kilobytes, en los que una petición aparte costaría más que los propios bytes. También es práctico para informes HTML de un solo archivo, datos de prueba, y API o documentos JSON que esperan una imagen como texto.
Con cualquier imagen más grande, las páginas suelen ir más lentas. La imagen no se puede guardar en caché por separado, así que se descarga de nuevo con cada página u hoja de estilos que la contiene; en CSS, además, retrasa el renderizado, porque el navegador espera a tener toda la hoja de estilos. Con HTTP/2 las peticiones extra cuestan poco, así que a partir de unos pocos kilobytes es mejor un archivo de imagen normal.
El correo es un caso aparte: Gmail y Outlook no muestran imágenes en data URI, así que los boletines deben enlazar imágenes alojadas en un servidor o adjuntarlas como adjuntos en línea (CID).
Un data URI más corto para SVG
SVG es texto, así que no necesita Base64 en absoluto. Un data URI SVG codificado para URL, como data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, suele ser un 15–25 % más corto, se comprime mejor y sigue siendo legible en tu CSS.
Solo hay que escapar unos pocos caracteres: <, > y, sobre todo, # (que se escribe %23), que si no terminaría la URL, por ejemplo en un color como fill='%23f00'. Esta herramienta también reduce los espacios en blanco y cambia a comillas simples para que el URI quepa dentro de url("…") sin escapar nada más.
Preguntas frecuentes
¿Se sube mi imagen a algún sitio?
No. Tu navegador lee y codifica la imagen en tu propio dispositivo, y el Base64 que pegas también se decodifica ahí. No se envía nada a nestoo ni a nadie más.
¿Por qué la versión en Base64 ocupa más que el archivo de imagen?
Base64 representa cada 3 bytes con 4 caracteres de un alfabeto de 64, así que el texto ocupa alrededor de un 33 % más que el archivo, más el breve prefijo data:image/…;base64,. Es el precio de guardar datos binarios como texto plano.
¿Cómo uso un data URI en HTML, CSS, Markdown o JSON?
En HTML, ponlo en el src de una imagen: <img src="data:image/png;base64,…" alt="">. En CSS, úsalo dentro de url(): background-image: url("data:…");. En JSON es una cadena normal; muchas API solo quieren la parte en Base64, sin el prefijo data:. En principio, Markdown acepta , pero GitHub y muchos otros sitios eliminan las imágenes en data URI, así que allí enlaza una imagen alojada en un servidor.
¿Qué tamaño puede tener la imagen?
La herramienta codifica imágenes de hasta 20 MB, y los navegadores pueden mostrar data URI de varios megabytes. En la práctica, limita las imágenes incrustadas a unos pocos kilobytes: las más grandes engordan tu HTML o tu CSS y no se pueden guardar en caché por separado.
¿Cómo convierto un data URI de nuevo en un archivo de imagen?
Cambia a «Base64 a imagen» y pega el data URI o el Base64 sin más. La herramienta detecta el formato real a partir de los propios datos, muestra una vista previa y guarda el archivo con la extensión correcta, aunque el URI indicara otro tipo.