¿Qué es Generador de Data URI?

Data URI Generator convierte archivos en URIs de datos codificados en base64 que puedes incrustar directamente en HTML, CSS o JavaScript. Elimina peticiones HTTP adicionales para recursos pequeños como iconos y fuentes.

Arrastra un archivo de hasta 20 MB y la herramienta detecta el tipo MIME, codifica los bytes en base64 y devuelve tres fragmentos listos para pegar: la data URI cruda, la regla CSS background-image y la etiqueta HTML img. Las imágenes traen vista previa para detectar salidas en blanco o corruptas antes de subirlas a producción. También puedes pegar texto para codificar una cadena SVG o JSON, reducir imágenes grandes antes de codificarlas para mantener la URI pequeña, corregir el tipo MIME si se detectó mal, codificar varios archivos a la vez, traer un archivo remoto directamente desde su URL o cambiar al modo decodificar para pegar una data URI y recuperar el archivo original.

Cómo usar

1. Sube un archivo con el selector, o cambia al modo texto y pega una cadena (SVG, JSON, CSS) para codificarla.
2. La herramienta lo codifica en base64 y genera el URI de datos completo con el tipo MIME correcto.
3. Copia el URI de datos para usarlo en atributos img src, background-image de CSS o código JavaScript.

Cuándo usar

• Incrustar un logo pequeño en un demo HTML de un solo archivo sin alojar recursos.
• Insertar imágenes en correos para que se vean aunque el cliente bloquee la carga remota.
• Pegar una fuente o un SVG en el CSS y eliminar una petición que bloquea el render.

Resultado

Convierte un favicon.png de 2KB en un URI de datos y pégalo directamente en tu HTML — una petición de red menos en cada carga de página.

Preguntas frecuentes

¿Por qué la data URI codificada pesa un 33 % más que el archivo?

Base64 usa 4 caracteres ASCII por cada 3 bytes binarios, así que crece un 33 %. Con gzip activado en la respuesta HTTP, gran parte se recupera, pero el archivo HTML o CSS guardado en disco sí pesa más que el recurso original.

¿Hasta qué tamaño conviene usar una data URI?

Unos 10 KB antes de codificar es el límite práctico para incrustar. Más allá, el navegador todavía la procesa pero se pierde la caché (se reanaliza en cada página) y los HTML o CSS son más difíciles de mantener. Para activos más grandes, mejor servirlos como archivo normal.

¿Funciona una data URI como imagen de fondo en CSS?

Sí, la herramienta entrega la regla CSS exacta. Envuelve la URI en url() dentro de background-image. El navegador la decodifica en la primera pintura, así un icono pequeño se mantiene inline y evita la petición de red que retrasaría el primer render.

¿El navegador cachea una data URI como cualquier otra imagen?

No. La data URI forma parte del documento padre, así que se cachea solo cuando se cachea el documento. La misma imagen referenciada desde veinte páginas se decodifica veinte veces. Para activos compartidos entre páginas, una URL alojada normal sale más rápida.

¿Las data URIs sirven en correos HTML?

Gmail y Apple Mail las muestran. Outlook (versión Windows de escritorio) las elimina. Para compatibilidad amplia, adjunta la imagen como parte referenciada por CID en vez de meter la data URI dentro del cuerpo HTML.

Herramientas relacionadas