Waarom zware afbeeldingen je website vertragen
Elke keer dat iemand een pagina opent, haalt de browser alle afbeeldingen op die erop staan. Zijn die bestanden groot, dan duurt het langer voordat een pagina geladen is. Bij een snelle verbinding merk je daar vaak weinig van, maar op een trage of wisselende verbinding, bijvoorbeeld onderweg of op een plek met slecht bereik, kan de website erg traag aanvoelen.
Snelheid is ook belangrijk voor je vindbaarheid in Google. De laadtijd van je pagina komt terug als onderdeel in Google Pagespeed, een tool van Google om te meten hoe snel en stabiel je website laadt. Lichtere afbeeldingen helpen daar direct bij.
Maar er is nog een belangrijke reden. Want verkleinde afbeeldingen zorgen er ook voor dat je website duurzamer is. Een pagina met kleinere afbeeldingen verbruikt namelijk minder stroom bij het laden. En dat scheelt, bij elk bezoek aan je website.
Hoe groot mag een afbeelding op je website zijn?
Een foto die over de volle breedte van het scherm staat, hoeft zelden breder te zijn dan ongeveer 2000 pixels. Voor een afbeelding die de helft van de pagina bekleed is 800 pixels breed meestal genoeg. Dit geldt ook voor retina beeldschermen.
In bestandsgrootte betekent dit dat een afbeelding vaak 300 tot 800 KB’s groot is. Afhankelijk van hoe gedetailleerd de afbeelding is. Een foto van meerdere MB’s is bijna altijd terug te brengen naar een grootte onder 1MB.
Afmetingen en bestandsgrootte zijn niet hetzelfde
Zoals je hierboven al kon lezen, is er een verschil tussen de afmetingen van een afbeelding (in pixels) en de bestandsgrootte (in KB of MB). Deze worden vaak door elkaar heen gehaald, maar juist hier zit veel winst.
Als je een afbeelding klein toont op een pagina in je website, wordt de bestandsgrootte daarmee niet automatisch kleiner. Zet je bijvoorbeeld een foto van 4000 pixels breed in een blok van 1000 pixels breed, dan laadt de browser alsnog de volledige foto van 4000 pixels, met het volle gewicht in KB’s dat daarbij hoort. Door de afmetingen zelf terug te brengen naar wat de pagina nodig heeft, wordt het bestand ook lichter.
Afbeeldingen verkleinen zonder kwaliteitsverlies
Een vaak gehoord argument om foto’s niet te verkleinen is dat de kwaliteit van de foto slechter wordt. Maar dat valt bij afbeeldingen ontzettend mee. Door een afbeelding te verkleinen tot het juiste formaat voor je website, zorg je er voor dat je de details die je alleen ziet als je inzoomt, minder scherp maakt. Dit is meestal een verschil dat je met het blote oog niet of nauwelijks kunt zien.
Zo verklein ik mijn afbeeldingen
Zelf gebruik ik hiervoor Bulk Resize Photos. Ik sleep de afbeeldingen erin en stel twee dingen in:
- De breedte: meestal 1000 of 2000 pixels, afhankelijk van hoe groot de afbeelding op de pagina komt. Bij kleinere afbeeldingen ga ik daar soms onder zitten.
- De kwaliteit: meestal 85%, wat je aan de foto niet ziet maar het bestand flink lichter maakt. Ziet een afbeelding er dan minder scherp uit, dan zet ik hem op 100%.
- Ik laat de afbeelding automatisch omzetten naar WebP of AVIF, door de plugin Converter for media.
In Bulk Resize Photos kun je ook meerdere foto’s tegelijk verkleinen. Ik maak hiervoor vaak mapjes aan met foto’s die dezelfde breedte hebben. Deze mapjes upload ik dan in één keer in de tool.
Wat zijn WebP en AVIF?
Waar er eerder vooral gebruik gemaakt werd van JPEG / JPG en PNG foto’s is dit nu meestal het formaat WebP of AVIF. WebP is een bestandsformaat gemaakt door Google en is meestal 25 tot 35 procent lichter dan een JPEG. Waarbij de kwaliteit precies hetzelfde is. Het werkt in alle moderne browsers, dus je kunt het overal gebruiken.
AVIF is een nieuwere variant en verkleint het bestandsformaat nog verder. Een AVIF is vaak ongeveer half zo groot als een JPEG, en daarmee ook kleiner dan een WebP. De ondersteuning is inmiddels breed, ruim negentig procent van de browsers, en voor de enkele oudere browser die het nog niet leest, val je terug op WebP. Een AVIF maken kost iets meer rekentijd, maar daar merkt je bezoeker niets van.
Welk formaat is het meest geschikt?
Voor de meeste sites is WebP de veilige keuze. Het werkt overal en is flink lichter dan een JPEG of PNG. AVIF gebruik je als je die extra besparing wilt, bijvoorbeeld op een site met veel of grote foto’s.
Afbeeldingen optimaliseren en omzetten in WordPress
Werk je in WordPress, dan hoef je niet elke foto handmatig te optimaliseren en om te zetten naar WebP of AVIF. Hiervoor zijn diverse handige plugins beschikbaar. Zelf gebruik ik altijd de plugin Converter for Media in de websites die ik bouw. Die verkleint de afbeelding tot een maximaal aantal pixels en zet de afbeeldingen om naar WebP. Daarnaast kiest hij automatisch het type bestand dat ondersteund wordt door de browser van de bezoeker.
Hoewel nieuwe afbeeldingen die je uploadt hiermee dus automatisch verkleind worden, is het voor het beste resultaat, aan te raden om elke afbeelding van te voren handmatig te verkleinen.
Goed om te weten
Je hoeft niet al je afbeeldingen in één keer aan te pakken. Begin gerust met de zwaarste, meestal de grote foto’s boven aan je pagina’s, en werk de rest bij wanneer het uitkomt.
Je hele website lichter maken?
Hopelijk kun je hiermee aan de slag met je afbeeldingen, om zo je website een stukje lichter en sneller te maken! Afbeeldingen zijn meestal de grootste winst, maar niet de enige. Wil je dat je hele site sneller en zuiniger wordt, dan kijk ik graag mee naar de rest, zoals caching, ongebruikte code en duurzame hosting. Wil je hier meer over weten? Lees meer over je website verduurzamen.
