Afbeeldingen optimaliseren voor je website
Afbeeldingen optimaliseren is op de meeste websites de snelste winst die er te halen valt. Beeld is doorgaans zestig tot tachtig procent van het gewicht van een pagina, en dat gewicht bepaalt hoe lang je bezoeker naar een leeg scherm kijkt.
Het is bovendien werk dat je één keer goed doet en daarna vergeet.
Drie ingrepen dekken het grootste deel: de juiste maat, het juiste formaat en uitgestelde weergave. In die volgorde.
Begin bij de maat
Een foto van vierduizend pixels breed die op achthonderd pixels wordt getoond, laadt zestien keer zoveel als nodig. Je bezoeker ziet het verschil niet, zijn verbinding wel.
Verkleinen vóór het uploaden is daarom de eerste stap, en de enige die je met geen enkele plugin volledig kunt uitbesteden.
Meer daarover lees je bij hoeveel pixels een afbeelding moet zijn.
De regel van twee keer
Lever aan op twee keer de maat waarop het beeld getoond wordt, zodat het ook op een scherp scherm klopt. Comprimeer daarbij steviger dan je gewend bent: bij een dubbele maat valt kwaliteitsverlies nauwelijks op.
Meer daarover lees je bij aanleveren voor een retina-scherm.
Kies het juiste formaat
WebP levert dezelfde beeldkwaliteit bij een kwart tot een derde minder gewicht, en werkt sinds 2020 in elke gangbare browser. Voor logo’s en pictogrammen gebruik je geen foto maar een vectorbestand, want dat blijft op elk formaat scherp.
Meer daarover lees je bij wat WebP is.
Mijn vaste volgorde
- Verklein tot de weergavemaat, maal twee.
- Zet om naar WebP, automatisch bij het uploaden.
- Laat beeld onder de vouw uitgesteld laden.
- Meet je pagina voor en na.
Die derde stap kost niets en levert op een lange pagina veruit het meeste op. De laatste sla je makkelijk over, maar zonder meting weet je niet of je iets hebt bereikt of alleen iets hebt veranderd.
Wat je beter niet doet
Alles op maximale kwaliteit bewaren in de veronderstelling dat het later nog van pas komt. En je hele mediabibliotheek in één keer laten comprimeren zonder een kopie achter de hand.
Die tweede is onomkeerbaar: de meeste plugins overschrijven je origineel.
Meer daarover lees je bij waarom een afbeelding wazig wordt.
Uitgestelde weergave
WordPress zet dat sinds versie 5.5 zelf aan. Zorg wel dat je bovenste afbeelding uitgezonderd blijft, anders vertraag je juist wat je bezoeker als eerste ziet.
Meer daarover lees je bij pagespeed.
Wat een plugin overneemt
Omzetten naar WebP, kleinere varianten aanmaken en uitzonderingen beheren gaat prima automatisch. Het kiezen van de juiste maat blijft mensenwerk.
Meer daarover lees je bij afbeeldingen omzetten naar WebP.