Inhoudsopgave
TL;DR:
- Onvoldoende geoptimaliseerde grote afbeeldingen veroorzaken traag ladende websites en lagere Google-posities.
- Gebruik moderne formaten als AVIF en WebP, voeg juiste breedte- en hoogte-attributen toe, en pas lazy loading toe.
Grote afbeeldingen zijn een van de meest onderschatte oorzaken van een trage website. Ze kunnen 50 tot 65% van het totale paginagewicht uitmaken, terwijl ze met de juiste aanpak veel kleiner kunnen zijn zonder zichtbaar kwaliteitsverlies. Voor ondernemers betekent dit direct: bezoekers haken sneller af, en Google geeft je een lagere positie in de zoekresultaten. Afbeeldingen optimaliseren voor web is dan ook geen luxe, maar een slimme investering die je website sneller, beter vindbaar en professioneler maakt.
Belangrijkste inzichten
| Punt | Details |
|---|---|
| Kies het juiste formaat | AVIF en WebP besparen tot 55% bestandsgrootte ten opzichte van JPEG zonder kwaliteitsverlies. |
| Gebruik beschrijvende bestandsnamen | Duidelijke namen en alt-teksten verbeteren je SEO en toegankelijkheid direct. |
| Voorkom layout verschuiving | Voeg altijd breedte en hoogte attributen toe om CLS te vermijden en je Google-score te beschermen. |
| Laad slim met lazy loading | Gebruik lazy loading voor afbeeldingen onder de fold, maar nooit voor je hero-afbeelding. |
| Meet het resultaat | Controleer je voortgang via Google PageSpeed Insights en Core Web Vitals. |
Afbeeldingen optimaliseren voor web: voorbereiding
Voordat je aan de slag gaat, helpt het om de juiste tools en basiskennis bij de hand te hebben. De keuze van het bestandsformaat is daarin de eerste en meest bepalende stap.
Welk formaat kies je?
Moderne formaten maken een groot verschil. AVIF bespaart 40 tot 55% ten opzichte van JPEG, terwijl WebP nog altijd 25 tot 35% kleiner is. Gebruik het "` element om meerdere formaten aan te bieden met een fallback: AVIF als eerste keuze, WebP als tweede, en JPEG als laatste optie voor oudere browsers.
| Formaat | Besparing t.o.v. JPEG | Browserondersteuning | Aanbevolen gebruik |
|---|---|---|---|
| AVIF | 40 tot 55% | Modern | Primair formaat |
| WebP | 25 tot 35% | Breed | Fallback |
| JPEG | 0% | Universeel | Laatste optie |
| PNG | Variabel | Universeel | Transparantie |
Bestandsnamen en alt-teksten
Goede bestandsnamen en alt-teksten verbeteren je vindbaarheid in Google Images en verhogen de toegankelijkheid van je site. Gebruik beschrijvende namen zoals rode-leren-handtas-dames.jpg in plaats van IMG_4521.jpg. Alt-teksten houd je bij voorkeur onder de 125 tekens en schrijf je vanuit wat de afbeelding werkelijk toont.
Handige tools voor afbeeldingen compressie voor web:
- Squoosh (gratis, browsergebaseerd): ideaal voor handmatige compressie van losse afbeeldingen
- ShortPixel of Imagify: WordPress-plugins die automatisch comprimeren bij upload
- Cloudinary: geavanceerd platform voor automatische levering in het juiste formaat per browser
Pro-tip: Maak een vaste naamgevingsconventie voor je afbeeldingen, zoals [onderwerp]-[kleur]-[type].jpg. Dit bespaart je tijd en houdt je SEO consistent.
Stap voor stap afbeeldingen verkleinen en laden
Nu de voorbereiding klopt, is het tijd voor de uitvoering. Hieronder vind je een concreet stappenplan voor weboptimalisatie van afbeeldingen.
-
Bepaal de juiste afmetingen. Gebruik nooit een afbeelding van 3000 pixels breed als je hem op 800 pixels weergeeft. Verklein de afbeelding eerst naar de maximale weergavegrootte. Een goede vuistregel: maak een versie op 1x en een op 2x voor schermen met hoge resolutie.
-
Comprimeer zonder zichtbaar kwaliteitsverlies. Sla op als AVIF of WebP via Squoosh of een vergelijkbare tool. Stel de kwaliteitsinstelling in op 70 tot 85 procent. In de meeste gevallen zie je het verschil niet, maar de bestandsgrootte daalt fors.
-
Voeg breedte en hoogte toe aan je img-tag. Correcte dimensionering voorkomt verschuiving tijdens het laden (Cumulative Layout Shift). Google bestraft CLS zwaar in zijn rankingalgoritme. Schrijf altijd
width="800" height="600"direct in je HTML of template. -
Stel lazy loading in. Voeg
loading="lazy"toe aan alle afbeeldingen die buiten het eerste schermgebied vallen. 94% van de browsers ondersteunt dit native, dus je hebt geen extra JavaScript nodig. -
Behandel je hero-afbeelding anders. De grote afbeelding bovenaan je pagina mag nooit lazy worden geladen. Gebruik hier
loading="eager"en voegfetchpriority="high"toe. Dit vertelt de browser dat hij deze afbeelding als eerste moet ophalen, wat je LCP score direct verbetert. -
Maak je afbeeldingen responsief met srcset. Met het
srcsetattribuut laad je op mobiel een kleinere versie en op desktop een grotere. Voeg ook hetsizesattribuut toe. Zondersizesdownloadt de browser altijd de grootste variant, ook op een smal smartphonescherm. -
Upload en test. Gebruik Google PageSpeed Insights om te controleren of je verbeteringen effect hebben gehad.
Pro-tip: Maak bij een WordPress-site gebruik van een plugin als ShortPixel die automatisch AVIF en WebP versies aanmaakt bij iedere upload. Dit scheelt je handmatig werk en zorgt voor consistentie.
Wil je weten hoe afbeeldingen passen in de bredere strategie van sneller laden in WordPress? Dat gaat verder dan alleen plaatjes.
Veelgemaakte fouten bij beeldoptimalisatie
Zelfs ondernemers die actief bezig zijn met weboptimalisatie van afbeeldingen maken regelmatig dezelfde fouten. Dit zijn de meest voorkomende, en hoe je ze oplost.
-
Lazy loading op de hero-afbeelding. Dit is verreweg de kostbaarste fout. Lazy loading op een hero-afbeelding vertraagt de Largest Contentful Paint (LCP) aanzienlijk. De browser wacht namelijk met laden totdat de afbeelding in beeld komt, terwijl hij er al bovenin staat. Oplossing: gebruik altijd
loading="eager"enfetchpriority="high"voor hero-afbeeldingen. -
Ontbrekende breedte en hoogte attributen. Zonder deze attributen weet de browser niet hoeveel ruimte hij moet reserveren. Het gevolg is dat tekst en knoppen verschuiven terwijl de pagina laadt. Dit heet Cumulative Layout Shift (CLS) en wordt door Google zwaar meegewogen in de ranking.
-
Keyword stuffing in alt-teksten. Alt-teksten zijn bedoeld voor toegankelijkheid, niet voor SEO-trucjes. Schrijf
alt="rode leren handtas voor dames"en nietalt="handtas kopen goedkoop handtas leer handtas online". Google ziet dit als spam en het helpt je toegankelijkheid ook niet. -
Geen moderne formaten gebruiken. Wie nog steeds alleen JPEG of PNG uploadt, laat te veel bestandsgrootte onnodig staan. Gebruik het
<picture>element zodat moderne browsers AVIF krijgen, en oudere browsers gewoon JPEG.
Pro-tip: Controleer je bestaande pagina’s eens in Google PageSpeed Insights. Kijk specifiek naar de aanbevelingen ‘Serve images in next-gen formats’ en ‘Properly size images’. Die twee punten samen leveren vrijwel altijd de grootste winst op.
Prestaties meten na optimalisatie
Optimaliseren zonder meten is gokken. Nadat je afbeeldingen hebt verkleind en aangepast, wil je weten of het gewerkt heeft. LCP-prestaties zijn in 78% van websites sterk afhankelijk van de laadtijden van afbeeldingen. Dat maakt meten extra relevant.
De belangrijkste metrics en tools:
- Google PageSpeed Insights: geeft een score van 0 tot 100 en toont concrete aanbevelingen per afbeelding
- Core Web Vitals in Google Search Console: laat zien hoe je pagina’s presteren op LCP (laadtijd van het grootste element), CLS (layout verschuiving) en INP (interactiesnelheid)
- LCP: streef naar onder de 2,5 seconden; alles boven de 4 seconden is slecht
- CLS: streef naar onder de 0,1; hogere waarden wijzen op zichtbare verschuivingen
Voer PageSpeed Insights minimaal één keer per kwartaal uit op je belangrijkste pagina’s. Combineer dit met een goede monitoring van je laadsnelheid voor een volledig beeld van je websiteprestaties. WordPress-gebruikers kunnen ook werken met plugins als WP Rocket of Perfmatters die Core Web Vitals integreren in hun rapportage.
Mijn visie na jaren webprojecten
Ik zie het keer op keer: ondernemers besteden uren aan hun merkstory, hun teksten, hun kleuren, maar uploaden hun foto’s zonder er verder bij na te denken. Een foto van 4 MB, verkeerd formaat, geen alt-tekst. En dan vragen ze zich af waarom hun website slecht scoort in Google.
Wat ik heb geleerd: afbeeldingen zijn niet alleen een designkeuze. Ze zijn een technische beslissing met directe gevolgen voor hoe Google je site beoordeelt en hoe bezoekers je site ervaren. Een pagina die in drie seconden laadt, converteert meetbaar beter dan een die vijf seconden nodig heeft.
De misvatting die ik het meest tegenkom: “Mijn afbeeldingen zien er toch goed uit, dus het zal wel goed zijn.” Goed uitziend en goed geoptimaliseerd zijn twee totaal verschillende dingen. Een JPEG van hoge kwaliteit en een goed geoptimaliseerde AVIF kunnen er identiek uitzien, maar het verschil in bestandsgrootte is soms 70 procent. Dat verschil voel je direct in je laadtijd.
Mijn advies: begin met je hero-afbeelding. Zorg dat die altijd snel laadt, correct gesized is en het juiste formaat heeft. Daarna pak je de rest stap voor stap aan. Je hoeft het niet in één dag te doen, maar je moet het wel doen.
— Silvio
ZazouTotaal helpt je verder
Heb je alle stappen doorgenomen maar wil je dit liever niet zelf uitzoeken? Dat begrijpen we. Technische optimalisatie kost tijd en vraagt kennis die je als ondernemer niet altijd hebt. Bij ZazouTotaal nemen we dit volledig uit handen.
Van professionele SEO-optimalisatie tot de juiste technische instellingen voor snelle laadtijden: wij zorgen dat jouw website niet alleen mooi is, maar ook razendsnel laadt en goed vindbaar is in Google. Onze aanpak is compleet, van beeldoptimalisatie tot volledige websitestructuur. Je kunt zelfs zonder afspraak binnenlopen in onze winkel aan de Mierloseweg 337 in Helmond. Neem contact op en ontdek hoe we jou totaal ontzorgen.
Veelgestelde vragen
Wat is het beste formaat voor afbeeldingen op een website?
AVIF is het beste formaat voor webgebruik in 2026 omdat het 40 tot 55% kleiner is dan JPEG bij vergelijkbare kwaliteit. Gebruik het <picture> element met AVIF als eerste optie, WebP als fallback en JPEG voor oudere browsers.
Hoe verklein ik afbeeldingen zonder kwaliteitsverlies?
Gebruik een tool zoals Squoosh of een WordPress-plugin zoals ShortPixel om afbeeldingen te comprimeren naar AVIF of WebP met een kwaliteitsinstelling van 70 tot 85 procent. Het zichtbare verschil is minimaal, maar de bestandsgrootte daalt aanzienlijk.
Wat is lazy loading en wanneer gebruik ik het?
Lazy loading zorgt ervoor dat afbeeldingen pas worden geladen als ze in beeld komen. Voeg loading="lazy" toe aan alle afbeeldingen buiten het eerste schermgebied. Gebruik het nooit voor je hero-afbeelding: die laad je altijd met fetchpriority="high".
Waarom verschuift mijn pagina tijdens het laden?
Dat komt door ontbrekende breedte en hoogte attributen bij je afbeeldingen. Zonder deze gegevens weet de browser niet hoeveel ruimte hij moet reserveren. Voeg altijd width en height toe aan je <img> tags om Cumulative Layout Shift te voorkomen.
Hoe meet ik of mijn afbeeldingen goed geoptimaliseerd zijn?
Gebruik Google PageSpeed Insights voor directe feedback en Google Search Console voor structurele Core Web Vitals rapportage. Let specifiek op je LCP-score (doel: onder 2,5 seconden) en je CLS-score (doel: onder 0,1).