En este post vamos a ver un pequeño ejemplo de como utilizar css sprites de forma efectiva.
Para ello, primero vamos a utilizar algunas imágenes del pack de íconos gratis disponible en este . Una vez bajados, creamos la siguiente página en html (los íconos de social media del pack van a ser copiados a la carpeta images de nuestro proyecto para este ejemplo).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo sin sriptes</title>
</head>
<body>
<img src="images/social_digg.png" alt="digg" />
<img src="images/social_facebook.png" alt="facebook" />
<img src="images/social_google.png" alt="google" />
<img src="images/social_skype.png" alt="skype" />
<img src="images/social_linked_in.png" alt="linkedin" />
<img src="images/social_twitter.png" alt="twitter" />
</body>
</html>
Esa sería nuestra página común y corriente, en donde cada imagen tiene su correspondiente archivo.
El paso siguente es dirigirnos ay seleccionar los archivos que queremos juntar ( en nuestro caso serán: social_digg.png, social_facebook.png, social_google.png, social_skype.png, social_linked_in.png y social_twitter.png).
una vez seleccionadas todas las imágenes de nuestro sprite, generamos el archivo resultado con su css correspondiente haciendo click en el botón Generate!
Ya estamos en condiciones de crear nuestra página utilizando sprites. Para ello baja el archivo png generado en el paso anterior y cópialo en la carpeta images del proyecto. El código de nuestra página utilizando css sprites será el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo con sriptes</title>
<style>
.social {
background-image: url(images/result.png);
width: 48px;
height: 48px;
}
/*es importante escribir los nombres sin espacios .social .digg no funciona*/
.social.digg {background-position: 0px 0px;}
.social.facebook {background-position: 0px -58px;}
.social.google {background-position: 0px -116px;}
.social.skype {background-position: 0px -174px;}
.social.linkedin {background-position: 0px -232px;}
.social.twitter {background-position: 0px -290px;}
</style>
</head>
<body>
<img src="images/blank.gif" class="social digg" alt="digg" />
<img src="images/blank.gif" class="social facebook" alt="facebook" />
<img src="images/blank.gif" class="social google" alt="google" />
<img src="images/blank.gif" class="social skype" alt="skype" />
<img src="images/blank.gif" class="social linkedin" alt="linkedin" />
<img src="images/blank.gif" class="social twitter" alt="twitter" />
</body>
</html>
Como se puede apreciar, lo que estamos haciendo es poner una imagen en blanco y reemplazarla mediante el atributo class. El css que nosotros deberemos generar consta de dos partes:
1- El contenedor de la imagen (en nuestro caso es .social): tiene como atributos el background-image que descargamos y al ancho y alto de cada imagen, en nuestro caso eran íconos de 48px * 48px, pero pueden ser de cualquier tamaño e inclusive pueden ser imágenes de distintos tamaños con distintos altos y anchos.
2- Cada clase particular: comenzará con el nombre del contenedor (.social) y debería seguir con un nombre que sea representativo para nosotros (en este caso se utilizó el nombre de la red social a la cual representan). Las posiciones background-position fueron generadas por css sprites, por lo que debes copiarlas y pegarlas en tu estilo css.
Como se puede apreciar, ahora para generar nuestra página web solo necesitamos bajar blank.gif y result.png. En el caso anterior fueron 6 archivos pero podrían haber sido 20 que agrupamos en uno solo. Las ventajas evidentes de usar esta técnica es que reducimos las llamadas al servidor y también creamos un archivo que es de menor tamaño que la suma de los archivos que fueron utlizados para generarlos (menos llamadas y menos ancho de banda utilizados).
Si todavía quieres optimizarlo un poco más deberías hacer lo siguiente:
1- Sacar el estilo a un archivo css externo (estos archivos se guardan en el caché del navegador, por lo cual si un usuario entra varias veces la velocidad será mayor)
2- Transformar la imagen a un formato jpg. Hay que tener cuidado con este paso, sobre todo si se utilizan transparencias ya que jpg no es apto para guardar transparencias (png y gif si lo son). La reducción de tamaño suele ser notable, en este caso pasó de 18,9KB a 7,2KB.
El código luciría de la siguiente forma
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo con sriptes mejorado</title>
<link href="estilos.css" rel="stylesheet" />
</head>
<body>
<img src="images/blank.gif" class="social digg" alt="digg" />
<img src="images/blank.gif" class="social facebook" alt="facebook" />
<img src="images/blank.gif" class="social google" alt="google" />
<img src="images/blank.gif" class="social skype" alt="skype" />
<img src="images/blank.gif" class="social linkedin" alt="linkedin" />
<img src="images/blank.gif" class="social twitter" alt="twitter" />
</body>
</html>
y el archivo estilo.css sería la copia de lo que había dentro de la etiqueta
.social {
background-image: url(images/result.jpg);
width: 48px;
height: 48px;
}
.social.digg {background-position: 0px 0px;}
.social.facebook {background-position: 0px -58px;}
.social.google {background-position: 0px -116px;}
.social.skype {background-position: 0px -174px;}
.social.linkedin {background-position: 0px -232px;}
.social.twitter {background-position: 0px -290px;}
Se puede ver los ejemplos funcionando en el siguiente