Generador de data URI – de texto o archivos a URL data:

Cómo crear una data URI

Elige un modo. Desde texto (el predeterminado) codifica lo que escribes o pegas. Desde archivo toma un archivo de cualquier tipo, soltado, pegado o seleccionado. Analizar hace lo contrario y desmonta una URI.
En Desde texto, ajusta el Tipo MIME (por ejemplo text/css o application/json), un Juego de caracteres y la Codificación: Base64 o codificado para URL. En Desde archivo, el tipo MIME se rellena a partir del archivo y se puede editar.
Elige el Formato de salida: Data URI, url() de CSS, <a> de HTML con un nombre de descarga o Markdown. <img> de HTML aparece para imágenes y @font-face para fuentes.
Pulsa Copiar salida. Descargar archivo guarda el propio contenido, y Guardar como .txt guarda el texto de salida.

Bajo los botones, Payload es el tamaño de los datos, Longitud de la URI el tamaño del resultado y Sobrecarga la diferencia en porcentaje.

La sintaxis de una data URI

Una data URI mete un archivo entero dentro de una URL:

data:[<media type>][;charset=<charset>][;base64],<data>

Parte	Ejemplo	Notas
tipo de medio	`image/png`, `text/css`	opcional; vacío significa `text/plain;charset=US-ASCII`
parámetros	`;charset=utf-8`	para tipos de texto; se permiten más pares `;key=value`
`;base64`	`;base64`	los datos están en Base64; sin él, van codificados con porcentajes
datos	tras la coma	el contenido

Unos cuantos ejemplos:

Data URI	Contiene
`data:,Hello%2C%20World%21`	el texto `Hello, World!`, con tipo implícito
`data:text/plain;charset=utf-8;base64,SGVsbG8sIFdvcmxkIQ==`	el mismo texto, en Base64
`data:text/css,body%7Bcolor:%23333%7D`	una regla CSS, codificada para URL
`data:application/json;base64,eyJvayI6dHJ1ZX0=`	`{"ok":true}`

La coma es obligatoria, incluso cuando los datos están vacíos: data:, es una URI válida y vacía.

Base64 o codificación para URL

Las dos codificaciones producen una URI válida; se diferencian en tamaño y legibilidad.

Contenido	URI en Base64	URI codificada para URL
`Hello, World!` como `text/plain;charset=utf-8`	57 caracteres	45 caracteres
`body{color:#333}` como `text/css`	45 caracteres	36 caracteres
`{"ok":true}` como `application/json`	45 caracteres	41 caracteres
`<h1>Héllo</h1>` como `text/html;charset=utf-8`	56 caracteres	56 caracteres

El texto ASCII simple es más corto codificado para URL, y además se sigue leyendo en el código fuente. Cada byte no ASCII cuesta tres caracteres (é es %C3%A9), así que con texto en otros alfabetos Base64 gana enseguida. Para imágenes, fuentes, PDF y otros archivos binarios, usa Base64; el generador avisa si eliges codificación para URL con datos binarios.

La codificación para URL que se usa aquí es conservadora: las letras, los dígitos y - . _ ~ ! $ * + , ; = : @ / ? se quedan como están, y todo lo demás se escapa, incluidos #, %, las comillas, los paréntesis y los espacios. Un # sin escapar terminaría la URI, porque los navegadores lo leen como el inicio de un fragmento. Para SVG hay una tercera opción, más corta, en SVG a data URI.

Dónde funcionan las data URI

Imágenes en <img src>, background-image de CSS, <link rel="icon"> y el poster de un vídeo.
Fuentes en el src de @font-face, práctico para una pequeña fuente de iconos. El generador construye la regla por ti cuando el tipo MIME es una fuente.
Descargas mediante <a href="data:..." download="report.csv">, para archivos generados en una página sin servidor.
Hojas de estilos y scripts cargados con <link href> o <script src>, cuando la Content Security Policy de la página permite data: para ellos.
Datos de prueba y contenido JSON que necesitan un archivo pequeño en línea.

No funcionan en todas partes. Chrome y Firefox bloquean la navegación de la pestaña entera a una URL data: iniciada por la página, así que un enlace a data:text/html,... no hace nada al pulsarlo. Una Content Security Policy debe incluir data: en img-src, font-src o la directiva correspondiente. Muchos clientes de webmail, Gmail entre ellos, eliminan por completo las imágenes en data URI; consulta Base64 en el correo electrónico.

Tamaño y rendimiento

Base64 hace que los datos binarios ocupen alrededor de un 33% más, y la URI se repite en cada página u hoja de estilos que la contiene, sin entrada propia en la caché. Ese intercambio sale a cuenta con recursos pequeños de unos pocos kilobytes y sale mal con fotos. Rendimiento de las data URI repasa las cifras. Para imágenes en particular, Imagen a Base64 puede redimensionar y convertir antes de codificar.

Crear una data URI en código

Texto codificado para URL en JavaScript:

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

JSON en Base64 con Python:

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

Más en Base64 en JavaScript y Base64 en Python. Para inspeccionar una data URI que hayas encontrado por ahí, usa el analizador de data URI.

Preguntas frecuentes

¿Qué diferencia hay entre una data URI y una data URL?

En la práctica, ninguna. El RFC 2397 lo llama esquema de URL “data”, y los navegadores y el estándar Fetch dicen data URL; data URI es el nombre más antiguo, igual de habitual, para la misma sintaxis data:.

¿Cuándo uso codificación para URL en lugar de Base64?

Para texto corto y casi todo ASCII, como CSS, JSON o SVG, la codificación para URL suele ser más corta y sigue siendo legible. Para archivos binarios, Base64 siempre ocupa menos, porque la codificación con porcentajes convierte la mayoría de los bytes en tres caracteres.

¿Necesito ;charset=utf-8 en una data URI?

Para texto con cualquier carácter no ASCII, sí. Sin él, una data URI text/plain usa US-ASCII por defecto, y é o € pueden salir como dos o tres caracteres erróneos. Las imágenes y otros tipos binarios no llevan charset.

¿Por qué al hacer clic en mi enlace data: no se abre nada?

Chrome y Firefox impiden que una página lleve la pestaña entera a una URL data:, porque se usaba mucho para phishing. Las imágenes, las hojas de estilos, las fuentes y las descargas con <a download> siguen funcionando.

¿Hay un límite de tamaño para las data URI?

Los límites varían entre navegadores y son generosos para imágenes, pero las URI muy largas ralentizan las páginas y algunas herramientas las truncan. El generador avisa a partir de 2 MB; para algo tan grande, enlaza un archivo.