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 linea 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 pequenas 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 linea. Esto puede reducir solicitudes HTTP y simplificar el despliegue para recursos pequenos.
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
- Seleccion 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 pequenos y frecuentemente usados donde eliminar una solicitud HTTP mejora el rendimiento.
- Imagenes de fondo CSS — incrusta iconos o patrones pequenos directamente en CSS para evitar solicitudes extra. Ideal para imagenes menores de 2-4 KB
- SVGs en linea 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 tamano para los data URIs?
No hay un limite estricto en la especificacion, pero existen limites practicos. La mayoria de los navegadores modernos manejan data URIs de hasta varios megabytes, pero Internet Explorer los limitaba a 32 KB. La codificacion base64 aumenta el tamano 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 pequenos, 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 mayoria de los navegadores bloquean la ejecucion 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.