E’ basilare che una pagina web sia visualizzata nel minor tempo possibile. L’utente medio vuole vedere contenuti e immagini in un tempo accettabile per evitare di chiudere la pagina e passare altrove.
Premesso questo, va spiegato anche che una richiesta Http accade ogni qual volta una pagina web richiede un file al server. In pratica, ad ogni immagine, file css, script è associata una richiesta http al server centrale. Maggiori sono, contemporanenamte, tali richieste, maggiore è il lavoro del server e più lentamente si caricherà la pagina web in questione.
Questa premessa era d’obbligo per meglio comprendere la tecnica chiamata CSS Sprites.
Alla base di tale tecnica c’è la riduzione del tempo di caricamento di una pagina web semplicemente riducendo le richieste http al server ed è considerata una tecnica molto efficace anche perchè utlizzata dai più famosi portali e social del web : Google, Youtube, Digg, Facebook e non vado oltre perchè mi sembra già abbastanza.
Come funziona?
La tecnica CSS Sprites consiste nell’utilizzare un’unica immagine fisica (realizzata tramite unione di altre immagini con un normale programma di grafica), da utilizzare nelle pagine web.
Così facendo viene effettuata una singola richiesta HTTP al server per caricare l’immagine. Succesivamente viene mostrata solo parte dell’immagine tramite codice CSS attraverso la proprietà background-position.
Il concetto è abbastanza facile da capire così come è intuitivo capire perchè si riesce a risparmiare tempo nel caricamento di una pagina web. Come dicevo è una tecnica molto utilizzata, eccovi ad esempio alcune immagini uniche impiegate con tale tecnica prese dai vari Google, Youtube ecc

Per finire vi lascio qualche link in inglese per meglio approndire, se vi ha interessato, questo argomento :

CSS Sprites: What They Are, Why They’re Cool And How To Use Them

What Are CSS Sprites?

Creating Easy and Useful CSS Sprites

e infine un esempio pratico : http://www.phpied.com/background-repeat-and-css-sprites/