la cosa

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 oimá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 sitiosea 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 laimagen 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 losidentificadores 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("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 asignaremosun 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;
}
De esta forma tendremosuna 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 esteejemplo 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...