Básicamente, la idea es combinar todos los elementos gráficos de tu web (iconos, botones, etc, no fotos de un sólo post y cosas asi) en un sólo elemento gráfico, y posicionarlo por CSS para cada elemento. De esta forma, evitar hacer docenas de peticiones al servidor web, que son resueltas en una sóla, y no sólo aceleras la carga de tu web, sino que eres cortés con tu servidor web. Y por si fuera poco, al combinar varias imágenes en una ,ahorras los headers identificaticos de cada una, con lo que el peso, encima, es menor, y consumes menos ancho de banda.
- Ejemplo sencillo de CSS Sprites: http://www.coderoshi.com/2007/11/faster-page-loads-with-image.html
- Un poco más avanzado: http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/
- Y más sobre CSS Sprites: http://www.websiteoptimization.com/speed/tweak/css-sprites/
- Y más CSS Sprites todavía: http://www.alistapart.com/articles/sprites
Update para vagos:
En http://spritegen.website-performance.org/ puedes subir un zip con todas tus imágenes y ellos se encargarán de unirlas en una sóla, optimizarla, y generarte el CSS necesario para cada una de ellas. Simple, rápido y eficiente. Y como es Open Source, aqui queda un mirror para los tiempos de carestía: http://www.propiedadprivada.com/lab/css-sprites/