Tutorial de uso de Data:URLs

Desde que escribí el tutorial básico de CSS Sprite fui aprendiendo que optimizar un sitio web tiene más de maña y voluntad que de dificultad. La relación es bien simple, a más conocimientos sobre la utilización de las técnicas apropiadas, más fácil se resuelven los posibles problemas de rendimiento.

Las CSS Sprites es una técnica que están ampliamente difundida en internet, no obstante, para muchos desarrolladores esta técnica será reemplazada en un futuro por la inserción de imágenes directamente en el código, sin necesidad de hacer llamadas externas, y es justamente lo que vamos a charlar y aprender a utilizar en esta entrada.

Comencemos. El esquema de datos data: URI esta definido en las normas del grupo de trabajo en ingeniería de Internet RFC 2397 y permiten embeber directamente en la misma línea de datos pequeños elementos, es decir, como si estuviésemos colocando una ruta externa.

La sintaxis es la siguiente:

data:[<mediatype>][;base64],<data>

En el caso que nos compete, es decir, la inserción directa de imágenes en nuestro sitio web, especialmente desde las hojas de estilo la forma de lograr este objetivo seria la siguiente:

1. Codificación de la imagen en base64. Para eso simplemente hacemos una llamada a la función PHP base64_encode combinada con file_get_contents de la siguiente forma:

<?php echo base64_encode(file_get_contents("smile.png")) ?>

El resultado del ejemplo será una imagen (cursos.png) codificada en base64, es decir una serie de caracteres que visualmente asustan 😛

2. Definir el mediatype y confirmar la codificación utilizada. Para ejemplificar eso vamos a insertar la imágen del ejemplo anterior.

<img src="data:image/png;base64,<?php
echo base64_encode(file_get_contents("smile.png")) ?>" alt="smile" />

Y listo, notar que utilice la función solo para evitar tener que copiar y pegar la imagen codificada, pero para fines prácticos pueden ver un ejemplo en linea, les recomiendo que miren directamente el código fuente para ver como la imagen es colocada en una sola linea y sin hacer llamadas externas.

¿Compatibilidad con navegadores?

Los navegadores que soportan perfectamente el uso de data: url son:

• Firefox
• Opera 7.2 o superior
• Safari
• Netscape
• IE 8 comienza a dar soporte.

Lamentablemente Internet Explorer 5-7 no dan soporte.

Ventajas de la utilización de la técnica Data:URLs

Evitamos hacer solicitudes HTTP, por consiguiente vamos a ahorrar recursos. Y esto a diferencia de los CSS Sprite es una ventaja porque realmente no hacemos siquiera una llamada, algo que impresiona porque es llevar al extremo el ahorro de recursos.

Desventajas

• La representación en base64 de una imagen es más pesada en términos de bytes con respecto a la imagen en binario. En Website Optimization calcularon que las imágenes son entre un 39-45% más pesadas.
• Existe una limitación de la longitud según la RFC que varia según el navegador utilizado. Por norma estamos hablando de 1024 bytes, aunque en este aspecto los navegadores son mas permisivos, por ejemplo Firefox (que es un buen amigo del programador) soporta data urls de 100K 😀
• Es algo incomodo del punto de vista de la actualización, cada vez que modifiquemos algo vamos a tener que re-codificarlo, un trabajo simple pero aburrido si se tiene muchas imágenes.

Conclusión

La utilización del esquema de data:urls debería ser moderada y con muchísima precaución, en mi opinión nunca van a reemplazar a los CSS Sprite por cuestiones de comodidad, y aunque pueda automatizarse el proceso de codificación esto también conlleva un consumo de recursos.

No obstante puede ser muy buena idea su utilización combinada con CSS Sprite. O bien en sitios que no tienen prácticamente imágenes más allá de alguna utilizada para estilizar una lista, o similar.