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, URLs.

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

Contenido 1 Ventajas 2 Desventajas 3 Ejemplos 3.1 HTML 3.2 CSS 3.3 JavaScript 4 Véase también 5 Enlaces externos

Ventajas

• Las cabeceras HTTP no son requeridas para los datos empotrados, por lo que data: 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

HTML

Un fragmento HTML empotrado en una imagen de un pequeño punto rojo:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg" alt="Red dot" />

Nota: como los URI, los data: URI deben ser formateables con espacios en blanco, pero hay problemas prácticos sobre cómo afecta esto a la codificación base64 [1]. Los autores deben evitar el uso de espacios en blanco para los data: URIs codificados en base64.

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

• RFC 2397
• The data: URI kitchen
• About data: URLs and the mozilla implementation
• data: URL tests