He traducido el artículo de Nicholas C. Zakas sobre URIs de datos por su interés.

Explicando las URIs de datos

Uno de las peticiones más frecuentes para características de los navegadores es el soporte de URIs de datos. Ha habido bastante literatura últimamente sobre URIs de datos: mi colega Stoyan Stefanov ha escrito un par de artículos sobre ellos, y mi ex colega Hedger Wang también escribió otro acerca de cómo utilizar URIs de datos en IE. Sorprendentemente, todavía hay un montón de malentendidos y confusión sobre las URIs de datos, qué son, cómo funcionan, y por qué querrías usar una.

URI, no URL

URL es la abreviatura de Uniform Resource Locator, que es una combinación de protocolo (cómo recuperar los datos) y la dirección donde se puede encontrar un recurso determinado. Todos los recursos públicos accesibles, como una imagen, un archivo JavaScript, archivo HTML, o una hoja de estilo CSS, tienen una dirección URL que indica al navegador desde donde descargar el archivo. Entonces el navegador establece una conexión y empieza a descargar y / o ejecutar el archivo. Cada URL también es una URI, que es la abreviatura de uniform resource identifier. Una URI indica un protocolo para recuperar información, así como información adicional sobre el recurso. Esa información adicional puede ser una dirección (si lo es, entonces la URI es una dirección URL) o no serla, pero siempre está relacionada con el protocolo especificado. Por lo tanto, las URIs de datos no son direcciones URL, ya que no contienen información de dirección.

Formato de URI de datos

El formato de datos URI es bastante simple y se explica en el RFC 2397 (que en realidad es lo suficientemente corto para que se puede leer todo). El formato básico es el siguiente:

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

En este formato, data: es el protocolo de la URI, que indica que ésta es una URI de datos. La segunda parte, el tipo MIME, indica el tipo de datos que se representa. Para imágenes PNG, por ejemplo, éste sería image/png. Cuando no se especifican, el valor predeterminado para el tipo MIME es text/plain. El conjunto de caracteres generalmente puede ser omitido sin problemas y no se utiliza para imágenes. La próxima sección indica la codificación utilizada. Contrariamente a la creencia popular, no se está obligado a usar la codificación Base 64. Si el contenido no está codificado en base 64, los datos se codifican mediante la norma de codificación de URLs (caracteres ASCII seguros para URLs representados directamente y todos los demás representados como una codificación hexadecimal en formato %xx). Los datos codificados pueden contener espacios en blanco, el cuál no se considera significativo.

Base 64

Base 64 es un sistema de codificación mediante el cual los datos se convierten en bits y luego se agrupan numéricamente en un conjunto de dígitos en base 64. Los dígitos de Base 64 incluyen de la A a la Z, mayúsculas y minúsculas, los números y los símbolos más (+) y barra (/). El signo igual (=) se utiliza para indicar que se ha producido relleno (por favor lee el artículo de Wikipedia para más información sobre esto). Todo lo que realmente necesitas entender es que la codificación en base 64 hace que los datos codificados sean mucho más pequeños. He aquí un ejemplo de una imagen GIF como una URI de datos codificados en base 64 (via):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge
8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h
LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g
77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

La misma imagen puede ser representada sin la codificación de base 64 de la siguiente forma:

data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85
%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE
%CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00
%00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08
%13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C
%A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80
%80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84
%02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D
%BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7
%AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07
%02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03
%AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B

El claro ganador en tamaño es la versión codificada en base 64 de la imagen, que es significativamente menor. Nota: La codificación en Base-64 hace que las imágenes sean más grandes en realidad. Sin embargo, si estás utilizando compresión HTTP, probablemente no notarás la diferencia, porque los datos codificados en base 64 comprimen muy bien. Si por alguna razón no puedes usar la compresión HTTP, puede que desees comprobar la cantidad de bytes que estás enviando para determinar si el compromiso vale la pena.

No sólo para imágenes

Aunque la mayoría de la gente habla de URIs de datos como la forma de incluir imágenes dentro de un archivo HTML o CSS, no hay nada aquí que lo haga específico para imágenes. Puedes codificar e incorporar cualquier tipo de archivo, incluso HTML mismo. Ian Hickson, conocido por HTML 5, tiene una herramienta que te permite jugar con URIs de datos. El ejemplo por defecto es un archivo HTML que puede convertirse en una URI de datos ya sea con o sin codificación en Base 64. Jugando con este generador de datos URI un rato realmente ayuda a solidificar los conceptos básicos. Nota: Internet Explorer 8 tiene restricciones de seguridad sobre las URIs de datos que las hacen menos útiles para datos que no sean imágenes.

Implicaciones de rendimiento

La parte más interesante de la historia sobre URIs de datos es que te da la capacidad de insertar archivos dentro de otros archivos. La mayoría de artículos se centran en incorporar URIs de datos en archivos CSS como una forma de mejorar el rendimiento. De hecho, ha habido una gran cantidad de investigaciones que indican que las peticiones HTTP son uno de los principales agujeros de rendimiento para sitios web, y la disminución del número de solicitudes resulta en un mejor rendimiento de página. "Minimizar las peticiones HTTP" es en realidad la primera regla de las "mejores prácticas para un rendimiento excepcional" de Yahoo!, y se mencionan específicamente las URIs de datos:

Las imágenes en línea usan el esquema de URIs data: para integrar los datos de imagen en la página. Esto puede aumentar el tamaño de tu documento HTML. La combinación de imágenes en línea en tus hojas de estilo (en caché) es una manera de reducir las peticiones HTTP y evitar el aumento del tamaño de tus páginas. las imágenes en línea no son todavía compatibles con todos los principales navegadores.

Este es un buen consejo para el uso de URIs de datos: úsalos donde se almacenen en caché con más frecuencia. Las imágenes regulares descargadas se almacenan en caché a través de HTTP de acuerdo con sus cabeceras y / o con la configuración específica del navegador de modo que no será necesario volver a descargarlas cada vez. Las URIs de datos se consideran parte del archivo que los contiene, por lo que son parte del código HTML o CSS archivo en el que están insertadas. Esto significa que las URIs de datos no tienen una política independiente de control de la caché. Incrustar URIs de datos en los archivos los hace más grandes, y si el archivo cambia con frecuencia (como la página principal de un blog), entonces ese archivo más grande debe ser descargado con frecuencia. Eso ralentiza tu sitio. La forma más fácil de usar URIs de datos es incrustarlos en hojas de estilos externas que se almacenan sistemáticamente en caché. De esta manera, la experiencia con el caché vacío es más rápida (debido a las se generan menos peticiones) y la experiencia con el caché cargado es la misma.

Soporte en navegadores

La mayoría de los navegadores actuales son compatibles con las URIs de datos:

• Firefox 2+
• Opera 7.2+ - las URIs de datos no deben ser superior a 4.100 caracteres
• Chrome (todas las versiones)
• Safari (todas las versiones)
• Internet Explorer 8+ - Las URIs de datos deben ser menores de 32k

Puesto que las URIs de datos no están soportadas en Internet Explorer anteriores a la versión 8, necesitas decidir si vale la pena servir contenido alternativo para esos navegadores (Leer post Stoyan).

Conclusión

Las URIs de datos son un concepto interesante y único en la Web, y es probable que obtengan una mayor cobertura en el futuro. Por el momento, parece que se adaptan mejor a las tareas relacionadas con el rendimiento, pero quién sabe qué nos deparará el futuro. En el corto plazo, puedes ver algunos ahorros en rendimiento mediante la utilización de las URIs de datos para eliminar solicitudes HTTP adicionales de descarga de imágenes. Las URIs de datos también abren la posibilidad de generar imágenes dinámicamente usando JavaScript, aunque el creciente soporte a <canvas> puede hacer que este caso de uso quede obsoleto.