Zo optimaliseer je afbeeldingen voor een snellere laadtijd

Vraag een webontwikkelaar wat de meeste websites vertraagt en het antwoord is bijna altijd hetzelfde. Afbeeldingen. Afbeeldingen optimaliseren voor het web is het verkleinen van de bestandsgrootte zonder zichtbaar kwaliteitsverlies, zodat pagina's sneller laden zonder er slechter uit te zien. Eén niet-gecomprimeerde foto kan enkele megabytes groot zijn. Dezelfde afbeelding, in het juiste formaat en gecomprimeerd, kan onder de 100 kilobyte komen zonder zichtbaar verschil op het scherm. In dit artikel lees je welke bestandsformaten je gebruikt, hoe compressie werkt, wanneer je het formaat aanpast voordat je uploadt, hoe lazy loading past en wat in de praktijk het grootste verschil maakt voor de laadsnelheid van je pagina.

Afbeeldingen zijn op de meeste websites de grootste bijdrager aan het paginagewicht. Een pagina met vijf niet-geoptimaliseerde foto's kan tien keer zwaarder zijn dan nodig. Dat gewicht leidt direct tot tragere laadtijden, een slechtere score voor Largest Contentful Paint en bezoekers die weggaan voordat de pagina klaar is. Voor context over waarom laadsnelheid je bedrijf en je zoekposities beïnvloedt, lees je het artikel over waarom websitesnelheid ertoe doet.

Waarom maken afbeeldingen websites traag?

Als een bezoeker een pagina opent, downloadt de browser elke bron op die pagina voordat hij de pagina toont. Afbeeldingen zijn meestal de grootste van die bronnen. Elke afbeelding vraagt om een eigen verzoek, en de browser moet wachten tot die verzoeken klaar zijn voordat hij de inhoud volledig kan weergeven.

Hoe afbeeldingen laadmetingen beïnvloeden

• Afbeeldingen beïnvloeden direct de Largest Contentful Paint (LCP). Is het grootste zichtbare element op een pagina een hoofdafbeelding, dan is LCP de tijd die die afbeelding nodig heeft om volledig te laden
• Niet-geoptimaliseerde afbeeldingen vergroten het totale paginagewicht, wat elke andere meting verderop in de laadtijdlijn vertraagt
• Op mobiele verbindingen is het effect groter. Een hoofdafbeelding van 3 MB die op breedband in twee seconden laadt, kan op een gemiddeld mobiel netwerk acht seconden of meer duren
• Meerdere grote afbeeldingen versterken het probleem. Een galerij of productpagina met tien niet-gecomprimeerde foto's kan lastig te gebruiken zijn op tragere verbindingen

Welke bestandsformaten gebruik je voor webafbeeldingen?

JPEG

• Het standaardformaat voor foto's en afbeeldingen met kleurverlopen en veel kleuren
• Ondersteunt verliesgevende compressie, wat betekent dat een deel van de beelddata blijvend wordt verwijderd om het bestand kleiner te maken
• Wordt zonder uitzondering door alle browsers en apparaten ondersteund
• Een kwaliteitsinstelling van 75 tot 85 levert bestanden op die 60 tot 80 procent kleiner zijn dan het origineel, zonder zichtbaar kwaliteitsverlies bij de meeste foto's

PNG

• Het formaat voor afbeeldingen met een transparante achtergrond, zoals logo's, pictogrammen en afbeeldingen met effen kleurvlakken
• Gebruikt verliesvrije compressie, wat betekent dat er geen data wordt verwijderd en de afbeelding precies behouden blijft
• PNG-bestanden zijn voor foto's aanzienlijk groter dan JPEG. Gebruik PNG alleen als transparantie nodig is; gebruik JPEG of WebP voor foto's

WebP

• Een modern formaat dat is ontwikkeld om zowel JPEG als PNG te vervangen, met betere compressie bij gelijke kwaliteit
• WebP-afbeeldingen zijn meestal 25 tot 35 procent kleiner dan vergelijkbare JPEG-bestanden
• Ondersteunt zowel verliesgevende als verliesvrije compressie en ondersteunt transparantie
• Wordt door alle grote browsers ondersteund. Zet je websitebouwer afbeeldingen niet automatisch om naar WebP, converteer ze dan zelf voordat je uploadt

AVIF

• Een nieuwer formaat met betere compressie dan WebP, vaak 50 procent kleiner dan JPEG bij vergelijkbare kwaliteit
• De browserondersteuning groeit, maar is nog niet overal aanwezig. Gebruik AVIF waar het wordt ondersteund, met een automatische terugval op WebP of JPEG voor browsers die het niet ondersteunen

Wat is beeldcompressie en hoe werkt het?

Compressie verkleint de bestandsgrootte door beelddata te verwijderen of te vereenvoudigen. Er zijn twee soorten, en het verschil bepaalt wanneer je welke gebruikt.

Verliesgevende compressie

• Verwijdert blijvend een deel van de beelddata om een kleiner bestand te krijgen
• De verwijderde data wordt gekozen op basis van wat het menselijk oog het minst opmerkt, meestal subtiele kleurverschillen en fijn textuurdetail
• Wordt gebruikt in JPEG en verliesgevend WebP
• Een kwaliteitsinstelling van 75 tot 85 levert veel kleinere bestanden op met afbeeldingen die voor de meeste doeleinden identiek lijken aan het niet-gecomprimeerde origineel
• Sla een al gecomprimeerde JPEG niet opnieuw op met een lagere kwaliteit. Zo stapel je compressie-artefacten op en gaat de afbeelding bij elke keer opslaan verder achteruit

Verliesvrije compressie

• Verkleint het bestand zonder beelddata te verwijderen. Elke pixel blijft precies behouden
• Wordt gebruikt in PNG en verliesvrij WebP
• Bespaart minder bestandsgrootte dan verliesgevende compressie, maar zonder enig kwaliteitsverlies
• Het best geschikt voor productschema's, schermafbeeldingen, afbeeldingen met veel tekst en alles waar compressie-artefacten zichtbaar of onaanvaardbaar zouden zijn

Moet je afbeeldingen vooraf verkleinen voordat je uploadt?

Bestandsgrootte en pixelafmetingen zijn aparte kwesties, en beide beïnvloeden de laadsnelheid. Een afbeelding van 4.000 pixels breed comprimeren helpt niet als de browser hem maar op 800 pixels breed hoeft te tonen. De browser downloadt de volledige afbeelding van 4.000 pixels en schaalt hem in het venster terug, wat bandbreedte verspilt en de pagina voor elke bezoeker vertraagt.

Zo pas je afbeeldingen goed aan voordat je uploadt

• Bepaal de maximale breedte waarop de afbeelding ooit wordt getoond. Voor afbeeldingen over de volledige breedte op desktop is dat meestal 1.440 tot 1.920 pixels
• Voor afbeeldingen in kolommen of kaarten is de getoonde breedte kleiner, vaak 400 tot 800 pixels
• Pas de afbeelding aan naar de maximale weergavegrootte voordat je uploadt
• Vermenigvuldig voor retina- en andere schermen met hoge dichtheid de weergavebreedte met 1,5 tot 2. Een kaartafbeelding van 400 pixels breed heeft baat bij een bronbestand van 600 tot 800 pixels breed om scherp te lijken op retina-schermen

Wat is lazy loading en hoe past het bij afbeeldingen optimaliseren?

Lazy loading stelt het downloaden uit van afbeeldingen die nog niet in beeld zijn. In plaats van alle afbeeldingen op de pagina in één keer te laden, laadt de browser afbeeldingen pas als bezoekers in de buurt komen. Op pagina's met veel afbeeldingen verlaagt dit het eerste paginagewicht flink en verbetert het de Time to Interactive voor de inhoud die zonder scrollen zichtbaar is.

• Lazy loading wordt in alle grote browsers standaard ondersteund met het attribuut loading="lazy" op afbeeldingstags
• Pas lazy loading niet toe op afbeeldingen above the fold. De hoofdafbeelding en alle inhoud die zonder scrollen zichtbaar is, moeten direct laden
• Pas lazy loading toe op alle afbeeldingen below the fold, zoals productgalerijen, blogminiaturen en afbeeldingsrijke secties verderop op de pagina

Een volledige uitleg over hoe lazy loading werkt en wanneer je het gebruikt, vind je in het artikel over wat lazy loading is en hoe het werkt.

Wat zijn responsive afbeeldingen en waarom doen ze ertoe?

Een responsive afbeelding is een afbeelding die een ander bestandsformaat levert, afhankelijk van het schermformaat van de bezoeker. In plaats van een afbeelding van 1.920 pixels naar elk apparaat te sturen, ook naar een bezoeker met een mobiel scherm van 375 pixels breed, laten responsive afbeeldingen de browser alleen vragen wat hij nodig heeft.

Hoe responsive afbeeldingen de mobiele laadtijd verkorten

• Een mobiele bezoeker krijgt een versie van 400 pixels van de afbeelding in plaats van het volledige desktopbestand, wat de downloadgrootte sterk verkleint
• Responsive afbeeldingen gebruiken het attribuut srcset om meerdere bronbestanden met verschillende breedtes te definiëren, zodat de browser het juiste kan kiezen
• Websitebouwers die dit automatisch regelen, besparen je het handmatig maken van meerdere afbeeldingsformaten
• Responsive afbeeldingen verbeteren direct de Core Web Vitals op mobiel, waar het optimaliseren van afbeeldingen de grootste invloed heeft op LCP

Voor een uitleg over Core Web Vitals en hoe LCP wordt gescoord, lees je het artikel over wat Core Web Vitals zijn.

Hoe optimaliseer je afbeeldingen stap voor stap?

Voor het uploaden

• Pas de afbeelding aan naar de juiste weergaveafmetingen
• Kies het juiste formaat: WebP voor foto's en algemene afbeeldingen, PNG alleen als transparantie nodig is
• Comprimeer met een kwaliteitsinstelling van 75 tot 85 voor verliesgevende formaten
• Controleer de bestandsgrootte. Een gewone webafbeelding hoort onder 200 KB te blijven. Hoofdafbeeldingen op desktop mogen tot 400 KB; alles daarboven is het waard om opnieuw te bekijken voordat je uploadt

Na het uploaden

• Voeg beschrijvende alt-tekst toe aan elke afbeelding. Dat is belangrijk voor toegankelijkheid en draagt bij aan zoekzichtbaarheid. Voor een volledige gids lees je het artikel over hoe je afbeeldingen op je website gebruikt
• Pas lazy loading toe op alle afbeeldingen below the fold
• Draai een paginasnelheidstest nadat je nieuwe afbeeldingen hebt toegevoegd. Eén niet-geoptimaliseerde afbeelding kan alle andere snelheidsverbeteringen op de pagina tenietdoen

Doorlopend

• Controleer nieuwe afbeeldingen vóór elke upload. Niet-geoptimaliseerde afbeeldingen glippen er makkelijk doorheen als je snel werkt
• Draai een snelheidstest na elke grote reeks nieuwe afbeeldingen die je publiceert
• Bekijk oudere afbeeldingen opnieuw als de site ouder is dan de huidige optimalisatiepraktijken. Oude afbeeldingsbibliotheken zijn een veelvoorkomende en over het hoofd geziene bron van snelheidsproblemen

Voor een gids over het testen van de prestaties van je hele site lees je het artikel over hoe je de snelheid van je website test.

Zo regelt WEMASY het optimaliseren van afbeeldingen

De Websitebouwer van WEMASY comprimeert en converteert afbeeldingen automatisch bij het uploaden. Afbeeldingen worden in WebP getoond waar de browser dat ondersteunt, met terugvalformaten voor oudere apparaten. Bij het uploaden worden meerdere formaten gemaakt, zodat mobiele bezoekers bestanden van het juiste formaat krijgen zonder dat je iets hoeft in te stellen.

Lazy loading staat standaard aan voor afbeeldingen below the fold op alle pagina's die je met WEMASY bouwt. Alt-tekst voeg je toe in de afbeeldingseditor in het platform. Snelheidsscores, waaronder LCP, zie je in het analytics-dashboard van WEMASY, met per pagina de problemen rond afbeeldingen en concrete aanbevelingen.

Bekijk wat erbij zit op de WEMASY Websitebouwer, of bekijk de abonnementen op de prijspagina.

Veelgestelde vragen