Je hebt een fotograaf ingehuurd voor mooie teamfoto’s en sfeerbeelden van je werkplek. De foto’s zijn prachtig, je zet ze direct op je website en bent trots op het resultaat. Een week later laat een vriend je weten dat je site op zijn telefoon “eeuwig” laadt. Je opent hem zelf in de trein en ziet de foto’s regel voor regel verschijnen.
Te zware afbeeldingen zijn een van de meest voorkomende oorzaken van trage websites. Het goede nieuws: afbeeldingen optimaliseren is ook een van de makkelijkste manieren om je site sneller te maken, zonder dat je foto’s er slechter uitzien. In dit artikel lees je waarom grote foto’s een probleem zijn, hoe je ze lichter maakt en hoe je er tegelijk je vindbaarheid mee verbetert.
Een vrachtwagen voor een envelop
Een foto rechtstreeks van een camera of telefoon is vaak 4.000 pixels breed en 5 MB of meer groot. Op een website wordt diezelfde foto meestal getoond in een vak van hooguit 1.200 pixels breed. Je bezoeker downloadt dus een enorm bestand om er een klein deel van te zien. Dat is als een vrachtwagen inhuren om één envelop te bezorgen: het komt wel aan, maar het duurt onnodig lang en kost veel brandstof.
Vooral op mobiel, met een wisselende verbinding, merk je dat direct. En Google merkt het ook: de grootste afbeelding op een pagina bepaalt vaak hoe snel je hoofdinhoud verschijnt, een van de Core Web Vitals waarmee Google de gebruikservaring meet.
Zes manieren om afbeeldingen lichter te maken
1. Verklein de afmetingen vóór het uploaden
Een foto in een blog of op een dienstenpagina hoeft zelden breder te zijn dan 1.200 tot 1.600 pixels. Een grote headerfoto over de volle breedte heeft genoeg aan ongeveer 2.000 pixels. Pas het formaat aan op je computer, bijvoorbeeld met een eenvoudig fotoprogramma of een online tool, voordat je het bestand uploadt. WordPress verkleint te grote foto’s sinds versie 5.3 overigens automatisch tot maximaal 2.560 pixels, maar dat is voor de meeste plekken nog steeds ruim.
2. Kies het juiste bestandsformaat
- WebP is het moderne formaat van Google. Volgens Google zijn WebP-bestanden doorgaans 25 tot 34 procent kleiner dan vergelijkbare JPG-bestanden, bij dezelfde kwaliteit.
- AVIF is nog nieuwer en vaak nog lichter. WordPress ondersteunt het sinds versie 6.5.
- JPG is prima voor foto’s als je geen WebP kunt gebruiken.
- PNG gebruik je alleen voor logo’s, iconen en afbeeldingen met een transparante achtergrond. Een foto in PNG is vaak meerdere keren zo groot als dezelfde foto in JPG.
3. Comprimeer zonder zichtbaar kwaliteitsverlies
Comprimeren betekent dat overbodige informatie uit het bestand wordt gehaald. Bij een goede instelling zie je het verschil met het blote oog niet, maar is het bestand een stuk kleiner. Een optimalisatieplugin zoals ShortPixel, Imagify of EWWW doet dit automatisch bij elke upload, en kan ook je bestaande foto’s in één keer omzetten naar WebP.
4. Laat afbeeldingen pas laden als ze in beeld komen
Dat heet lazy loading en zit sinds versie 5.5 standaard in WordPress. Foto’s onderaan de pagina worden pas geladen als de bezoeker ernaartoe scrollt. Let wel op: de grote foto bovenaan je pagina moet juist direct laden. Sommige plugins stellen lazy loading te agressief in, waardoor je hoofdafbeelding later verschijnt.
5. Geef afbeeldingen vaste afmetingen
Als de browser vooraf weet hoe groot een afbeelding wordt, houdt hij daar ruimte voor vrij. Zonder vaste afmetingen verspringt je tekst zodra de foto inlaadt, wat irritant is voor bezoekers en slecht voor je score. WordPress voegt die afmetingen meestal zelf toe, maar bij afbeeldingen uit sommige paginabouwers of externe bronnen gaat dat weleens mis.
6. Ruim ongebruikte afbeeldingen op
WordPress maakt van elke upload meerdere formaten aan. Na een paar jaar staan er duizenden bestanden in je mediabibliotheek die nergens meer worden gebruikt. Dat maakt je site niet trager voor bezoekers, maar wel je back-ups groter en trager. Ruim die bestanden af en toe op, maar controleer eerst of een afbeelding echt nergens meer wordt gebruikt. Foto’s in pagina’s die met een paginabouwer zijn gemaakt, worden door opruimtools namelijk niet altijd herkend.
Lichtere afbeeldingen én beter vindbaar
Als je toch bezig bent, maak je afbeeldingen dan ook vindbaar. Twee dingen helpen:
- Een duidelijke bestandsnaam. “hovenier-tuinontwerp-assen.webp” vertelt Google meer dan “IMG_4821.jpg”.
- Een goede alt-tekst. Dat is de korte beschrijving die zoekmachines en schermlezers gebruiken om te begrijpen wat er op de foto staat. Beschrijf in één zin wat je ziet, zonder trefwoorden op te stapelen.
Waar je op moet letten
- Te sterk comprimeren. Wie de kwaliteit te ver terugschroeft, krijgt vlekkerige of blokkerige foto’s. Bekijk het resultaat altijd even op een groot scherm.
- Twee optimalisatieplugins tegelijk. Die kunnen elkaar in de weg zitten of je foto’s dubbel bewerken. Kies er één.
- Originelen bewaren. Bewaar de originele foto’s van je fotograaf buiten je website. Dan kun je later altijd opnieuw beginnen.
- Bulk-optimalisatie zonder back-up. Zet je al je bestaande foto’s in één keer om, maak dan eerst een back-up.
Zo pak je het aan
- Meet je zwaarste pagina’s met PageSpeed Insights en kijk welke afbeeldingen als probleem worden genoemd.
- Installeer één optimalisatieplugin en stel WebP in.
- Zet je bestaande afbeeldingen om, na een back-up.
- Maak er een gewoonte van nieuwe foto’s eerst te verkleinen en een duidelijke naam en alt-tekst te geven.
Afbeeldingen zijn maar één onderdeel van een snelle website. Het complete verhaal lees je in de ultieme gids voor WordPress snelheid.
Tot slot
Een foto van 5 MB op een website is een vrachtwagen voor een envelop. Met de juiste afmetingen, een modern formaat en goede compressie bezorg je dezelfde foto met een fietskoerier: net zo mooi, maar veel sneller. Het is laaghangend fruit voor je snelheid én je vindbaarheid.
Wil je al je bestaande afbeeldingen in één keer laten omzetten naar het snelle WebP-formaat, zonder dat je één foto opnieuw hoeft te uploaden? Bij Webconneqt regelen we dat graag voor je als onderdeel van onze performance optimalisatie. Neem gerust contact op, dan kijken we samen wat er bij jouw website te winnen valt.