En este artículo
Que son los data URIs?
Un data URI (Uniform Resource Identifier) es un esquema que permite incrustar contenido de archivos directamente en una cadena URL en lugar de enlazar a un archivo externo. Definido por la RFC 2397, los data URIs codifican el contenido en línea usando el formato data:[mediatype][;base64],data. Esto elimina la necesidad de una solicitud HTTP separada para obtener el recurso.
Los data URIs se usan comunmente para incrustar pequeñas imagenes, fuentes, SVGs y otros recursos directamente en HTML o CSS. En lugar de referenciar un archivo externo con una URL, el contenido completo del archivo se codifica (tipicamente en base64) y se coloca en línea. Esto puede reducir solicitudes HTTP y simplificar el despliegue para recursos pequeños.
Como crear data URIs
Un generador de data URI convierte contenido de archivos o texto al formato data URI. El proceso implica identificar el tipo MIME y codificar el contenido.
- Entrada de texto — ingresa texto directamente y especifica el tipo MIME (text/plain, text/html, text/css, application/json). El texto puede codificarse en URL o en base64
- Carga de archivo — sube cualquier archivo (imagenes, fuentes, SVGs, documentos) y el generador determina el tipo MIME automaticamente y codifica el contenido en base64
- Selección de tipo MIME — el tipo de medio le dice al navegador como interpretar los datos. Tipos comunes incluyen image/png, image/svg+xml, text/css y application/javascript
Pruébalo gratis — sin registro
Generar un data URI →Cuando usar data URIs
Los data URIs son mas beneficiosos para recursos pequeños y frecuentemente usados donde eliminar una solicitud HTTP mejora el rendimiento.
- Imagenes de fondo CSS — incrusta iconos o patrones pequeños directamente en CSS para evitar solicitudes extra. Ideal para imagenes menores de 2-4 KB
- SVGs en línea en CSS — incrusta iconos SVG como data URIs en propiedades background-image cuando el SVG no puede colocarse directamente en HTML
- Plantillas HTML de email — incrusta imagenes directamente en el HTML del email porque muchos clientes de correo bloquean imagenes externas por defecto
Preguntas frecuentes
Hay un limite de tamaño para los data URIs?
No hay un limite estricto en la especificación, pero existen limites practicos. La mayoría de los navegadores modernos manejan data URIs de hasta varios megabytes, pero Internet Explorer los limitaba a 32 KB. La codificación base64 aumenta el tamaño de los datos aproximadamente un 33%. Para recursos mayores de 5-10 KB, los archivos externos con cache adecuado son generalmente mas eficientes.
Los data URIs afectan el rendimiento?
Para recursos pequeños, los data URIs mejoran el rendimiento al eliminar solicitudes HTTP. Sin embargo, los datos codificados en base64 son aproximadamente un 33% mas grandes que el archivo original, y los data URIs no pueden ser cacheados independientemente por el navegador. Para archivos grandes, los archivos externos con headers de cache funcionan mejor.
Son seguros los data URIs?
Los data URIs tienen implicaciones de seguridad. La mayoría de los navegadores bloquean la ejecución de JavaScript en data URIs. Sin embargo, los data URIs pueden evadir las reglas de Content Security Policy (CSP) si no estan configuradas correctamente. Al aceptar data URIs generados por usuarios, siempre valide el tipo MIME.