Tutorial básico sobre CSS Sprite

La primera vez en mi vida que escuche hablar sobre las CSS Sprite fue hace casi 5 años cuando Dave Shea escribió un interesante articulo en Alistapart, desde ese momento siempre quise hacer una serie de simples pruebas para publicar en este blog mostrando las ventajas de utilizar esta practica, además de mostrar lo sencillo que es aplicarla.

¿Que son los CSS Sprites?

Simplemente se trata de una antigua técnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma individual.

¿No se entiendo muy bien? No hay problema, vamos con una empresa que seguramente conoces y que los utiliza desde hace mucho  tiempo, Google. Si realizas cualquier búsqueda en Google veras que se muestran varias imágenes, por ejemplo en la paginación de resultados, lo que muchos no se dan cuenta es que detrás de todas estas imágenes se encuentra SOLO UN ARCHIVO y no un archivo por imagen.

Esto acelera significativamente la descarga, y todos sabemos lo rápido que es Google 😀

En la imagen remarco al menos dos imágenes para que vean donde se ubican en el archivo.

¿Y las ventajas?

La utilización de la técnica de los CSS Sprites tiene principalmente dos ventajas: por un lado tendremos más velocidad en la descarga y renderizado de nuestro sitio web por parte de los navegadores y por otro lado tendremos una significativa reducción de consumo de recursos del servidor.

Dos claras ventajas y que son mas que suficientes para que amerite aprender un poquito mas sobre esta técnica.

Me convenciste, ¿Como empezamos?

Empecemos con un ejemplo practico. Al final de este articulo podrán ver una lista de enlaces para enviar este post a los distintos sitios sociales, antes de hacer este articulo estaba cargando una imagen distinta por cada enlace, de la siguiente forma.

Y el código HTML que  no cambiara en ninguno de los dos casos y que se podía hacer con listas 😛

[HTML]

[/HTML]

Utilizando Firebug a continuación muestro lo que ocurría y como se desempeñaba ese código al ser descargado en el navegador.

Como podrán ver en los resultados cada imagen realiza una nueva petición al servidor, por lo que mostrar ese bloque de enlaces termina siendo un pedido de ni más ni menos que 5 solicitudes al server.

Ahora utilizando la técnica de los CSS Sprites

Lo primero que necesitamos es generar un único archivo que contenga las 5 imágenes, en este caso los iconos sociales, y aunque lo podemos hacer de forma manual yo para estos casos lo que recomiendo es utilizar el sitio csssprites que por un lado nos pide que subamos las imágenes y por otro lado nos genera la imagen resultado junto con el código CSS necesario para mostrarlas de forma individual. En mi caso el archivo que me genero es el siguiente.

En mi caso elegí PNG pero el sitio además de esta extensión también nos permite descargar el archivo en formato GIF. En la imagen se puede ver que todas las imágenes quedan con cierto orden, esto esta diseñado principalmente para que luego su posicionamiento con la propiedad background-position sea mas simple.

Ahora solo falta colocar el nuevo CSS, el código HTML es idéntico y no tiene absolutamente ninguna diferencia con el anterior que no utilizaba los sprites.

[CSS]
#social a, #social a:hover { padding: 2px 2px 2px 25px; margin-left:15px; background: #fff url(‘images/sprite-social.png’) no-repeat}
.twitter {background-position: -9px -153px !important;}
.facebook {background-position: -9px -45px !important;}
.meneame {background-position: -9px -81px !important;}
.delicious {background-position: -9px -9px !important;}
.stumbleupon {background-position: -9px -117px !important;}
[/CSS]

En el código CSS esta todo el asunto, al utilizar una sola  imagen lo único que tenemos que hacer es ir jugando con la posición de fondo para mostrar cada imagen de forma individual. Es bastante fácil de aplicar, quizás comprenderlo lleva un poquito de mas tiempo al principio pero cuando lo hagan la primera vez entenderán de inmediato como funciona.

Ahora lo mejor los resultados de Firebug con la versión que utiliza los sprites.

Una sola petición al servidor y menos de la mitad del tiempo. Vale la pena utilizar esta técnica 😀

Obviamente en mi caso solo hice esto con solo una parte del diseño del blog, pero se puede hacer algo mucho mas avanzado, hay casos como el de Google que todo el esquema de un sitio puede estar prácticamente en una sola imagen. Las posibilidades son casi infinitas, me gusto mucho por ejemplo los botones con rollover que hizo Manz.