Explicando: CSS Sprites.

La primera vez que vi un sprite en una pagina web, fue cuando instale un tema para wordpress (bastante famoso en su dia) y @Nakp me dijo por msn.. "mira.. usa un sprite". Para entonces yo tenia cara de WTF y no entendí ni leche.. pensaba que era una imagen maligna "parseada" con javascript o php bruto (a lo fopen). Después de revivir recuerdos nos ponemos manos a la obra :P

Que es un sprite

.
Sprite -en español duende o hada- son varias imágenes unidas (como un mapa de bits) en una. A lo barrio sesamo diríamos que tenemos 3 imágenes que hemos decidido unir en 1. Como si de un collage (de esos que cuelgan en el tuenti) se tratase.

No tiene gran secreto ni nada de magia maligna. Últimamente se ha vuelto bastante popular el utilizar sprites en el ámbito web a pesar de que existen desde hace mucho tiempo sobre todo en los vídeo juegos clásicos.

Para que sirven

Básicamente, para ahorrar recursos. Si es cierto que si unimos las imágenes en una esta pesara más pero, no suele pesar mas que todas juntas. También sirve para hacer menos requests (consultas) al servidor y por tanto cargarlo menos. Mas aun, cuando se cargue un sprite por ejemplo con 2 imágenes que se "cambian" cuando pasas el ratón por encima, no tendrás que volver a enviar la consulta y cargar una imagen nueva (bastante útil para librarse del efecto "vació" que se produce durante la espera)

Por ejemplo, tenemos esta imagen:


Si las "separamos", las 3 en total pesarían unos 13kb. Esta (todas en una) pesa unos 8kb.

Donde se usan

Se suelen utilizar para casi todo hoy. El mayor uso que se le da es el de unir los estados de un botón, emoticonos y en general para cualquier cosa no requiera repetición. A lo que llegamos a las "desventajas".

Desventajas

Sorprendentemente, la compatibilidad no es una desventaja mayor (incluso para IE). Pues, el soporte cae en la mayoría de los navegadores incluido IE6.

La principal desventaja de los sprites es que no puedes crear una repetición con ellos. Mediante algunos "hacks" quizás es posible llegar a repetir una parte de un sprite pero solo horizontal/verticalmente.

Otra desventaja es el tamaño (alto y ancho). Si es posible mediante background-size cambiar el tamaño de una parte especifica, pero su soporte no esta tan expandido como el del propio sprite. El soporte de background-size en IE empieza desde la version 9, en Firefox desde la 4 (3.6 con -moz-) y en Safari desde la 5 (en las anteriores es parcial). Chrome trae soporte desde la 4.

Hora de practicas

Bien, vamos a coger la imagen de arriba, y convertirla en un div con varios estados. Normal, cursor por encima (hover) y al clickear sobre el (active).

Para empezar vamos a crear un div y vamos a decirle que use la imagen entera de background.

<style type="text/css">
   .sprite {
      background:url(sprite.png) no-repeat;
      /* Es importante que el alto y el ancho, sean los mismos
         que los del elemento del sprite a cual apuntaremos. */
      width:107px;
      height:100px;
      /* Vamos a utilizar background-position para darle la
         posición inicial que sera el estado normal del elemento (x y) */
      background-position:-0px -0px;
   }
</style>
<div class="sprite"></div>

No es tan difícil verdad? Tenemos que definir el width y heigh que tendrá el div y que serán los mismos que tiene el elemento a cual recogemos del "sprite". Y luego le damos la posición que es donde empieza el elemento dentro del sprite.

Bien, ahora vamos a darle los otros dos estados (hover y active).

.sprite:hover {background-position:-108px -0px; cursor:pointer;}
.sprite:active {background-position:-216px -0px; cursor:pointer;}

Por supuesto, el sprite también puede ser vertical en lo cual se aplicaría la misma técnica.

css sprites (demo)

Aquí el demo final, pasa el ratón por encima y haz click para ver los cambios.

Saludos