Primero, ¿qué son los Sprites? Se trata de una gran imagen que contiene más imágenes pequeñas dentro. Los Sprites eran usados en los videojuegos antiguos de 2D, esos que tenían pocos colores, para tener cargados a sus personajes y mediante sus algoritmos de programación se movían dentro de esta gran imagen y daba como resultado el personaje moviéndose, corriendo, etc. Este es un ejemplo de sprites del famosísimo juego Mario Bros:

CSS Sprites

La imagen:

Esta es la parte más importante, es lo que nos dará esa precarga de imágenes que queremos. Volviendo al concepto de Sprites, lo que nos quiere decir es que en una imagen se tienen todas las imágenes que se usarán, para este caso, en una sola imagen tendré todos los estados del menú, el estado normal, el sobre o rollover, y el activo.

CSS Sprites

La imagen real tiene una dimensión de 702px de alto x 108px de alto y pesa 9.21KB, la primera sección es el estado normal, la del medio es el rollover y el último es el estado activo, el que me dice en qué sección de la página estoy. El menú en la página web tendrá solamente 36px de alto, entonces como se habrán dado cuenta si separan cada sección de la imagen, cada una es de 36px de alto, 36*3=108px. Aquí os dejo un ejemplo. Implementación del código aquí. Para que os hagáis una idea los mega portales (google, yahoo, softonic, etc.) lo utilizan: Este método no se limita solamente a menús en páginas web, esto ayuda bastante en la optimización de aplicaciones web también, ya que evitamos constantes conexiones al servidor cada vez que se necesite un icono, imágen, fondo, etc. Las aplicaciones web utilizan bastantes iconos, les pongo el ejemplo de Yahoo! Mail, ellos usan este método para sus iconos y fondos de los tabs, esta es una pequeñísima parte de la gran imagen que ellos usan para sus iconos, la original es de 3050px de ancho x 101px de alto, y pesa tan sólo 31kb:

CSS Sprites

O en softonic.com si pulsáis boton 2 encima de algún título de algún bloque os saldría esto:

CSS Sprites

Hacen todos los tipos de imágenes en una y luego con CSS se reparte, además sólo se hace una llamada al servidor lo cual lo hace más interesante… Fuente: cristalab.com