Efficiënt gebruik maken van afbeeldingen met CSS Sprites

Geplaatst op 04-11-2010

Ken je de techniek waar de rollover van een button zit verstopt in dezelfde afbeelding als de button zelf. Door de achtergrondpositie te veranderen wordt de rollover tevoorschijn getoverd. CSS Sprites zijn een vergrote versie van deze techniek. Het verschil is dat in plaats van twee of drie afbeeldingen die gecombineerd worden tot één, je ongelimiteerd afbeeldingen kunt combineren tot één grote afbeelding.

Is het niet beter om meerdere afbeeldingen te gebruiken?

Nee dat is het niet. Vroeger slicede iedereen zijn afbeeldingen om pagina’s sneller te laten laden. Het enige wat deze techniek deed was het tegelijkertijd laden van verschillende stukjes op hetzelfde moment zodat het oog werd misleid en de bezoeker dacht dat de pagina snel geladen was. Echter elke afbeelding die wordt geladen is een aparte HTTP-Request. Hoe meer HTTP-Requests, hoe minder efficiënt je pagina wordt.

Hoe worden CSS Sprites gebruikt?

Laten we starten met het voorbeeld van de huidige situatie:

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

In dit voorbeeld worden voor elk item twee afbeelding ingeladen. Één afbeelding voor de normale status en nog een afbeelding voor de rollover status. Door gebruik te maken van een CSS Sprite kan het aantal afbeeldingen worden verkleind van tien losse afbeeldingen naar één grote afbeelding die alle afbeeldingen bevat. Door gebruik te maken van verschillende achtergrondposities binnen de CSS krijgen we het volgende voorbeeld:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Door gebruik te maken van een CSS Sprite hebben we het aantal afbeeldingen verminderd van tien naar één en de grootte met 7.5 KB teruggebracht. Dat is al een groot verschil voor zijn klein voorbeeld. Stel je voor hoeveel dit bespaart op een hele website.

Wat kunnen CSS Sprites niet?

Met een CSS Sprite kun je geen gebruik maken van herhalende beelden. Sprites zijn vooral bedoeld voor beelden die bestaan uit losse blokken. Iconen zijn een goed voorbeeld om te gebruiken binnen CSS Sprites.

Vanaf de start beginnen met Sprites, of aan het eind toevoegen?

Dat het gebruik van CSS Sprites voor je website voordelig is is duidelijk, maar wat is de beste workflow wanneer je een nieuwe website gaat opzetten? Er zijn twee makkelijk te bewandelen routes. De eerste is het gebruik van de sprite vanaf het begin. Je hebt een Photoshop bestand open waar je de toe te passen afbeeldingen in plaats en telkens opnieuw opslaat.

De andere route is het toevoegen van de sprite wanneer je website (voor zover mogelijk) klaar is. Alle gebruikte afbeeldingen die gecombineerd kunnen worden tot één grote kunnen dan worden samengevoegd en worden gebruikt als sprite.

Terug naar de vorige pagina