Afbeeldingen combineren in (CSS) Sprites

Er zijn veel manieren om de laadtijd van je website te verbeteren. Het begint uiteraard bij een goede, betrouwbare hostingpartij (zoals Savvii). Geloof me; 25 websites hosten voor 50 eurocent per maand is echt te mooi om waar te zijn. Zeker wanneer er ook nog eens 100% uptime wordt beloofd (zoals bij Versio).

Een andere manier om de laadtijd te verbeteren, is door afbeeldingen die op iedere pagina van je website terugkomen te combineren door middel van een (CSS) Sprite.

Wat is een (CSS) Sprite?

Een sprite is één grote afbeelding met daarin de losse afbeeldingen (die normaal dus als losse afbeeldingen op je website zouden staan). Hierin kan bijvoorbeeld je logo staan, maar ook social media “share” buttons en banners die op iedere pagina terugkomen.

Waar je normaal een afbeelding direct op je website zou inladen, doe je dat nu op een andere manier. Op de plek waar normaal de afbeelding zou staan, komt nu een <span>of een <div> te staan met een bepaalde “class”. In je CSS-bestand zorg je ervoor dat dit element de juiste hoogte en breedte heeft, én dat het juiste gedeelte van de sprite getoond wordt.

Een goed voorbeeld van een sprite is te zien op Frankwatching (een bekende Nederlandse blog). Eén van de sprites die Frankwatching gebruikt is hier te zien.

Het voordeel van Sprites

Het gebruiken van een CSS Sprite heeft één heel belangrijk voordeel. Als je bijvoorbeeld 10 afbeeldingen hebt die op iedere pagina terugkomen, is een CSS Sprite zeer gunstig voor de laadtijd. Dit komt doordat iedere losse afbeelding die moet worden geladen, een eigen “HTTP Request” nodig heeft, en iedere onnodige HTTP request is er één te veel.

Je zorgt er dus voor dat je tien afbeeldingen kunt laten zien, terwijl daar maar één afbeelding voor hoeft te worden geladen (en dus is er maar één http request voor nodig). Dat is goed voor de laadtijd en bovendien wordt je server hierdoor minder belast.

De laadtijd van je pagina is overigens niet alleen voor je bezoekers belangrijk; ook Google gebruikt de laadtijd van websites als één van de vele factoren om de positie in Google te bepalen.

Hoe maak je een CSS Sprite?

Je kunt natuurlijk zelf al je afbeeldingen gaan combineren. Vervolgens reken je dan precies uit hoe groot ieder element moet zijn en welke positie de achtergrond moet krijgen. Je zult hier ongeveer een halve dag mee bezig zijn.

Gelukkig zijn er heel veel handige tooltjes beschikbaar waarmee het maken van CSS Sprites opeens erg makkelijk wordt. Neem bijvoorbeeld ZeroSprites. Hier upload je al je afbeeldingen, en ZeroSprites maakt er automatisch één geheel van én geeft je de benodigde CSS-code.

Gepubliceerd door

Wouter Postma

Ik ben WordPress- en SEO-specialist. Hierover blog ik op deze website, maar ook op WordPress Lounge. Meer over mij lees je op de pagina "Over". Bekijk ook wat ik al gemaakt heb, of neem contact met me op!