Generador de Data URI

Generador de Data URI

Un data URI incrusta el contenido del archivo directamente en un atributo HTML o valor CSS, reemplazando una URL externa por los datos del archivo mismo. Esta herramienta genera data URIs leyendo cualquier archivo localmente, detectando su tipo MIME y codificando el contenido como Base64.

Como Usarlo

1. Suelta el archivo en el área de carga o haz clic para examinar
2. La herramienta detecta el tipo MIME y codifica el archivo
3. El formato de salida “Data URI” esta seleccionado por defecto
4. Copia el data URI

Sintaxis del Data URI

Cada data URI sigue esta estructura:

data:[<mediatype>][;base64],<datos>

• mediatype: Tipo MIME (ej. image/png, application/pdf, audio/mpeg). Si no se específica, el valor predeterminado es text/plain;charset=US-ASCII.
• ;base64: Indica que los datos están codificados en Base64. Sin esto, los datos son texto codificado en URL.
• datos: El contenido real, codificado en Base64 (para binarios) o URL encoding (para texto).

Ejemplos:

data:image/png;base64,iVBORw0KGgoAAAANSU...
data:text/html,%3Chtml%3E%3Cbody%3EHola%3C/body%3E%3C/html%3E
data:text/plain;charset=utf-8,Hola%20Mundo

Donde Funcionan los Data URIs

Etiquetas img HTML

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Imagen en línea" />

Fondos CSS

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

Descargas de enlaces HTML

<a href="data:application/pdf;base64,JVBERi..." download="documento.pdf">
  Descargar PDF
</a>

Favicons

<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy..." />

Iframes

<iframe src="data:text/html;base64,PCFET0NUWVBF..." width="100%" height="400"></iframe>

JavaScript

const audio = new Audio('data:audio/mpeg;base64,SUQz...');
const img = new Image();
img.src = 'data:image/png;base64,iVBOR...';

Data URIs vs URLs Externas

Usa data URIs para recursos pequenos y de uso único que necesitan estar disponibles inmediatamente. Usa URLs externas para activos grandes, reutilizables o almacenables en cache.