Afbeeldingen optimaliseren: de snelste snelheidswinst

De cijfers over het hele web zijn ontnuchterend. Volgens de metingen van HTTP Archive weegt een gemiddelde homepage vandaag 2,6 MB op mobiel en 2,9 MB op desktop. Afbeeldingen vormen daarvan het grootste deel: op de mediane mobiele homepage gaat het om 911 KB aan beelden, op desktop om ruim 1 MB. Bij de zwaarste 10% van de sites loopt het totaal op tot 8,3 MB op mobiel.

Even ter vergelijking: 2,6 MB over een matige mobiele verbinding downloaden duurt makkelijk enkele seconden. En je bezoeker wacht ondertussen. Onderzoek van Google stelde vast dat 53% van de mobiele bezoekers afhaakt boven de 3 seconden laadtijd.

Waarom loopt het zo uit de hand? Omdat het zo makkelijk gaat. Een foto van de fotograaf is vaak 4000 pixels breed en 6 MB groot. Die sleep je in je website, hij wordt netjes verkleind weergegeven, en het ziet er perfect uit. Alleen: je bezoeker downloadt nog altijd die volle 6 MB om er een vakje van 800 pixels mee te vullen.

Google beoordeelt de laadsnelheid van je pagina met Largest Contentful Paint, kortweg LCP. Dat is het moment waarop het grootste zichtbare element bovenaan je pagina klaar is. De richtlijn is 2,5 seconden of sneller.

En wat is dat grootste element in de praktijk? Bijna altijd een foto. Bij 68% van de mobiele pagina's is het LCP-element een afbeelding. Met andere woorden: die ene grote foto in je header beslist grotendeels over je snelheidsscore, over je eerste indruk en over of Google je pagina als vlot beschouwt.

Dat is goed nieuws, want het maakt de klus overzichtelijk. Je hoeft niet alle 400 foto's op je site aan te pakken. Begin bij de eerste zichtbare afbeelding van je vijf belangrijkste pagina's. Daar zit het grootste deel van de winst.

In de praktijk komen steeds dezelfde vier problemen terug:

• Verkeerde afmetingen: een foto van 4000 pixels breed op een plek van 800 pixels. Verklein je beeld tot maximaal twee keer de weergavebreedte en je gooit direct het grootste deel van het gewicht weg.
• Geen compressie: rechtstreeks uit de camera of uit een ontwerpprogramma bewaren, betekent kwaliteit 100. Kwaliteit 75 tot 80 ziet er in de praktijk identiek uit en weegt een fractie.
• Een verouderd formaat: PNG voor een foto is bijna altijd verkeerd. PNG is bedoeld voor logo's en schermafbeeldingen, foto's horen in JPEG of beter nog in een modern formaat.
• Lazy loading op de verkeerde plaats: lazy loading laadt beelden pas wanneer je ernaartoe scrolt, wat prima is voor foto's lager op de pagina. Maar wie het op de bovenste foto zet, vertraagt precies het element dat als eerste klaar moet zijn. HTTP Archive vond dat 9,5% van de LCP-afbeeldingen deze fout maakt.

Een vijfde, stillere fout: geen breedte en hoogte opgeven. Zonder die maten weet de browser niet hoeveel plaats hij moet reserveren, dus verspringt je pagina tijdens het laden. Dat is precies wat Google meet met CLS, en het is ook waarom bezoekers soms op het verkeerde tikken.

Moderne beeldformaten proppen hetzelfde beeld in minder bytes. WebP is intussen de veilige standaard: alle courante browsers ondersteunen het en je bespaart doorgaans een kwart tot een derde tegenover JPEG bij dezelfde kwaliteit. AVIF gaat nog een stap verder en kan bestanden ongeveer halveren, maar vraagt iets meer rekentijd om te maken.

Toch gaat de omslag traag. WebP wordt vandaag gebruikt door 21,2% van alle websites, en in de metingen van HTTP Archive is 12% van de mobiele beeldverzoeken een WebP-bestand tegenover amper 1% AVIF. JPEG en PNG blijven dus domineren, ook op sites waar de winst voor het grijpen ligt.

Praktisch advies voor een kmo: zet WebP als standaard voor je foto's, houd SVG voor je logo en je iconen, en gebruik AVIF alleen als je systeem of je bouwer het vlot ondersteunt. In WordPress doen degelijke optimalisatieplugins dit automatisch, inclusief het bewaren van een JPEG-terugvaloptie.

Zo pak je het concreet aan, zonder technische achtergrond:

1. Meet je beginpunt. Draai PageSpeed Insights op je homepage en je twee belangrijkste pagina's en noteer je LCP op mobiel.
2. Zoek de zwaarste beelden. In het rapport van PageSpeed Insights staat letterlijk welke bestanden te groot zijn, met de geschatte winst erbij.
3. Verklein en comprimeer. Breng elke foto naar de afmeting die je echt nodig hebt en bewaar op kwaliteit 75 tot 80. Gratis online tools of een plugin doen dit in bulk.
4. Zet om naar WebP en vervang de oude bestanden, of laat je plugin dit automatisch doen.
5. Controleer je lazy loading. Alles onder de eerste schermvulling: lazy. De grote foto bovenaan: niet lazy.
6. Vul breedte en hoogte in bij je afbeeldingen zodat je pagina niet meer verspringt.
7. Meet opnieuw en vergelijk. Zie je geen verschil, dan zit je rem elders, bijvoorbeeld bij je hosting of je scripts.

Bewaar altijd je originelen apart. Comprimeren is niet omkeerbaar, en over twee jaar wil je die foto misschien opnieuw gebruiken voor een brochure.

Werk je met een externe partij, dan hoef je dit niet zelf te doen. Maar het helpt om te weten wat je mag vragen. Zet deze punten gewoon in je mail:

• Worden mijn afbeeldingen automatisch verkleind en omgezet naar WebP bij het uploaden?
• Gebruikt de site responsieve afbeeldingen, zodat een telefoon een kleinere versie krijgt dan een breed scherm?
• Staat de eerste zichtbare afbeelding zeker niet op lazy loading?
• Hebben alle afbeeldingen een breedte en hoogte, zodat de pagina niet verspringt?
• Wat is de LCP op mobiel van mijn drie belangrijkste pagina's, gemeten met PageSpeed Insights?

Dat laatste is de belangrijkste vraag. Een goede partner antwoordt met een cijfer, niet met een gevoel. En als het antwoord boven de 2,5 seconden ligt, weet je meteen waar het gesprek over gaat.

Afbeeldingen optimaliseren is niet spannend, maar het is wel de snelste weg naar een site die vlot aanvoelt. Een namiddag opruimen levert vaak meer op dan maanden discussiëren over een nieuw ontwerp.

Wil je weten hoe zwaar jouw pagina's zijn en wat dat kost aan bezoekers? Doe de gratis marketing scan van Marketing Scan. Je ziet in enkele minuten waar je site tijd verliest en met welke ingreep je het meeste wint.