Al momento de pensar en la optimización de un sitio web, debemos tomar en cuenta muchos elementos para analizar y mejorar: archivos Javascript, CSS, imágenes, recursos externos, etc. Cada uno de estos elementos es solicitado al servidor en forma separada, aumentando la tranferencia, y por lo tanto, el tiempo de carga. CSS Sprites es una excelente técnica que nos permite minimizar las solicitudes al servidor.
Como funciona CSS Sprites?
Básicamente, reunes todas las imágenes de una pagina, hovers, backgrounds, etc.. y generas una sola imágen.
Con CSS y el atributo background puedes “mover” esta imagen para mostrar la parte de la imágen que necesitas, haciendo una especie de máscara.
.menu1 { background:url(menu.png) 0 0 no-repeat;
.menu2 { background:url(menu.png) -40px 0 no-repeat;
¿Qué consigo con todo esto?
Consigues reducir las peticiones al servidor, ya que solo estas pidiendo una sola imágen, y obviamente mejoras el rendimiento de tu sitio web.Esta técnica es muy útil cuando tienes 40, 50 o más imágenes, por ejemplo la web 2.0 generalmente utiliza muchas imágenes para cubrir los requerimientos graficos del diseño, utilizar esta técnica seria buenísimo en estos casos. Sitios como Yahoo y AOL utilizan esta tecnica.
Mas Información aquí
[...] this fix you can easily use techniques such as CSS sprites, and make it compatible with all the browsers, although you don’t know how I’d wish [...]