Afbeeldingen optimaliseren: AVIF, WebP en responsive images

Afbeeldingen optimaliseren voor je website komt neer op drie dingen: het juiste bestandsformaat kiezen (AVIF of WebP in plaats van zware JPEG’s en PNG’s), elke bezoeker een afbeelding in de juiste maat sturen met responsive images, en slim bepalen wanneer een afbeelding laadt. Doe je dat goed, dan worden pagina’s merkbaar sneller, verbetert je LCP en gebruik je minder data, zonder dat iemand verschil ziet in beeldkwaliteit.

Hieronder lees je per onderdeel wat je moet doen, inclusief de HTML die je ervoor nodig hebt.

Waarom afbeeldingen optimaliseren voor je website zo belangrijk is

Op veel websites zijn afbeeldingen het grootste deel van het totale paginagewicht. Een uitvergrote foto rechtstreeks uit de camera of een stockfoto van enkele megabytes is geen uitzondering. Dat merk je op drie plekken:

• Laadtijd: op mobiele verbindingen duurt het simpelweg langer voordat de pagina bruikbaar is.
• Core Web Vitals: het grootste zichtbare element op een pagina is vaak een afbeelding. Daarmee bepaalt die afbeelding je Largest Contentful Paint. Een goede LCP is 2,5 seconden of minder.
• Layoutverschuivingen: afbeeldingen zonder afmetingen duwen de inhoud weg als ze laden. Dat telt mee in de CLS, die onder de 0,1 moet blijven.

De achtergrond van die meetwaarden lees je in Core Web Vitals uitgelegd.

Het juiste formaat: AVIF, WebP, JPEG, PNG of SVG

Moderne formaten comprimeren veel efficiënter dan de klassiekers. AVIF en WebP worden door alle moderne browsers ondersteund, maar met het <picture>-element kun je altijd een fallback meegeven.

Formaat	Sterk in	Let op	Gebruik voor
AVIF	Zeer kleine bestanden bij goede kwaliteit, ondersteunt transparantie	Encoderen is trager; test de kwaliteitsinstelling	Foto’s en hero-afbeeldingen
WebP	Klein, breed ondersteund, transparantie en animatie	Iets minder efficiënt dan AVIF	Algemene keuze, of fallback voor AVIF
JPEG	Universeel	Groter bij dezelfde kwaliteit	Laatste fallback
PNG	Verliesvrij, scherpe randen	Erg groot voor foto’s	Alleen waar verliesvrij echt nodig is
SVG	Vectoren, schaalbaar, vaak minuscuul	Niet geschikt voor foto’s	Logo’s, iconen, illustraties

Een veelgemaakte fout is een logo of icoon als grote PNG opslaan. Als SVG is het scherper en vaak een fractie van de grootte.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Showroom met maatwerk keukens" width="1600" height="900">
</picture>

De juiste maat: responsive images met srcset en sizes

Een telefoon met een scherm van 400 pixels breed hoeft geen afbeelding van 2400 pixels te downloaden. Met srcset bied je meerdere breedtes aan, en met sizes vertel je de browser hoe breed de afbeelding in de layout wordt. De browser kiest dan zelf de kleinste versie die scherp genoeg is, rekening houdend met de pixeldichtheid van het scherm.

<img
  src="team-800.webp"
  srcset="team-400.webp 400w, team-800.webp 800w, team-1600.webp 1600w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  alt="Het team aan het werk in de werkplaats"
  width="1600" height="1067"
  loading="lazy" decoding="async">

Een paar aandachtspunten:

• Klopt je sizes niet, dan kiest de browser een verkeerde versie. Standaard gaat de browser uit van 100vw, dus een afbeelding in een smalle kolom wordt dan onnodig groot geladen.
• Zet altijd width en height. De browser reserveert dan vooraf de juiste ruimte, wat layoutverschuivingen voorkomt. Met CSS (height: auto) blijft de afbeelding gewoon responsive.
• WordPress genereert automatisch meerdere formaten en een srcset voor afbeeldingen uit de mediabibliotheek. Controleer wel of je thema of pagebuilder dat niet overschrijft.

De volledige uitleg over deze attributen vind je op MDN en in de afbeeldingsgidsen op web.dev.

Slim laden: lazy loading en prioriteit

Niet elke afbeelding hoeft meteen te laden. Met loading="lazy" stelt de browser het laden van afbeeldingen buiten beeld uit tot de bezoeker in de buurt scrolt. Dat is ingebouwd in HTML; je hebt er geen script voor nodig.

Maar pas op: de belangrijkste afbeelding boven de vouw, zoals je hero, moet je juist niet lazy loaden. Dat vertraagt je LCP. Geef die afbeelding liever extra voorrang:

<img src="hero.avif" alt="…" width="1600" height="900" fetchpriority="high">

Vuistregel: alles boven de vouw laadt normaal, de LCP-afbeelding krijgt fetchpriority="high" en de rest krijgt loading="lazy". Een achtergrondafbeelding via CSS ontdekt de browser pas laat; gebruik voor een hero dus liever een echte <img>.

Zo pak je het aan: afbeeldingen optimaliseren in zeven stappen

1. Meet eerst. Gebruik PageSpeed Insights of de Lighthouse-test in je browser en kijk welke afbeeldingen als grootste kansen worden genoemd, en welk element je LCP is.
2. Verklein naar de werkelijke maat. Geen afbeelding hoeft breder te zijn dan de breedste weergave op je site, met een marge voor schermen met hoge pixeldichtheid.
3. Converteer naar AVIF of WebP, met een fallback via <picture> waar nodig. Veel CDN’s en WordPress-plugins kunnen dit automatisch.
4. Stel srcset en sizes in voor alle inhoudelijke afbeeldingen.
5. Voeg width en height toe aan elke <img>.
6. Bepaal de laadvolgorde: fetchpriority="high" voor de LCP-afbeelding, loading="lazy" voor de rest onder de vouw.
7. Schrijf goede alt-teksten. Beschrijf wat er te zien is en waarom het ertoe doet. Dat helpt toegankelijkheid én Google Afbeeldingen. Decoratieve afbeeldingen krijgen een lege alt="".

Stel: een keukenzaak in Apeldoorn heeft op de homepage een slider met vijf foto’s van elk een paar megabyte, allemaal direct geladen. Door de slider te vervangen door één sterke hero-afbeelding in AVIF met fetchpriority="high" en de overige foto’s lazy te laden, wordt de pagina een stuk lichter en verschijnt het belangrijkste beeld eerder.

Werk je met WordPress, dan staan er meer snelheidswinsten zonder pluginberg in WordPress sneller maken zonder tien plugins.

Veelgemaakte fouten

• De hero-afbeelding lazy loaden, waardoor de LCP juist slechter wordt.
• Afbeeldingen alleen met CSS kleiner maken, terwijl het bestand zelf enorm blijft.
• Te agressief comprimeren, waardoor productfoto’s vlekkerig worden. Controleer de kwaliteit altijd met het oog.
• Tekst in afbeeldingen zetten, wat niet leesbaar is voor zoekmachines en schermlezers en niet meeschaalt.
• Een optimalisatieplugin installeren en ervan uitgaan dat alles nu goed is, zonder na te meten.

Conclusie

Afbeeldingen optimaliseren is een van de meest lonende snelheidsverbeteringen voor een website, omdat het vaak om het grootste deel van het paginagewicht gaat. Kies AVIF of WebP, lever de juiste maat met srcset en sizes, zet altijd afmetingen en bepaal bewust wat eerst laadt. Dat verbetert je LCP en CLS, en daarmee de ervaring van elke bezoeker. Wil je dat structureel geregeld hebben, dan nemen we het mee in technische SEO, of bouwen we het er vanaf het begin in met maatwerk webdesign.

Wil je weten welke afbeeldingen jouw site vertragen? Laat je technische SEO doorlichten en pak de grootste winst als eerste.