Incrustar imágenes en hojas de estilo

A pesar de que no es una técnica muy ampliamente utilizada, la capacidad de poder insertar imágenes directamente en una hoja de estilo es una alternativa que en ocasiones bien podría estar no solamente justificada, sino derechamente preferida por sobre la típica referencia mediante una URL

Aclaro de qué estoy hablando: cuando vamos a aplicar una imagen de fondo a algún elemento mediante CSS, generalmente lo hacemos de esta forma

.lorem-ipsum{
	background-image: url(http://servidor.com/ruta/a/imagen.jpg);
}

Al “incrustar” una imagen, lo haríamos de este modo:

.lorem-ipsum{ 
	background-image: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAVCAMAAABlsmI+A 
AAAA3NCSVQICAjb4U/gAAAAS1BMVEX////////29vbv7+/m5ubf39/W1tbMzMzExMS9vb61t 
bWtra2lpaWZmZmVlZWLi4uEhIR7e3tycnJra2tgYGBaWlpTU1NJSUlEREQYZf5IAAAAGXRST 
lMA////////////////////////////////MFNJ3QAAAAlwSFlzAAALEgAACxIB0t1+/AAAA 
BV0RVh0Q3JlYXRpb24gVGltZQA1LzEwLzA2n1SBaAAAABx0RVh0U29mdHdhcmUAQWRvYmUgR 
mlyZXdvcmtzIENTM5jWRgMAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZ 
Wdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEge 
G1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jM 
DM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjExOjQxICAgICAgICAiPgogICA8c 
mRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5b 
nRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgI 
CAgICB4bWxuczp4YXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgI 
CA8eGFwOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzM8L3hhcDpDcmVhdG9yVG9vb 
D4KICAgICAgICAgPHhhcDpDcmVhdGVEYXRlPjIwMDctMDktMDhUMjI6Mzg6MzhaPC94YXA6Q 
3JlYXRlRGF0ZT4KICAgICAgICAgPHhhcDpNb2RpZnlEYXRlPjIwMDctMDktMDhUMjI6NDg6M 
zRaPC94YXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZ 
GY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwO 
i8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ 
2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSR 
EY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgII5AjlkAAAEsSURBVFiF3 
ZfRDsIgDEVZKWV0sIGT2f//UgtG/QJj0vNCeOvJ5Wadc5NU6mmPWy3svqS97TnZg/PejvS23 
I6cKHh7YKCU6/a2ZPIAi0EAPPExPdc9BVyPu9z3+O+xfgCEtI93Wzggdxl0/vdQPwACFw2zE 
KxdGgdu0k3mSSW5LeFySMPR2CaHxYpiyi4TLF3S0IMk3aImkGoGWERw3lHE/3mkXwAhu00NN 
c151zQtai64OVbNKnU+Wj1tavLU5EvqCmuVB1vs5tBM2k0s1/xuPh43i2nqhuBiBD231qW3f 
F43g3FCXHU/QABAijFSoPNq5jwB1VLj9HPH9X7YGvT0MY7dPdKnkLrQn5cxTU/x9SemnsbUv 
sDH0jmKwaSoVjHEj+UQJUJ7EEV6+T0B4Yo20scg/HAAAAAASUVORK5CYII="); 
}

Probablemente éste sea el momento en el que muchos digan ¡¿qué?!… pues bien, el objetivo de esta técnica es insertar directamente toda la información de una imagen en la misma hoja de estilo.

¿Cómo incrustar una imagen en una hoja de estilo?

Si se fijan en el código anterior, hay cuatro partes fundamentales: en primer lugar, la referencia a la imagen parte como todas: url(, pero después de eso viene lo importante:

El tipo de URL no es http://, sino data:
En segundo lugar, debemos indicar el tipo de contenido o mime type, en este caso, image/png para una imagen en formato PNG
Tercero: cómo está codificada la información… claro, no se trata de abrir la imagen con el bloc de notas y pegar en binario… no, no, no. En este caso, se ha utilizado base64… la verdad es que no tengo ni idea si habrán otras codificaciones compatibles
Finalmente, la información de la imagen, codificada; para codificar un archivo en base64 pueden hacerlo a través de este codificador/decodificador Base64 Online. Como resultado, tendrán el mismo archivo que subieron pero representado de otra forma, pero codificado en [base64->@wiki]

¿Para qué incrutar una imagen en una hoja de estilo?

Como ponía al principio, esta no es una práctica muy generalizada, pero en ocasiones podría ser bastante recomendable, como cuando el acceso a las imágenes se podría ser limitado o sea necesario distribuir solamente un archivo auto-contenido —es el caso del tema para Google Reader desarrollado por Jon Hicks (de donde saqué la imagen del ejemplo), o algunos de los estilos de userstyles.org.

Otra posibilidad es que sea necesario reducir la cantidad de peticiones HTTP al servidor, o en situaciones en que el tamaño de las imágenes es tan reducido que la demora en hacer las peticiones podría efectivamente reducirse al incrustar las imágenes en el código.

Desventajas

A pesar de ser una buena alternativa en ciertas situaciones, este método tiene ciertas desventajas que debemos analizar antes de aplicarlo:

Nuestro navegador preferido, MSIE 6, no tiene soporte para url("data:… lógico, ¿acaso alguien esperaba otra cosa? Ante esto, una buena solución podría ser servir las imágenes en hojas de estilos separadas de la principal (lo que de todos modos siempre es una buena idea), y mediante comentarios condicionales determinar qué navegador recibe qué hoja, es decir:
1. Tener una hoja “normal” con todos tus estilos, menos los estilos que reemplazarás por imágenes incrustadas
2. Una hoja con las imágenes incrustadas, para Firefox, Opera, Safari, etc.
3. Una hoja con los estilos de las imágenes incrustadas referenciadas con el método tradicional background:url(ruta/imagen.jpg); para Explorer
El tamaño de las imágenes aumenta en alrededor de un tercio (multiplica el tamaño por 4/3)
A menos que combines y planees inteligentemente tus selectores, si utilizas una imagen más de una vez tendrías que declararla todas las veces que sea necesario… por eso es mejor ser inteligente y planificar 😛

Y para terminar… Dean Edwards afronta el problema de la falta de soporte para Base64 en Explorer en dos artículos que no está demás reseñar:

Y aclaro (antes que alguien me lo indique en los comentarios) que esta técnica en realidad parte en HTML, y todo a lo que me he referido como “incrustar imágenes” pueden encontrarlo en inglés buscando por data URL, como en Using Data URLs Effectively with Cascading Style Sheets.