¿Qué es un CSS Sprites?
Es una técnica con la que agrupamos todas (o lo que consideremos) nuestras imágenes en un solo archivo de mayor tamaño que incluye a todas las imágenes, para luego «separarlas» mediante CSS. De esta forma reducimos el numero de peticiones y hacemos nuestro sitio mucho mas ligero. Si tenemos 45 iconos a mostrar, estos serán 45 peticiones, pero una vez utilizada la técnica CSS Sprites, estaremos logrando una solo petición.
Ventaja
Además de la ya comentada ventaja de no tener que hacer tantas peticiones al servidor será más fácil tener organizados nuestros iconos en un sólo archivo por temática o utilidades (redes sociales, iconos de reproducción, enlaces…). Y por otra parte es otra manera de tener precargadas nuestras imágenes, por lo que si vamos a realizar un rollover no vamos a tener un efecto raro la primera vez que cargue (evitamos el retardo por la carga).
Principal problema
Esta técnica puede resultar un tanto tediosa para los Amateurs, ya que tenemos que crear un nuevo archivo, colocar todas nuestras imágenes y comenzar a tomar medidas para luego en nuestra hoja de estilo separar cada imagen mediante background-position, lo cual si son 45 imágenes tendremos que definir 45 posiciones en nuestra hoja de estilo, algo molesto.
Atajo
Existen en la red una cantidad importante de generadores de CSS Sprites que realizan el trabajo por nosotros, como pueden ser el Project Fondue o CSS Sprites generator. El principal problema de usar este tipo de servicios es que no tenemos mucho control total sobre el Sprite generado. Pero es una buena forma de comenzar.
Yo personalmente uso un Script para Photoshop que nos permite realizar CSS Sprites sencillos, este Script es AtlasCSS. Una vez instalado el Script generara el Sprite por nosotros junto con el CSS necesario, pero de esto os hablaré en otro post.
Uso
Para este ejemplo he elegido un conjunto de iconos de redes sociales que podéis descargar:
[wpdm_file id=4]
De todos estos icono he elegido 14 con sus correspondiente rollover para hacer el ejemplo y tras ejecutar el Script de Photoshop con los icono he generado el siguiente PNG con todos ellos:
Y el CSS resultante es:
.black%20social%20apple%20icon { background-position: -0px -0px; height: 24px; width: 24px; }
.black%20social%20blogger%20icon { background-position: -0px -24px; height: 24px; width: 24px; }
.black%20social%20facebook { background-position: -0px -48px; height: 24px; width: 24px; }
.black%20social%20flickr { background-position: -0px -72px; height: 24px; width: 24px; }
.black%20social%20google { background-position: -24px -0px; height: 24px; width: 24px; }
.black%20social%20googleplus { background-position: -24px -24px; height: 24px; width: 24px; }
.black%20social%20linkedin { background-position: -24px -48px; height: 24px; width: 24px; }
.black%20social%20myspace { background-position: -24px -72px; height: 24px; width: 24px; }
.black%20social%20rss { background-position: -48px -0px; height: 24px; width: 24px; }
.black%20social%20skype { background-position: -48px -24px; height: 24px; width: 24px; }
.black%20social%20twitter { background-position: -48px -48px; height: 24px; width: 24px; }
.black%20social%20vimeo { background-position: -48px -72px; height: 24px; width: 24px; }
.black%20social%20yahoo { background-position: -72px -0px; height: 24px; width: 24px; }
.black%20social%20youtube { background-position: -96px -0px; height: 24px; width: 24px; }
.blue%20social%20apple%20icon { background-position: -120px -0px; height: 24px; width: 24px; }
.blue%20social%20blogger%20icon { background-position: -144px -0px; height: 24px; width: 24px; }
.blue%20social%20facebook { background-position: -72px -24px; height: 24px; width: 24px; }
.blue%20social%20flickr { background-position: -72px -48px; height: 24px; width: 24px; }
.blue%20social%20google { background-position: -72px -72px; height: 24px; width: 24px; }
.blue%20social%20googleplus { background-position: -96px -24px; height: 24px; width: 24px; }
.blue%20social%20linkedin { background-position: -120px -24px; height: 24px; width: 24px; }
.blue%20social%20myspace { background-position: -144px -24px; height: 24px; width: 24px; }
.blue%20social%20rss { background-position: -96px -48px; height: 24px; width: 24px; }
.blue%20social%20skype { background-position: -96px -72px; height: 24px; width: 24px; }
.blue%20social%20twitter { background-position: -120px -48px; height: 24px; width: 24px; }
.blue%20social%20vimeo { background-position: -144px -48px; height: 24px; width: 24px; }
.blue%20social%20yahoo { background-position: -120px -72px; height: 24px; width: 24px; }
.blue%20social%20youtube { background-position: -144px -72px; height: 24px; width: 24px; }
Ahora subiendo la imagen y utilizando los class del CSS tengo todos los iconos necesarios en un sólo archivo (en una sola petición al servidor).
Si necesitáis más ayuda no dudéis en comentar !!