DurfMakersWebsite bezoeken →
← Terug naar blog

Afbeeldingen optimaliseren website: praktisch stappenplan voor snelheid en SEO

2 oktober 2026
Afbeeldingen optimaliseren website: praktisch stappenplan voor snelheid en SEO

Kies WebP of AVIF waar het kan, comprimeer elke afbeelding voordat je hem uploadt, serveer meerdere formaten via srcset en zet altijd een alt-tekst neer. Dat zijn de vier acties die het meeste opleveren als je afbeeldingen optimaliseren voor je website aanpakt. Meet daarna met PageSpeed Insights of Lighthouse, want alleen zo weet je welke pagina's echt winst nodig hebben.

Kort samengevat:

  • Het gebruik van WebP of AVIF kan de bestandsgrootte van afbeeldingen aanzienlijk verkleinen, waardoor je laadtijden en laadtijdverschillen vermindert.
  • Het comprimeren van afbeeldingen vóór uploaden en het gebruiken van fallback voor niet-ondersteunde formaten optimaliseert je website zonder verlies van kwaliteit.
  • Het toepassen van srcset, lazy loading en vaste afmetingen vermindert layoutverschuivingen en verbetert de Core Web Vitals-score.
  • Het verwijderen van meta-informatie en het instellen van relevante alt-teksten verbetert SEO en toegankelijkheid.
  • Bij grote of snelgroeiende sites is uitbesteding aan specialisten vaak efficiënter dan zelf optimaliseren, zeker bij complexe workflows en automatisering.
Sneleenwebsitenodig
Een website die snel gevonden wordt
Durfmakers bouwt websites op maat die technisch vindbaar zijn in Google en AI-assistenten, zonder abonnement.
Bekijk de mogelijkheden

Inhoudsopgave

Waarom afbeeldingen optimaliseren belangrijk is voor snelheid, conversie en SEO

Afbeeldingen bepalen vaak het grootste deel van het gewicht van een pagina. Volgens Upside vormen ze op veel websites meer dan de helft van de totale paginagrootte, en dat gewicht is direct verantwoordelijk voor tragere laadtijden en lagere conversie.

Meer dan de helft van het paginagewicht komt van afbeeldingen, meldt Upside. Dat maakt beeldoptimalisatie de snelste route naar een merkbaar snellere site.

Google beoordeelt je site op drie kernmetingen: LCP (hoe snel het grootste zichtbare element laadt), CLS (hoeveel de pagina tijdens het laden verspringt) en INP (hoe snel de pagina reageert op een klik of tik). Een zware hero-afbeelding vertraagt de LCP, en een afbeelding zonder vaste afmetingen veroorzaakt CLS zodra hij alsnog inlaadt.

De winst van technische aanpassingen is meestal snel zichtbaar. Google meet de Core Web Vitals over een rollend venster van weken, maar Upside geeft aan dat PageSpeed-scores vaak al binnen dagen tot weken verbeteren nadat je de wijzigingen live zet.

Kies het juiste afbeeldingsformaat: JPEG, WebP, AVIF en fallbackstrategie

WebP is voor de meeste websites het beste standaardformaat. Het combineert brede ondersteuning in moderne browsers met een flinke besparing op bestandsgrootte ten opzichte van JPEG bij vergelijkbare kwaliteit, volgens een vergelijking van beeldformaten.

Wil je nog verder gaan, dan is AVIF de sterkste optie. Hetzelfde onderzoek laat zien dat AVIF aanzienlijk kan besparen ten opzichte van JPEG, wat het de meest efficiënte keuze maakt voor sites met veel fotografie. AVIF-ondersteuning groeit gestaag in browsers, en volgens Web bieden veel image-CDN's inmiddels automatische conversie naar AVIF, zodat je zelf geen aparte bestanden hoeft te beheren.

JPEG blijft nuttig als universele vangnet voor browsers die WebP of AVIF niet ondersteunen. PNG gebruik je alleen nog voor afbeeldingen met transparantie, zoals logo's of iconen op een gekleurde achtergrond: voor foto's is het bestand onnodig groot.

De praktische aanpak is een fallbackstrategie via het picture-element of srcset, waarbij de browser automatisch het beste formaat kiest dat hij aankan. Werk je met een CDN die on-the-fly converteert, dan hoef je zelf geen drie versies van elke afbeelding te uploaden: de conversie gebeurt automatisch op basis van de browser die de aanvraag doet.

Kies het juiste afbeeldingsformaat: JPEG, WebP, AVIF en fallbackstrategie — overview diagram

Compressie en exportinstellingen: praktische waarden en tools

De juiste compressie-instelling maakt het verschil tussen een afbeelding die er scherp uitziet en een bestand dat je pagina onnodig zwaar maakt. Markly adviseert een JPEG-kwaliteit van 75 tot 85 en een WebP-kwaliteit van 75 tot 80 als goede balans tussen scherpte en bestandsgrootte. Ga je lager dan die range, dan zie je op foto's met veel detail al snel blokjes of ruis.

Compressie en exportinstellingen: praktische waarden en tools — overview diagram

Verwijder daarnaast metadata zoals EXIF-gegevens uit je webversies. Camera's en telefoons slaan locatiegegevens, lensinstellingen en tijdstempels op in elk bestand, en die informatie heeft geen enkele functie op je website. Volgens Markly bespaart het verwijderen van die metadata vaak honderden kilobytes per afbeelding.

Voor de uitvoering heb je geen dure software nodig:

  • Squoosh is een gratis, browsergebaseerde tool voor het comprimeren en converteren van losse afbeeldingen.
  • ImageOptim werkt als lokale toepassing en comprimeert bestanden in bulk zonder zichtbaar kwaliteitsverlies.
  • Sharp is een programmeerbibliotheek waarmee ontwikkelaars compressie en formaatconversie automatiseren in hun workflow.
  • WordPress-gebruikers kunnen kiezen uit verschillende pluginscategorieën die compressie en formaatconversie automatisch toepassen bij elke upload.

Pro-tip: comprimeer altijd vóór je uploadt naar je CMS, niet erna: veel systemen slaan het origineel op naast de kleinere versie en verdubbelen zo je opslag.

Responsieve afbeeldingen in HTML: srcset, sizes en het picture-element

Een afbeelding die op elk scherm dezelfde bestandsgrootte laadt, verspilt data op mobiel en vertraagt je site onnodig. Met srcset en sizes geef je de browser meerdere versies van dezelfde afbeelding, zodat hij zelf de kleinste passende variant kiest.

  1. Geef in srcset elke variant op met zijn breedte, bijvoorbeeld foto-400w.jpg 400w, foto-800w.jpg 800w.
  2. Gebruik sizes om aan te geven hoe breed de afbeelding op het scherm zal worden weergegeven, zodat de browser de juiste bron kiest.
  3. Kies w-descriptors wanneer de weergavegrootte varieert per breakpoint, en x-descriptors wanneer je alleen rekening houdt met schermdichtheid.
  4. Zet altijd width en height op elke afbeelding, ook bij responsieve varianten, zodat de browser ruimte reserveert voordat het bestand geladen is.
  5. Gebruik het picture-element wanneer je niet alleen de grootte maar ook de compositie van de afbeelding wilt aanpassen per breakpoint, bijvoorbeeld een uitgesneden portret op mobiel tegenover een breed landschap op desktop.

MDN benadrukt dat width en height cruciaal zijn om layoutverschuiving te voorkomen: zonder die attributen springt de pagina zichtbaar op zodra de afbeelding binnenkomt, wat direct de CLS-score verpest.

Voor je hero-afbeelding, de afbeelding die waarschijnlijk je LCP bepaalt, voeg je een preload-instructie toe in de head van je pagina. Dat vertelt de browser om dat bestand als eerste op te halen, in plaats van pas nadat de rest van de pagina is verwerkt.

Pro-tip: test je srcset-instellingen altijd op een echt mobiel toestel, niet alleen in de devtools van je browser: mobiele netwerken reageren anders op meerdere gelijktijdige requests dan een desktopverbinding.

Lazy loading en laadtactieken zonder LCP te schaden

Lazy loading zorgt ervoor dat afbeeldingen pas laden op het moment dat een bezoeker ze daadwerkelijk in beeld krijgt. Zet loading="lazy" op elke afbeelding die onder de vouw staat, zoals productfoto's verder in een lijst of illustraties in een artikel.

Zet dat attribuut nooit op je hero-afbeelding of andere content die direct zichtbaar is bij het laden van de pagina. web.dev waarschuwt dat lazy loading de LCP juist kan schaden wanneer je het toepast op de afbeelding die de browser als grootste zichtbare element beschouwt: de browser wacht dan onnodig lang voordat hij het bestand ophaalt.

Reserveer ook bij lazy-loaded afbeeldingen altijd de ruimte met width en height, zodat de pagina niet verspringt zodra het bestand alsnog binnenkomt. Werk je met veel afbeeldingen onder elkaar, dan zijn lichte placeholders of een facade, een klein voorbeeldbeeld dat pas bij een klik het volledige element laadt, goede alternatieven voor content die niet direct nodig is.

SEO en toegankelijkheid: alt-teksten, bestandsnamen en structured data

Een alt-tekst beschrijft wat er op de afbeelding te zien is, voor mensen die een schermlezer gebruiken en voor zoekmachines die de afbeelding niet visueel kunnen beoordelen. MDN adviseert alt-teksten die relevant zijn voor de inhoud van de pagina en de context waarin de afbeelding staat.

Een paar praktische vuistregels maken dit werk snel:

  • Houd de alt-tekst onder de 125 tekens en beschrijf concreet wat er te zien is, niet wat de afbeelding "voorstelt".
  • Vermijd overbodige toevoegingen zoals "afbeelding van" of "foto van": schermlezers kondigen dat al aan.
  • Geef bestandsnamen drie tot vijf beschrijvende woorden gescheiden door koppeltekens, in kleine letters, zoals houten-eettafel-woonkamer.jpg.
  • Vermijd generieke namen zoals IMG_2043.jpg: die vertellen zoekmachines niets over de inhoud.

Voor productfoto's en redactionele beelden kan je daarnaast ImageObject-markup uit schema.org toevoegen, en OpenGraph-tags instellen zodat social media de juiste afbeelding tonen bij een gedeelde link.

Tools, plugins en workflow: van bewerking tot monitoring in productie

Een herhaalbare workflow voorkomt dat optimalisatie eenmalig werk blijft dat na een paar maanden weer wegzakt. Richt je toolset in op deze categorieën:

  • Editors zoals Squoosh voor losse bewerkingen en snelle formaatconversie.
  • Batch compressors zoals ImageOptim of Sharp voor grote hoeveelheden bestanden tegelijk.
  • Image-CDN's die automatisch converteren naar WebP of AVIF op basis van de browser die de aanvraag doet.
  • WordPress-plugins, waarvan er in de officiële pluginrepository verschillende beschikbaar zijn die compressie automatiseren bij elke upload.

Een CDN met automatische conversie is vooral zinvol voor sites met veel content of een team dat niet elke afbeelding handmatig wil bewerken: het lost het probleem structureel op in plaats van per bestand.

Imagify benadrukt dat optimalisatie een iteratief proces is: meet vóór je wijzigingen doorvoert, meet opnieuw na de livegang, en herhaal die cyclus in PageSpeed of Lighthouse telkens wanneer je nieuwe content toevoegt.

Praktijkchecklist en voorbeeldworkflow

Een korte, herhaalbare procedure voorkomt dat je blind optimaliseert zonder te weten of het werkt.

  1. Meet je startpunt met PageSpeed Insights en noteer de LCP, CLS en totale paginagrootte.
  2. Comprimeer en converteer je hero-afbeelding naar WebP of AVIF, en zet width en height vast.
  3. Voeg srcset en lazy loading toe aan de overige afbeeldingen op de pagina.
  4. Meet opnieuw en vergelijk de nieuwe LCP en paginagrootte met je startpunt.

Een structurele aanpak, eerst formaat en afmetingen, dan compressie, levert meer op dan losse ingrepen, stelt Imagify. Wie dit liever laat uitvoeren, kan het proces uitbesteden: Een voorbeeldige werkwijze is om de volledige website eerst af te maken op een testadres, inclusief geoptimaliseerde beelden, waarna de klant het resultaat beoordeelt voordat er een betaling volgt.

Zelf optimaliseren of uitbesteden: wanneer kies je wat

Zelf doen werkt goed als je een kleine site hebt, tijd hebt voor de technische details en die vier stappen zonder haast wilt doorlopen. Bij een grotere catalogus, een website die snel moet groeien of weinig technische kennis in huis, is uitbesteden vaak sneller. De volledige website wordt eerst afgebouwd op een testadres, met een ontwerp en teksten, waarna pas betaling plaatsvindt als de klant de site wil houden.

— Patrick

Website-optimalisatie uitbesteden aan Durfmakers

Welk formaat, welke compressie en welke srcset-opzet het beste passen bij een site, worden geregeld als onderdeel van een complete website. Elke site wordt eerst volledig gebouwd en getoond op een testadres, met beelden die geoptimaliseerd zijn voor snelheid en zoekmachines, waarna pas betaling plaatsvindt als de site wordt gehouden.

Sneleenwebsitenodig

Als de site niet bevalt, is er geen betaling. Bij tevredenheid volgt eigendom van broncode en ontwerp, zonder abonnement.

  • Start: een eenmalige prijs voor een onepager.
  • Compleet: een eenmalige prijs voor een site met meerdere pagina's.

Bekijk de werkwijze en start op de pagina van Durfmakers.

Bronnen

Voor wie zelf verder wil testen en verdiepen:

Veelgestelde vragen

Hoe verbeter ik de kwaliteit van afbeeldingen zonder groter bestand?

Gebruik een compressietool zoals Squoosh met een kwaliteitsinstelling tussen 75 en 85 voor JPEG of rond 75 tot 80 voor WebP, zoals Markly aanbeveelt. Kies daarnaast een scherp bronbestand: compressie kan een onscherpe foto niet verbeteren, alleen zijn bestandsgrootte verkleinen.

Hoe optimaliseer ik mijn website in het algemeen?

Begin met meten via PageSpeed Insights om te zien welke elementen je LCP, CLS en INP het meest beïnvloeden. Pak daarna de grootste winst eerst aan, meestal afbeeldingen en render-blokkerende scripts, en meet opnieuw om het effect te bevestigen.

Wat is het beste formaat voor afbeeldingen op een website?

WebP is voor de meeste sites de beste standaardkeuze, met een besparing van 25 tot 35% ten opzichte van JPEG bij vergelijkbare kwaliteit, volgens een vergelijking van beeldformaten.

Hoe vergroot ik een afbeelding zonder kwaliteitsverlies?

Een afbeelding vergroten zonder kwaliteitsverlies is technisch beperkt: je kunt geen detail toevoegen dat er niet al in het originele bestand zat. Begin daarom altijd met een bronbestand dat groot genoeg is voor de gewenste weergavegrootte, en gebruik srcset om per schermformaat de juiste variant te serveren in plaats van één bestand op te schalen.