Afbeeldingen en je webshop snelheid: 4 pragmatische tips

Iedereen die weleens aan de websitesnelheid heeft gesleuteld weet dat de afbeeldingen voor veel problematiek zorgen. In veel gevallen zijn afbeeldingen zwaarder om in te laden dan bijvoorbeeld tekst. Dit maakt dat overmatig gebruik van afbeeldingen (hoe mooi ze ook zijn) de website drastisch vertraagd. In dit artikel geef ik 4 tips om “duurzaam” gebruik te maken van afbeeldingen zonder te concessies op de websitesnelheid te maken.

1. Comprimeren, comprimeren en comprimeren

Ik kan dit niet vaak genoeg tegen mijn klanten zeggen. Alle afbeeldingen die op de website worden gezet moeten worden gecomprimeerd. Dit zorgt in veel gevallen voor een besparing van tientallen KB’s per afbeelding.

Wanneer een afbeelding is gecomprimeerd is deze eigenlijk verkleind. Hierdoor hoeft de browser uiteindelijk minder KB’s in te laden wat ervoor zorgt dat de website sneller kan worden ingeladen.

Ik gebruik zelf op mijn website (die gebruikmaakt van het CMS WordPress) de plug-in “WP Smush”. Ik zou deze plug-in in veel gevallen aanraden doordat het dit proces automatiseert. Hierdoor heb je er geen omkijken meer naar tijdens het uploaden van afbeeldingen op de website.

2. Afbeeldingsindelingen

Wanneer je hiermee klaar bent kunnen we verder met de afbeeldingsindelingen. Dit kan zowel worden gedaan voor de afbeeldingen die al op de website staan als de afbeeldingen die er nog op moeten worden gezet.

Een aantal voorbeelden van oudere afbeeldingsindelingen zijn PNG of JPEG. Wanneer je bijvoorbeeld op een Mac een screenshot maakt is dit in veel gevallen automatisch een PNG. Deze afbeeldingsindelingen bieden een minder efficiënte compressie waardoor de website, ondanks het comprimeren, alsnog onnodige KB’s moet inladen.

Dit is ook een punt van aandacht voor de Google Page Speed tool. De Google Page Speed tool raadt dan ook moderne afbeeldingsindelingen aan. Een aantal voorbeelden hiervan zijn JPEG 2000, JPEG XR en WebP. Deze modernere afbeeldingen kunnen efficiënter worden gecomprimeerd zodat je nog meer KB’s kan besparen.

Een tool om oudere afbeeldingsindelingen naar de modernere varianten te veranderen is “MyGeodata Converter”. Met deze tool is het mogelijk om afbeeldingen die nog niet op de website staan aan te passen.

3. Afbeeldingsformaten

De afbeeldingsindeling is niet het enige wat de grootte van een afbeelding bepaald. Ook het formaat van de afbeelding heeft hier een groot aandeel in. Een afbeelding met de afmeting 640 x 480 is in de praktijk vaak kleiner dan een afbeelding met de afmeting 1024 x 768. Toch zie ik dit bij veel websites misgaan.

Zo worden er in veel gevallen afbeeldingen aangedragen met afmetingen van 1024 x 768 waar een formaat van 300 x 600 volstaat. Dit zorgt voor enorm veel onnodige KB’s waardoor de website trager wordt dan deze eigenlijk zou moeten zijn.

4. Lazy load de gebruikte afbeeldingen

De Google Page Speed tool geeft deze tip in de vorm van “laad afbeeldingen die niet in beeld zijn nog niet”. Het gebruikmaken van lazy loading kan ervoor zorgen dat maar een fractie van de afbeeldingen tegelijkertijd hoeven te worden ingeladen.

Op deze manier kun je een website met 1.000 afbeeldingen even snel inladen als een website met 2 afbeeldingen. Alleen de afbeeldingen in het eerste aanzicht worden initieel ingeladen. Dit geeft een enorme besparing in het aantal KB’s.

Ik zou dit echter alleen als laatste redmiddel aanraden. Gebruikmaken van lazy loading doet de gebruikersvriendelijkheid van een website geen gunst (mijn mening). Dit doordat de afbeeldingen tijdens het scrollen worden ingeladen. Dit zorgt ervoor dat het scrollen in de meeste gevallen minder soepel verloopt dan gebruikelijk.

Conclusie

Ik zou bijna iedere website aanraden om gebruik te maken van afbeeldingen. Afbeeldingen lichten de teksten mooi toe en zorgen voor een algehele betere uitstraling. Doe dit echter wel zo duurzaam mogelijk. Probeer bovenstaande punten hierbij te gebruiken om de websitesnelheid voor een langere tijd optimaal te houden.