Convertidor de Data URI

Acerca de Convertidor de Data URI

Un data URI es una URL que lleva dentro el propio archivo. Tiene la forma data:image/png;base64,iVBOR…, y si la pones en el src de una imagen o en un url() de CSS, el navegador muestra la imagen sin descargar un archivo aparte. El formato se definió en la RFC 2397, de 1998.

La herramienta funciona en los dos sentidos. Si le das un archivo, genera el data URI en Base64, el cambio de tamaño y un fragmento CSS listo para pegar (background-image o, para fuentes, una regla @font-face). Si pegas un data URI, muestra el tipo MIME, la codificación y el tamaño real, previsualiza imágenes y te deja guardar el contenido como archivo.

Cómo se lee un data URI

La gramática es data:[tipo de medio][;base64],datos. Lo que va antes de la primera coma describe el contenido y lo que va después es el contenido. Si se omite el tipo, la RFC 2397 indica asumir text/plain;charset=US-ASCII. Así que data:,Hello%2C%20World%21 es un data URI válido; esta herramienta lo lee como text/plain, 13 bytes, “Hello, World!”.

Con ;base64, lo que sigue a la coma es Base64; sin él, lleva codificación porcentual. Esta herramienta convierte cada %XX directamente en ese byte en lugar de leerlo como UTF-8, así que binarios como %FF%00 o texto con charset=ISO-8859-1 se recuperan intactos, y el charset viaja con el tipo del archivo descargado. Los binarios (imágenes, fuentes) casi siempre van en Base64. El SVG y el texto corto suelen ocupar menos con codificación porcentual: el SVG ya es texto, así que Base64 lo engorda un tercio, mientras que la codificación porcentual solo toca unos pocos caracteres como <, > y #.

Tamaño: el 33 % solo vale para archivos grandes

Base64 escribe 3 bytes como 4 caracteres, así que la carga ocupa ceil(n/3) × 4 caracteres, y data:image/png;base64, suma 22 más delante. Un PNG de 30.000 bytes pasa a 40.000 caracteres de Base64 y a un URI de 40.022: +33 %. Un icono de 100 bytes pasa a 136 caracteres de Base64 (+36 %), pero a 158 en total (+58 %). Por eso la herramienta muestra los dos aumentos por separado.

Cuándo incrustar perjudica

La ventaja de un data URI es ahorrarse una petición HTTP. Con HTTP/1.1 y pocas conexiones paralelas por servidor, incrustar decenas de iconos pequeños compensaba claramente. HTTP/2 multiplexa muchas peticiones sobre una sola conexión y esa ventaja se reduce mucho. Los inconvenientes siguen ahí:

• Sin caché independiente. Una imagen incrustada solo se guarda en caché como parte del CSS o HTML que la contiene. Si cambias el logotipo, cada visitante vuelve a descargar toda la hoja de estilos; si lo incrustas en el HTML, cada página lleva su propia copia de los mismos bytes.
• Bloquea el renderizado. El navegador no pinta hasta tener el CSS, así que un data URI grande dentro del CSS retrasa la primera pintura lo que tarden esos bytes extra.
• Sin prioridades ni carga diferida. loading="lazy" y srcset dejan de tener sentido; una imagen fuera de pantalla llega igualmente con todo lo demás.
• Es más grande. La compresión gzip o Brotli del archivo contenedor recupera parte del 33 %, pero el resultado sigue siendo mayor que servir la imagen original.

Dónde sí tiene sentido

Iconos y patrones de unos cientos de bytes, un indicador de carga que se usa una vez, correos HTML (muchos clientes bloquean imágenes externas), informes de un solo archivo y documentos que deben abrirse sin conexión. Incrustar una fuente en @font-face evita el parpadeo del texto mientras se descarga, pero las fuentes suelen pesar decenas de kilobytes y todo eso va a tu CSS en cada visita sin caché.

Nota de seguridad: para frenar el phishing, los principales navegadores bloquean la navegación de nivel superior a URL data:; pegar una en la barra de direcciones o seguir un enlace a data:text/html no abre la página. El uso dentro de imágenes y hojas de estilo no se ve afectado.

Ejemplos

Cómo se usa

1. Archivo → data URI: arrastra o elige un archivo para obtener el URI, el cambio de tamaño y un fragmento CSS.
2. Si es una fuente, escribe el nombre de la familia y copia la regla @font-face.
3. Data URI → archivo: pega la cadena para ver tipo y tamaño, previsualizar imágenes y guardar el contenido.

Preguntas frecuentes