CSS sprites zijn een manier om het aantal HTTP-verzoeken dat voor een webpagina wordt gedaan te vermindering. Afbeeldingen worden gecombineerd in één groter beeld op gespecificeerde X en Y coorindates. Na koppelen van deze gegenereerde afbeelding aan de relevante pagina-elementen, kan de CSS achtergrond-positie eigenschap vervolgens worden gebruikt om het zichtbare kader te verschuivevn naar het gewenste afbeeldingsfragment.

Deze techniek kan zeer effectief zijn voor het verbeteren van de laadsnelheid van de webpagina; met name in situaties waarin veel kleine beelden, zoals menu iconen, worden gebruikt. De Yahoo! Home page bijvoorbeeld, gebruikt deze techniek precies om die reden.

Gotchas

Er zijn echter een paar zeer storende browserbugs om voor uit te kijken bij het maken van CSS sprites.

Opera

Opera (tenminste tot en met versie 9.0) zal geen achtergrond posities groter dan 2042px of kleiner dan-2042px herkennen, en gebruikt in plaats daarvan deze grenswaarden. De tool houdt hiermee rekening door nieuwe kolommen in de resulterende afbeelding te creëren, telkens als de verticale limiet is bereikt.

Safari

Safari heeft een probleem met het herhalen van achtergrondafbeeldingen . Gelukkig kan dit gemakkelijk worden opgelost door het opgeven van een groot genoeg horizontale offset waarde (instelbaar).

Meer informatie

A List Apart publiceerde een artikel getiteld CSS Sprites : Image Slicing's Kiss of Death dat de concepten achter CSS sprites verklaart. Als deze techniek nieuw voor je is raden we je sterk aan de naar A List Apart te gaan en een kijkje te nemen.