Esquema de URI de datos

El esquema data: URI definido en las normas IETF RFC 2397 en un esquema URI que permite la inclusión de pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa. Suelen ser mucho más simples que otros métodos de inclusión alternativos, como MIME con cid: o mid:. De acuerdo a la denominación en el RFC, los data: URI son, de hecho, URL.

Los URIs data: están soportados actualmente por:

Gecko y sus derivados, como Firefox
Opera
KHTML y sus derivados, Safari, Konqueror, Google Chrome

Microsoft Internet Explorer, en su versión 7, no soporta los data: URIs como fuentes HTML, por lo que algo como about:<b>bold</b> en esas versiones es aproximadamente equivalente a data:text/html,<b>bold</b> en navegadores que soportan los data: URIs

Ventajas

Las cabeceras HTTP no son requeridas para los datos empotrados, por lo que <language = en><descrption>data:</descrption> URIs pueden usar menos recursos de la red que la sobrecarga de la codificación del contenido en línea ya que un data: URI es más pequeño que las cabeceras HTTP que de otro modo serían necesarias.
Los navegadores están típicamente configurados para usar un máximo de cuatro conexiones simultáneas a un servidor, por lo que los datos en línea liberan una conexión de descarga para otros contenidos.
Los navegadores gestionan menos entradas de cache para un fichero que contiene data: URIs.
Los entornos con un acceso limitado o restringido a los recursos externos pueden empotrar contenido cuando no se permite o no es práctico hacer referencias externas. Por ejemplo, un campo avanzado de edición de HTML podría aceptar una imagen pegada o insertada y convertirla en un data: URI para ocultar la complejidad de las fuentes externas al usuario.

Desventajas

El contenido empotrado debe ser extraído y decodificado antes de realizarse cambios, y después debe ser recodificado y reempotrado.
Los data: URIs codificados en Base64 son aproximadamente un 33% más grandes que sus equivalentes binarias.
Las URL codificadas como data: URIs pueden ser hasta un 200% más grandes (en casos extremos) que el contenido del texto original.
La información que es empotrada más de una vez es descargada para cada referencia como parte del fichero contenedor, y por lo tanto no se beneficia del caché del navegador.
La capacidad máxima del navegador en la longitud del URI limita el tamaño máximo de los datos. Por ejemplo, los URIs en Opera suelen tener un límite de 4KB.
Los datos son incluidos como flujos simples, y muchos entornos de procesamiento (como los navegadores web) pueden no soportar dichos contenedores (como multipart/alternative o message/rfc822) para proveer una complejidad mayor como metadatos, compresión de datos o negociación de contenidos.

Ejemplos

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg" alt="Red dot" />https://web.archive.org/web/20091202110526/http://es.yahoo.com/more.html

CSS

Una regla CSS que incluye una imagen de fondo (de nuevo, se añaden retornos de carro por claridad):

ul.checklist > li.complete { margin-left: 20px; background:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
    ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
    Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat; }

JavaScript

Una sentencia JavaScript que abre una subventana empotrada, como un enlace de pie de página:

window.open('data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-'+
  '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en'+
  '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea'+
  'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E'+
  '%0D%0A','_blank','height=300,width=400');

Véase también

Una alternativa para incluir recursos en un documento HTML es MIME HTML, usualmente encontrado en los mensajes de correo HTML.
MIME para los tipos de fichero usados

Enlaces externos

Datos: Q976554