Reference

Guía de URI de Datos (Data URIs)

Todo sobre data URIs: formato, uso en HTML/CSS, cuándo usarlos y cuándo evitarlos.

¿Qué es un Data URI?

Un data URI incluye datos directamente en una URL: data:[tipo MIME][;base64],datos. Ejemplo: data:image/png;base64,iVBOR...

Uso en HTML y CSS

HTML: <img src="data:image/png;base64,...">
CSS: background-image: url('data:image/svg+xml;base64,...')

Ventajas

  • Eliminan solicitudes HTTP adicionales
  • Permiten páginas web autónomas
  • Ideales para iconos SVG pequeños (<5KB)

Desventajas

  • Aumentan el tamaño HTML/CSS un 33%
  • No pueden cachearse de forma independiente
  • No adecuados para imágenes grandes (>10KB)

Preguntas Frecuentes

¿Funcionan en todos los navegadores?

Sí. Todos los navegadores modernos soportan data URIs.