Generador de Data URI
Convierte cualquier archivo o texto en un data: URI con el tipo MIME correcto, en Base64 o codificación porcentual, más fragmentos <img> y CSS listos. En local.
¿Qué es Generador de Data URI?
Un data URI incrusta un archivo directamente dentro de HTML, CSS o JSON como data:<mime>;base64,<data>, así que no hace falta una petición aparte. Esta herramienta convierte cualquier archivo (imágenes, fuentes, SVG, PDF…) o texto escrito en un data URI, detecta el tipo MIME, te deja elegir entre Base64 y codificación porcentual y te da los fragmentos HTML y CSS correspondientes.
Cómo usar Generador de Data URI
- Elige Archivo y suelta un archivo, o elige Texto y escribe el contenido.
- Revisa o edita el Tipo MIME.
- Deja activada la Codificación Base64 para archivos binarios; desactívala para usar codificación porcentual en texto y SVG (suele ser más pequeña).
- Copia el Data URI o el fragmento HTML / CSS.
Ejemplo
Texto: Hello, World! (Base64 activado)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
Cuándo usar Generador de Data URI
Usa data URIs para recursos pequeños: iconos, SVG diminutos, imágenes de relleno, fuentes en demos de un solo archivo o plantillas de correo, y fixtures de pruebas. Evítalos en webs para archivos de más de unos pocos kilobytes: Base64 añade alrededor de un 33 % al tamaño y los datos incrustados no se pueden almacenar en caché por separado de la página o la hoja de estilo.
Cómo funciona Generador de Data URI
El archivo se lee como bytes en el navegador. El tipo MIME lo proporciona el navegador o la extensión del archivo. Con Base64, los bytes se codifican con el alfabeto estándar (RFC 4648) y se escriben como data:<mime>;base64,… (RFC 2397). Sin Base64, el contenido se decodifica como UTF-8 y se escapa con encodeURIComponent, y se añade ;charset=utf-8 a los tipos de texto. Se muestra una vista previa para las imágenes y el tamaño del resultado.
Casos de Uso Comunes
- Incrustar un pequeño icono SVG en un background-image de CSS
- Incrustar imágenes en un informe HTML de un solo archivo
- Meter una imagen diminuta en un fixture JSON de una API
- Crear una imagen de firma de correo autocontenida
Preguntas Frecuentes
¿Por qué el data URI es más grande que mi archivo?
Base64 codifica cada 3 bytes como 4 caracteres, así que el resultado es aproximadamente un 33 % más grande. La codificación porcentual de texto o SVG suele ser más pequeña.
¿Se sube mi archivo?
No. El archivo se lee y se codifica completamente en tu navegador.
¿Cuál es el límite de tamaño?
La herramienta acepta archivos de hasta 20 MB, pero los navegadores y clientes de correo manejan mal los data URI grandes; mantenlos pequeños.