Data URLs: data:text/html;base64 y compañía, explicados
Data URLs (URI data:)
Data URI y data:text/html;base64 explicados, con codificador | We.Inc
Cómo funcionan las URL data: la sintaxis, base64 frente a la codificación por porcentaje, el coste de un tercio más de tamaño, por qué data:text/html no se abre en una pestaña, y un codificador y decodificador.
Una data URL lleva un archivo entero dentro de la propia dirección: data:, un tipo de medio opcional, ;base64 si los bytes están codificados en base64, una coma y después el contenido. data:text/html;base64,PGgxPkhpPC9oMT4= es una página web diminuta. Base64 hace que el contenido ocupe aproximadamente un tercio más, y los navegadores se niegan a abrir páginas data: como pestaña de nivel superior.
Anatomía de una data URL
Parte
Ejemplo
Notas
Esquema
data:
Siempre va primero
Tipo de medio
image/svg+xml
Opcional; por defecto es text/plain;charset=US-ASCII
Parámetros
;charset=utf-8
Opcionales, después del tipo de medio
Indicador de codificación
;base64
Solo aparece cuando los datos están en base64
Separador
Obligatorio, incluso sin tipo de medio
Datos
PHN2Zz4uLi48L3N2Zz4=
Base64, o texto codificado por porcentaje
Las data URLs son útiles para iconos diminutos, fondos CSS, datos de prueba y descargas generadas, y una fuente habitual de confusión cuando alguien pega una larga cadena data:text/html en la barra de direcciones y no pasa nada. Abajo puedes codificar cualquier texto en una data URL, decodificar una de vuelta y ver exactamente cuánto cuesta en bytes frente al original.
Escribe o pega el contenido y elige su tipo de medio. La herramienta muestra la forma en base64 y la codificada por porcentaje, con sus longitudes.
Compara los tamaños. Base64 son unos cuatro caracteres por cada tres bytes; la codificación por porcentaje puede ser más corta para texto plano y SVG.
Pega cualquier data URL en el decodificador para leer su tipo de medio, su codificación y su contenido. Los tipos de imagen muestran una vista previa.
Los resultados HTML se renderizan en un marco aislado (sandbox), porque una página data: no puede abrirse en una pestaña propia.
Para SVG en CSS, la codificación por porcentaje suele ser más pequeña que base64 y sigue siendo legible. Recuerda codificar # como %23.
Incrusta solo archivos pequeños. Una data URL no se puede cachear por separado, así que una grande se vuelve a descargar con cada página u hoja de estilos que la contenga.
Sin ningún tipo de medio, el valor por defecto es text/plain;charset=US-ASCII, así que indica el tipo y añade charset=utf-8 para texto con tildes o emojis.
Las data URLs no admiten query strings. Todo lo que va después de la coma, incluido un signo de interrogación, se trata como datos.
Para archivos que el visitante genera en la página, una URL blob: creada con URL.createObjectURL evita construir una cadena enorme.
Preguntas frecuentes
¿Por qué data:text/html;base64 no se abre cuando lo pego en la barra de direcciones?
Los navegadores modernos bloquean la navegación de nivel superior a URL data: como medida contra el phishing, porque una página data podría imitar cualquier sitio ocultando su origen real. El contenido sigue funcionando dentro de un iframe, de un elemento img o como enlace de descarga.
¿Cuánto más grande hace base64 un archivo?
Aproximadamente un tercio. Base64 escribe cada tres bytes como cuatro caracteres, así que una imagen de 30 KB se convierte en unos 40 KB de texto antes de cualquier compresión. El aumento exacto depende de la longitud y del relleno.
¿Cómo convierto una data URL en base64 de nuevo en una imagen?
Pégala en el decodificador de esta página para verla, o ponla directamente en el src de un img. Para guardarla como archivo, usa nuestra herramienta de imagen a base64 a la inversa, o haz fetch de la data URL en JavaScript y guarda el Blob resultante.
¿Hay un límite de tamaño?
MDN indica 512 MB para Chromium y Firefox y 2,048 MB para Safari. Mucho antes de eso, las data URLs enormes hacen que el HTML y el CSS tarden en analizarse y no se puedan cachear, así que mantenlas en unos pocos kilobytes.
¿Qué origen tiene una página con data URL?
Un origen opaco propio, no el origen de la página que la creó. Así que el script dentro de un iframe data: es tratado como un extraño por la página que lo contiene, no como parte del mismo sitio.
Cuándo ayuda incrustar y cuándo perjudica
Incrustar ahorra una petición, lo que importa para unos pocos recursos diminutos, como un indicador de carga o un favicon en una demo de un solo archivo. Perjudica cuando el recurso es grande o se usa en muchas páginas, porque los bytes viajan con cada archivo HTML u hoja de estilos en lugar de cachearse una vez.
Una regla razonable: incrusta lo que pese menos de unos pocos kilobytes y aparezca una sola vez, y enlaza todo lo demás como un archivo normal.
¿Base64 o codificación por porcentaje?
Los archivos binarios como PNG, JPEG y las fuentes necesitan base64. Los formatos de texto, sobre todo SVG, pueden usar codificación por porcentaje: solo hay que escapar caracteres como #, %, < y > y los espacios, así que el resultado suele ser más corto y sigue siendo legible.
El codificador de abajo muestra ambas longitudes una junto a otra para que elijas la más pequeña para tu contenido.
Errores habituales
Una errata en el base64, un salto de línea suelto o un tipo de medio incorrecto fallan sin avisar: la imagen simplemente no aparece. Pasa una cadena rota por el decodificador para ver dónde falla.
Otro despiste frecuente es olvidar la coma cuando no hay tipo de medio. data:,Hello es válida; data:Hello no es una data URL utilizable.
Data URLs en código real
Fondo SVG en CSS, codificado por porcentaje
Las comillas simples dentro del SVG evitan chocar con las comillas dobles de url(), y el # del color se escribe como %23.
Una imagen incrustada diminuta
La misma idea funciona en una etiqueta img. Mantén el texto alt, como en cualquier imagen.
Crear una data URL a partir de un archivo en JavaScript
FileReader.readAsDataURL produce la cadena data: completa, con el tipo de medio incluido, para un archivo que elige el visitante.
Convertir una data URL de nuevo en un Blob
fetch entiende las URL data:, que es la forma más corta de recuperar los bytes.
Codificador y decodificador de data URL
Contenido para codificar
Tipo de medio
Data URL en base64
Data URL codificada por porcentaje
Original {n} bytes, URL base64 {v} caracteres
URL codificada por porcentaje {v} caracteres
Renderizado en un marco aislado
Decodificar una data URL
Pega una data URL
Tipo de medio: {v}
Codificación: {v}
Tamaño decodificado: {n} bytes
Eso no parece una data URL válida. Necesita data:, un tipo opcional, una coma y los datos.