Data URIs Base64 en CSS y HTML

Un data URI te permite incrustar un archivo completo —una imagen, una fuente, un icono SVG— directamente dentro de tu HTML o CSS, sin una petición de red aparte. El archivo se codifica en Base64 y se pega en línea como texto. Bien usado, recorta milisegundos en las cargas de página. Usado sin cuidado, infla tus hojas de estilo y ralentiza todo. Esta guía muestra la sintaxis exacta, las contrapartidas reales y una regla clara sobre cuándo recurrir a él.

¿Quieres generar uno ahora mismo? Pega un archivo en Base64 Decode para codificarlo, o usa el generador de data URI específico para obtener una cadena data: lista para pegar.

---

Qué aspecto tiene un data URI

Un data URI sigue una estructura sencilla definida en la RFC 2397:

data:[<media type>][;base64],<data>

Desglosado en partes:

• data: — el esquema, como https: o mailto:
• <media type> — el tipo MIME, p. ej. image/png, font/woff2, image/svg+xml
• ;base64 — indica que la carga está codificada en Base64 (omítelo en formatos de texto plano)
• <data> — los bytes codificados propiamente dichos

Un ejemplo real de un PNG diminuto:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1px dot">

El navegador decodifica esa cadena y la renderiza como una imagen, sin petición HTTP a un archivo aparte.

---

Usar data URIs en CSS

El lugar más habitual donde brillan los data URIs es en los fondos de CSS, donde eliminar una petición evita un viaje de ida y vuelta que bloquea el renderizado:

.icon-check {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

Puedes incrustar fuentes web de la misma forma dentro de una regla @font-face:

@font-face {
  font-family: "Brand";
  src: url("data:font/woff2;base64,d09GMgABAAAAAA...") format("woff2");
  font-display: swap;
}

---

SVG: el único formato que a menudo NO deberías pasar a Base64

El SVG es texto, no binario. Codificarlo en Base64 funciona, pero en realidad hace el archivo más grande e ilegible. Para SVG, prefiere la codificación URL: se mantiene más pequeño y puedes seguir editándolo a mano:

/* Base64 — más grande, opaco */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");

/* Codificado en URL — más pequeño, legible para humanos */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E");

Una herramienta específica como el conversor de SVG a data URI produce automáticamente la forma optimizada y codificada en URL. Reserva Base64 para activos genuinamente binarios como PNG, JPEG y WOFF2.

---

La contrapartida de rendimiento

El inlining no es gratis. Cada data URI conlleva los mismos costes y beneficios:

Beneficios

• Una petición HTTP menos. Para activos diminutos por encima del pliegue, eliminar un viaje de ida y vuelta puede mejorar de forma medible el primer pintado.
• Entrega atómica. El activo llega con el HTML o el CSS, así que no hay parpadeo de imagen ausente ni una segunda petición que pudiera fallar.
• Sin problemas de CORS ni de rutas. Los datos viajan con el documento.

Costes

• Carga ~33 % mayor. Base64 infla los datos binarios en aproximadamente un tercio (cada 3 bytes se convierten en 4 caracteres). Una imagen de 9 KB pasa a ser ~12 KB de texto.
• Sin caché independiente. Un image.png aparte se almacena en caché una vez y se reutiliza en todas las páginas. Una imagen incrustada se vuelve a descargar dentro de cada archivo HTML o CSS que la contiene, en cada fallo de caché.
• El CSS que bloquea el renderizado se vuelve más pesado. Incrustar imágenes grandes en una hoja de estilo retrasa toda la hoja de estilo, y por tanto el primer pintado.
• Más difícil de mantener. Un blob Base64 de 40 KB en tu CSS es ilegible e infla los diffs.

La penalización del 33 % en el tamaño es inherente a la codificación. Si quieres entender exactamente por qué ocurre, consulta qué es la codificación Base64.

---

Una regla práctica sencilla

Usa un data URI cuando se cumplan todas estas condiciones:

• El activo es pequeño (una pauta habitual es por debajo de ~2–4 KB).
• Es crítico y está por encima del pliegue (un logotipo, un icono de héroe, un fondo que se usa de inmediato).
• Se usa en una o pocas páginas, de modo que no lo estás duplicando por todo el sitio.

Usa un <img src> normal o un url() externo cuando:

• El activo es grande (fotos, ilustraciones): el sobrecoste del 33 % y la pérdida de caché superan la petición ahorrada.
• Se reutiliza en muchas páginas: gana la caché compartida.
• Dependes de una CDN, carga diferida o srcset responsivo, nada de lo cual funciona con datos incrustados.

El HTTP/2 y el HTTP/3 modernos multiplexan las peticiones de forma barata, lo que ha reducido el beneficio del inlining frente a los antiguos tiempos de HTTP/1.1. Incrusta de forma deliberada, para activos pequeños concretos, no como estrategia general.

---

Generar y decodificar data URIs

Para crear un data URI, codifica el archivo en Base64 y envuélvelo en el prefijo data:<mime>;base64,. El generador de data URI lo hace en un solo paso y elige el tipo MIME correcto por ti.

Para leer un data URI de vuelta a un archivo, elimina todo hasta la coma incluida y luego decodifica en Base64 el resto. La herramienta Base64 a imagen previsualiza el resultado, y Base64 a archivo recupera cualquier tipo de archivo. Todo se ejecuta en tu navegador, así que los activos sensibles nunca salen de tu máquina.

---

Preguntas frecuentes

¿Qué es un data URI Base64?

Un data URI es una cadena que incrusta el contenido de un archivo directamente en HTML o CSS mediante el esquema data:. Cuando el archivo es binario (como un PNG), se codifica en Base64 y se le antepone data:<mime-type>;base64,. El navegador lo decodifica en línea, así que no hace falta una petición de red aparte.

¿Los data URIs hacen una página más rápida?

Pueden hacerlo, para activos críticos pequeños, al eliminar una petición HTTP. Pero añaden ~33 % al tamaño del activo y no se pueden almacenar en caché de forma independiente, así que incrustar archivos grandes o muy reutilizados suele hacer las páginas más lentas en conjunto.

¿Debería codificar SVG en Base64 para un data URI?

Normalmente no. El SVG es texto, así que la codificación URL lo mantiene más pequeño y legible para humanos. Reserva Base64 para formatos realmente binarios como PNG, JPEG y fuentes WOFF2.

¿Cuál es el tamaño máximo de un data URI?

No hay un límite estricto en la especificación, pero los navegadores históricamente limitaron los data URIs (el IE antiguo los limitaba a 32 KB). En la práctica, mantenlos pequeños —unos pocos kilobytes— porque los activos incrustados grandes inflan tu HTML/CSS y perjudican la caché y los tiempos de pintado.

¿Cómo convierto una imagen en un data URI?

Codifica la imagen en Base64 y antepón data:image/png;base64, (haciendo coincidir el tipo MIME real). El generador de data URI y Base64 Decode lo hacen en el navegador, sin subir nada a un servidor.

¿Por qué no se muestra mi imagen de data URI?

Los culpables habituales son un tipo MIME incorrecto, una marca ;base64 ausente, espacios en blanco o saltos de línea sueltos dentro de la cadena, o un Base64 truncado. Vuelve a codificar el archivo de forma limpia y confirma que el prefijo coincide con el formato real.