Gli sprite CSS rappresentano una tecnica per ridurre il numero di richieste HTTP fatte per accedere alle immagini usate sul tuo sito. Le immagini vengono combinate in una immagine più grande a definite coordinate X ed Y. Assegnando l'immagine generata ad elementi rilevanti della pagina, la proprietà CSS background-position può essere usata per spostare l'area visibile sulla sotto-immagine desiderata.

Questa tecnica può essere molto efficace per migliorare le performance del tuo sito, in maniera particolare quando vengono utilizzate molte immagini di piccole dimensioni, come nel caso di icone di un menu. L'home page di Yahoo!, per esempio, usa questa tecnica esattamente a questo scopo.

Gotchas

Sono presenti un paio di bug in alcuni browser, da tener presenti quando si generano gli sprite CSS.

Opera

Opera (almeno fino alla versione 9.0) non riconosce valori per la background-position maggiori di 2042px o minori di -2042px, utilizzando quei valori quando si esce da tale intervallo. Questo tool genera automaticamente nuove colonne di immagini ogni volta che il limite verticale viene raggiunto.

Safari

Safari presenta un problema nella gestione delle immagini di background ripetute. Fortunatamente, questo può essere facilmente risolto specificando un offset orizzontale (configurabile) sufficientemente grande..

Dettagli ulteriori

A List Apart ha pubblicato un articolo intitolato CSS Sprites: Image Slicing's Kiss of Death che spiega i concetti di base degli sprite CSS. Per chi si avvicina per la prima volta a questa tecnica, consigliamo vivamente di visitare A List Apart e di dargli un'occhiata.