Website optimalisatie tip: sprites

Geplaatst op 28-05-2009 in Advies

Tegenwoordig is het uitermate belangrijk dat een webpagina snel laadt. Als bezoekers lang moeten wachten op het laden van een webpagina kan dit ertoe leiden dat je als bedrijf (belangrijke) sales misloopt. Gelukkig zijn er heel veel technieken waarmee je de laadtijd van een pagina minimaliseert. In de serie "Website Optimalisatie Tips" behandelen we per artikel één optimalisatie tip. In dit artikel gaan we in op: het gebruik van sprites.

Bestanden downloaden

Een webpagina bestaat uit veel verschillende bestanden die allemaal door een bezoeker van een website gedownload moeten worden. HTML, CSS, JavaScript, flash video's, foto's en andere afbeeldingen: het zijn allemaal componenten die door de browser binnengehaald moeten worden voordat een pagina volledig weergegeven kan worden. Het nadeel is dat al deze bestanden niet allemaal in allemaal tegelijk gedownload kunnen worden, maar per domein (bijvoorbeeld www.yes2web.nl) met maximaal twee tegelijk. Dit betekent dat ondanks dat de computer en internetverbinding van een bezoeker meer simultane downloads aan zou kunnen, hij eigenlijk aan het wachten is op de beperkingen van het internet protocol. Om dit te omzeilen en tijd te winnen bij het laden van een website, kunnen alle afbeeldingen op een pagina worden samengevoegd tot één plaatje, een zogenaamde sprite.

Grafiek: Voorbeeld van het downloaden van een webpagina met 12 afbeeldingen, in seconden

Sprites

Een sprite is één grote afbeelding die is samengesteld uit verschillende kleinere afbeeldingen. Deze techniek komt oorspronkelijk uit de gaming industrie: om spellen soepeler te laten verlopen werden veel kleine graphics samengevoegd tot één groot bestand. Deze grote plaat wordt op de plekken waar het nodig is gedeeltelijk getoond, waardoor het net lijkt of het een aparte afbeelding is. Hieronder ziet u een voorbeeld van zo'n sprite uit Super Mario Bros 3:

Afbeelding: Voorbeeld van een Sprite uit de gaming industrie

Deze techniek is ook goed toe te passen op websites. Op websites die veel (kleine) plaatjes bevatten, zoals bijvoorbeeld schaduw randen, iconen en achtergronden, kan deze techniek goed van pas komen. Door gebruik te maken van deze methode hoeft een bezoeker van uw website maar één afbeelding te downloaden, waardoor uw pagina's sneller laden. Ook yes2web.nl maakt gebruik van een sprite. U denkt dat het menu uit 7 verschillende afbeeldingen bestaat, de rode balken bovenaan onze webpagina's aparte afbeeldingen zijn en onze vacature buttons losse plaatjes bestaat? Dan heeft u het helaas mis, ook dat is één grote sprite!

Naast het sneller laden van een spirte, blijkt het ook dat een gecombineerde plaat van alle losse plaatjes kleiner is in de omvang van het bestand dan alle plaatjes afzonderlijk. Dit komt doordat een bestand nog beter gecomprimeerd kan worden zonder kwaliteitsverlies.

Voorbeelden

Naast Yes2web gebruiken ook grote websites deze techniek om de laadtijd te versnellen en kosten te besparen op bandbreedte, hieronder vind u een drietal voorbeelden. 

1. Google.nl - Sprite google.nl
2. Nu.nl - Sprite nu.nl
3. Geenstijl.nl - Sprite geenstijl.nl

Vraagt u zich af of uw huidige website wel snel genoeg laadt en voldoet aan de laatste performance eisen? Of wilt u gewoon meer weten over sprites en website optimalisatie? Dan kunt u altijd contact opnemen met Yes2web.

« Terug naar Advies