CSS sprites är ett sätt att reducera antalet av HTTP förfrågningar av bildresurser som din sida genererar. Bilderna är kombinerade till en större bild vid definierade X och Y koordinater. Genom att ange den genererade bilden till relevanta sidelement kan du genom CSS egenskapen background-position skifta den synliga delen till den del av bilden som ska visas.

Denna teknik kan vara väldigt effektik för att förbättra sidans prestanda speciellt i situationer där många små bilder, som t ex. ikoner i menyer, används. Ett exempel är yahoo.com där de använder tekniken i detta ändamålet.

För kännedom

Det finns en del väldigt irriterande webbläsarbuggar att vara medveten om vid skapandet av CSS sprites.

Opera

Opera (åtminstone upp till version 9.0) tillåter inte en bakgrundsposition över 2042px eller mindre än -2042px och återgår isåfall till detta max/min värde. Verktyget löser problemet genom att skapa nya kolumner inuti bilden varje gång gränsen uppnås.

Safari

Safari har ett problem med repeterande bakgrundsbilder. Lyckligtvis kan detta enkelt lösas genom att precisera en tillräckligt stor horisontell kompensation (konfigurerbart).

Vidare läsning

A List Apart publiserade en artikel, CSS Sprites: Image Slicing's Kiss of Death, som förklarar konceptet bakom CSS sprites. Om du är ny till tekniken föreslår vi att du beger dig över till A List Apart och läser på.