El data URL scheme

Siguiendo el mismo sistema que los CSS Sprites, podemos plantearnos que también son algo inefectivos en aquellos casos en los que estos pequeños iconos se utilicen de forma muy concreta. En esos momentos casi se puede considerar que incluir la imagen directamente en el código fuente del HTML sería más rápido.

El caso del data: URL scheme (RFC 2397) viene a resolver esta situación, y es que en 1998 ya se planteó este estándar que no cumplen todos los navegadores, por lo que deberemos probar en cada caso.

La idea es incluir en el propio código el elemento en sí, codificado en Base64 que hará que no tengamos que realizar peticiones externas, sino que va incorporado en el propio código fuente, ya sea del HTML como del CSS.

El funcionamiento de este elemento sería algo tal que así:

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

El primero de los elementos <mediatype> corresponde con el MIME Type del contenido a mostrar (por ejemplo, un image/png). Al final, en codificación Base64 irá el contenido. Quedaría algo parecido a esto:

<img src=”data:image/png;base64, iVw0SUhE...bP7WlFSCC” alt=”logo”>

Lo interesante es que se puede utilizar dentro de los CSS, por lo que las imágenes pasarían a formar parte de un CSS de un tamaño mayor y reduciendo la cantidad de peticiones.