Este artículo fue creado por Carlos Cámara para el blog Gnumla.comel 27 de Marzo de 2013 y se republica aquí porque su contenido aun tiene vigencia y puede resultar útil.

Optimiza tu sitio con CSS sprites

Tener muchas imágenes e iconos en nuestro sitio pueden hacerlo más lento. Con la técnica de CSS sprites podremos optimizar la velocidad de carga disminuyendo el tráfico.

Aunque habitualmente el "divide y vencerás" es una técnica que funciona, en lo que respecta a la velocidad de nuestro sitio web, no siempre es así. Concretamente si nuestro sitio tiene muchos elementos gráficos como iconos o imágenes, lo habitual es que cada uno de estos elementos se corresponda con un fichero. Esto hace que nuestro navegador tenga que hacer una petición para cada uno de estos iconos y hace que nuestro sitio sea tremendamente ineficiente.

La técnica de CSS Sprites consiste en agrupar todas estas imágenes o iconos de nuestro sitio en un único fichero de imagen para después, mediante CSS, mostrar sólo la imagen concreta que nos interese del fichero. De esta forma el navegador tan sólo tendrá que descargarse una única imagen.

Para conseguir esto, tendremos que jugar adecuadamente con la clases y los identificadores CSS. En primer lugar tendremos que tener una clase padre en la que indiquemos la imagen de fondo que contiene todos los iconos a mostrar:

#nav li span {
  background-image: url("<a href="http://css-tricks.com/wp-content/csstricks-uploads/1454282699-lhn-sprite.png">http://css-tricks.com/wp-content/csstricks-uploads/1454282699-lhn-sprite.png</a>");
}

#nav li span {
  background-image: url("/http://css-tricks.com/wp-content/csstricks-uploads/1454282699-lhn-sprite.png");
}

Una vez hecho esto tan sólo nos queda crear una regla CSS para cada elemento que tenga un icono y al que le asignaremos un identificador único HTML o una clase que indique la posición del icono que queremos mostrar:

#nav li span.reader {
  background-position: 0 0;
  padding-left: 16px;
}

#nav li span.reader {
  background-position: 0 0;
  padding-left: 16px;
}

De esta forma tendremos una clase que contendrá el fichero de imagen con todos los iconos como imagen de fondo y un identificador que definirá qué porción de esta imagen de fondo a mostrar.

Podéis ver el resultado en este ejemplo del W3C School:

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

¿Para qué partes de tu sitio se te ocurre que puedes usar esta técnica?

Referencias

Tutorial con comparativa de tiempos de carga usando CSS sprites y sin usarlo (inglés)

Herramienta para la generación sprites CSS a partir de varios ficheros de imagen

http://www.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/

La deliciosa fotografía que encabeza este artículo es obra de 10acious en deviantArt.