Cómo se usa
- Escribe el texto o elige el archivo que quieres incrustar.
- Comprueba o introduce el tipo MIME, como image/png o image/svg+xml, y elige Base64 o Codificación porcentual.
- Copia el data URI generado en tu HTML, CSS o JSON.
- Para examinar un data URI existente, pégalo en el analizador: verás su tipo MIME, su juego de caracteres, su tamaño y una vista previa, y podrás descargar el archivo incrustado.
Sintaxis de un data URI
Un data URI, definido en RFC 2397, lleva un archivo pequeño dentro de la propia URL:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...El tipo de medio indica al navegador cómo interpretar los datos; si se omite, se supone text/plain;charset=US-ASCII. El indicador ;base64 significa que la parte que sigue a la coma está en Base64. Sin él, los datos son texto plano en el que los caracteres especiales llevan codificación porcentual.
Base64 o codificación porcentual
Base64 es la opción adecuada para archivos binarios como PNG, JPEG, WebP, fuentes y PDF. Siempre añade alrededor de un 33 %. En los formatos de texto, la codificación porcentual suele ocupar menos, porque la mayoría de los caracteres se quedan como están y solo unos pocos, como <, >, #, % y las comillas dobles, necesitan escaparse. Por eso encaja bien con los iconos SVG, y además el resultado, al ser legible, se comprime mejor con gzip o Brotli. Sin embargo, cada byte de texto no ASCII se convierte en tres caracteres, así que para texto en chino o en cirílico Base64 suele ser más corto. Si tienes dudas, prueba las dos opciones y quédate con el resultado más corto.
/* SVG con codificación porcentual en CSS: comillas simples dentro, # escrito como %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Cuándo compensa incrustar
Un data URI ahorra una petición HTTP, pero los datos pasan a formar parte del documento que los contiene:
- Sin caché independiente. Una imagen incrustada en el HTML se descarga de nuevo con cada página. Si está incrustada en una hoja de estilo, se guarda en caché junto con ese archivo, y cambiarla invalida toda la hoja de estilo.
- Primer renderizado más lento. Los data URI grandes en CSS retrasan el renderizado, porque el navegador tiene que descargar y analizar antes toda la hoja de estilo.
- Sobrecarga de tamaño. Base64 añade un tercio, que solo se recupera en parte al comprimir el HTML o el CSS.
Con HTTP/2 y HTTP/3, las peticiones adicionales son baratas, así que incrusta solo recursos pequeños de unos pocos kilobytes, como iconos, marcadores de posición diminutos o un fondo crítico, y sirve todo lo demás como archivos normales. Los sitios con Content Security Policy deben permitir data: en img-src o font-src para que se carguen las imágenes y las fuentes incrustadas.
Preguntas frecuentes
¿Hay un límite de tamaño para los data URI?
RFC 2397 no fija ningún límite, y los navegadores modernos aceptan data URI de varios megabytes en imágenes y hojas de estilo. Aun así, los grandes no son buena idea: inflan la página, no se pueden guardar en caché por separado y tardan más en analizarse.
¿Por qué no se abre un data URI cuando hago clic en un enlace que apunta a él?
La mayoría de los navegadores impiden que las páginas web carguen una URL data: en la ventana principal, como protección contra el phishing. Usa los data URI dentro de imágenes, CSS o enlaces de descarga, o pega el URI en el analizador de esta página para previsualizarlo y descargar el contenido.
¿Cómo uso un data URI en HTML y CSS?
<img src="data:image/png;base64,..."> en HTML, o background-image: url("data:image/svg+xml,...") en CSS. En CSS, escribe el valor entre comillas, sobre todo si es un SVG con codificación porcentual.¿Tengo que indicar un juego de caracteres?
text/plain o text/html que contienen caracteres no ASCII, sí: añade ;charset=UTF-8 después del tipo de medio; de lo contrario, el valor predeterminado US-ASCII puede hacer que se muestren mal. Los tipos binarios como image/png no necesitan juego de caracteres.