Afbeeldingen Optimaliseren voor SEO: Complete Gids 2026

Je hebt weken aan je website gewerkt. Goede content geschreven, netjes opgebouwd, gepubliceerd. En toch staat hij nauwelijks in Google. De laadtijd is matig, bezoekers haken af voordat de pagina geladen is, en je PageSpeed-score is een aanfluiting. Herkenbaar?

In meer dan 80% van de gevallen die ik analyseer, zijn afbeeldingen de boosdoener. Niet de content, niet de server, niet de technische setup — maar gewoon: te grote, slecht genaamde, niet-geoptimaliseerde afbeeldingen die je pagina's naar beneden trekken.

Het goede nieuws: dit is een van de snelst op te lossen SEO-problemen die er is. In dit artikel leer je exact hoe je afbeeldingen optimaliseert voor zowel Google als je bezoekers — van bestandsformaat tot alt-tekst, van lazy loading tot structured data. Stap voor stap, met concrete acties die je vandaag nog kunt uitvoeren.

Waarom afbeeldingen zo'n grote impact hebben op SEO

Vergelijk direct:

Google kijkt bij het ranken van pagina's steeds meer naar gebruikerservaring. En gebruikerservaring begint bij snelheid. Trage pagina's ranken slechter, punt. Afbeeldingen zijn verantwoordelijk voor gemiddeld 60-70% van de totale paginagrootte — dat maakt ze de grootste factor in laadtijd.

Maar er is meer. Afbeeldingen beïnvloeden:

• Core Web Vitals — met name LCP (Largest Contentful Paint) en CLS (Cumulative Layout Shift), beide directe rankingfactoren
• Google Afbeeldingen zoekresultaten — een extra kanaal voor organisch verkeer dat de meeste site-eigenaren volledig negeren
• Bounce rate — trage pagina's zorgen voor meer wegklikkers, wat indirect je rankings schaadt
• Crawl budget — grote bestanden kosten Googlebot meer resources bij het crawlen
• Mobile rankings — Google indexeert mobile-first, en op mobiel is snelheid nóg kritischer

Als je lokaal ondernemer bent — kapper, fysiotherapeut, elektricien — dan telt dit dubbel. Lokale zoekopdrachten worden steeds vaker op mobiel gedaan. Een trage website betekent minder klanten, simpel. In mijn gids over fysiotherapeuten gevonden worden op Google is afbeeldingsoptimalisatie één van de snelste winsten die je kunt pakken.

Stap 1: Kies het juiste bestandsformaat

Dit is waar de meeste mensen al de mist ingaan. Ze uploaden alles als PNG of JPEG zonder na te denken welk formaat wanneer het beste werkt.

Formaat	Beste voor	Bestandsgrootte	Transparantie	Browser support
WebP	Bijna alles	25-35% kleiner dan JPEG	Ja	95%+ browsers
AVIF	Foto's, complexe afbeeldingen	50% kleiner dan JPEG	Ja	85%+ browsers
JPEG	Foto's (legacy fallback)	Groot	Nee	100%
PNG	Logo's met transparantie, screenshots met tekst	Zeer groot	Ja	100%
SVG	Logo's, iconen, illustraties	Klein (vectorformaat)	Ja	100%
GIF	Vermijd — gebruik liever MP4 voor animaties	Zeer groot	Beperkt	100%

Mijn aanbeveling voor 2026: Gebruik WebP als standaard voor alle foto's en afbeeldingen. Voeg AVIF toe als primaire optie met WebP als fallback voor browsers die AVIF nog niet ondersteunen. Gebruik SVG voor logo's en iconen waar mogelijk — een SVG logo is vaak slechts 2-5KB versus een PNG van 50-200KB.

Stap 2: Comprimeer zonder zichtbaar kwaliteitsverlies

Compressie is waar je de grootste winst behaalt. Een foto van 5MB kan je terugbrengen naar 150-200KB zonder dat een menselijk oog het verschil ziet. Dat is een factor 25 in bestandsgrootte — en een evenredige impact op laadtijd.

Er zijn twee soorten compressie:

• Lossy compressie: Gooit onzichtbare data weg. Resultaat: 50-80% kleiner bestand, nauwelijks zichtbaar kwaliteitsverlies bij kwaliteit 75-85%. Werkt uitstekend voor foto's.
• Lossless compressie: Vermindert bestandsgrootte zonder dataverlies. Minder agressief, maar veilig voor logo's en afbeeldingen met tekst of scherpe randen.

Gratis tools voor compressie:

• Squoosh (squoosh.app) — Google's eigen tool, ondersteunt WebP/AVIF, perfecte kwaliteitspreview naast het origineel
• TinyPNG / TinyJPG — makkelijk drag-and-drop, goed voor batch verwerking, gratis API beschikbaar
• ImageOptim (Mac) — lokale app, lossless compressie, geen data naar servers
• ShortPixel of Imagify (WordPress plugin) — automatische compressie bij upload, retroactief voor bestaande afbeeldingen

Mijn workflow: upload de afbeelding in Squoosh, stel in op WebP met kwaliteit 80, vergelijk de preview zorgvuldig, exporteer. Richtlijn: onder de 150KB per afbeelding voor normale pagina-afbeeldingen, maximaal 300KB voor hero-afbeeldingen.

Stap 3: Gebruik de juiste afmetingen

Een afbeelding van 4000×3000 pixels uploaden op een blog waarbij hij maximaal 800px breed wordt weergegeven: dit is de meest gemaakte fout. Je stuurt enorm veel onnodige data naar de browser, die vervolgens de afbeelding terugschaalt. Dat kost bandbreedte én processorkracht bij de bezoeker.

Bepaal vóór het uploaden wat de maximale weergavegrootte is en exporteer op die maat. Standaard richtlijnen:

• Blog featured image: 1200×630px (ook de ideale maat voor social sharing via Open Graph)
• Blog inline afbeelding: max 800px breed
• Thumbnail / miniatuur: 300-400px breed
• Hero banner: 1920px breed, maar agressief gecomprimeerd (target: onder 200KB)
• Productfoto: 800×800px (vierkant werkt het beste voor e-commerce)

Voor responsive websites gebruik je het srcset-attribuut om de browser de juiste maat te laten kiezen per apparaat. Op een telefoon van 375px breed heeft niemand een afbeelding van 1920px breed nodig. WordPress, Webflow en Next.js doen dit automatisch als je het goed instelt.

Stap 4: Alt-teksten schrijven die écht werken

Alt-tekst is het tekstalternatief voor een afbeelding als die niet laadt — en het is hoe Google "ziet" wat er op een afbeelding staat. Het is ook onmisbaar voor toegankelijkheid: screenreaders lezen alt-teksten voor aan visueel gehandicapte bezoekers.

Slechte alt-teksten die ik dagelijks tegenkom:

• alt="" — leeg (tenzij het een decoratieve afbeelding is, dan is dit correct)
• alt="afbeelding" — volledig nutteloos
• alt="IMG_20240312_084521" — letterlijk de camera-bestandsnaam
• alt="SEO optimalisatie SEO tips SEO Nederland" — keyword stuffing, Google straft dit af

Goede alt-teksten schrijf je zo:

• Beschrijf wat er te zien is, alsof je het uitlegt aan iemand die het niet kan zien
• Verwerk het zoekwoord van de pagina als dat natuurlijk past — nooit geforceerd
• Houd het onder de 125 tekens (screenreaders stoppen daar)
• Begin niet met "afbeelding van" of "foto van" — Google weet dat het een afbeelding is

Concreet voorbeeld voor een artikel over afbeeldingen optimaliseren:

• Slecht: alt="SEO afbeelding"
• Goed: alt="Vergelijking van JPEG versus WebP bestandsgrootte in de Squoosh tool"

Stap 5: Beschrijvende bestandsnamen

Voordat je een afbeelding uploadt, geef je het bestand een naam die Google kan lezen. Dit klinkt als een detail, maar het telt mee — zowel voor Google Afbeeldingen als voor de context die Google opbouwt over de inhoud van je pagina.

Regels voor goede bestandsnamen:

• Gebruik koppeltekens (-), geen underscores (_) of spaties
• Verwerk het hoofdzoekwoord of een concrete beschrijvende term
• Houd het kort en beschrijvend: max 5-6 woorden
• Gebruik alleen kleine letters, geen speciale tekens of accenten

Voorbeelden in de praktijk:

• Slecht: IMG_20240312_084521.jpg
• Slecht: screenshot-final-v3-GEBRUIK-DEZE.png
• Goed: webp-versus-jpeg-compressie-vergelijking.webp
• Goed: afbeeldingen-optimaliseren-seo-stappenplan.webp

Stap 6: Lazy loading implementeren

Lazy loading betekent dat afbeeldingen pas worden geladen als de bezoeker er naartoe scrolt. Afbeeldingen buiten het scherm worden uitgesteld. Dit versnelt de initiële laadtijd enorm — zeker op pagina's met veel afbeeldingen, zoals productoverzichten of blogpagina's.

Implementeren is simpel. Voeg het loading="lazy"-attribuut toe aan je <img> tags. Dit wordt ondersteund door alle moderne browsers — geen JavaScript framework nodig.

Uitzondering: de hero-afbeelding of het grootste element boven de vouw (de eerste sectie die direct zichtbaar is) geef je juist geen lazy loading. Die moet zo snel mogelijk laden voor een goede LCP-score. Geef die afbeelding loading="eager" of fetchpriority="high".

Stap 7: Responsive afbeeldingen met srcset

Een bezoeker op een 4K scherm heeft baat bij een hoge resolutie afbeelding. Een bezoeker op een iPhone 12 heeft genoeg aan 375px breed. Als je dezelfde grote afbeelding naar beide stuurt, verspil je bandbreedte en vertraag je de mobiele bezoeker onnodig.

Met het srcset-attribuut geef je de browser meerdere maten aan en laat je hem de optimale kiezen:

<img
  src="afbeelding-800.webp"
  srcset="afbeelding-400.webp 400w,
          afbeelding-800.webp 800w,
          afbeelding-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Beschrijving van de afbeelding"
  loading="lazy"
/>

Je hoeft dit gelukkig niet altijd handmatig te doen. WordPress genereert bij upload automatisch meerdere formaten en voegt srcset toe. Next.js <Image> doet het ook automatisch. Webflow en de meeste moderne websitebouwers ook. Controleer wel of het daadwerkelijk actief is — soms staat het uitgeschakeld in de instellingen.

Stap 8: Geef afbeeldingen een titel en context

Naast alt-tekst en bestandsnaam heeft Google nog meer signalen om te begrijpen waar een afbeelding over gaat:

• Title-attribuut — optioneel, maar geeft een tooltip bij hover. Gebruik spaarzaam, niet als alt-tekst-duplicaat.
• Omliggende tekst — Google leest de tekst rondom een afbeelding om de context te begrijpen. Een foto van een elektricien die een zekeringkast repareert rankt beter voor "elektricien zekeringkast" als die woorden ook in de omliggende alinea staan.
• Paginacontext — Google koppelt afbeeldingen aan de pagina waarop ze staan. Een goed geoptimaliseerde pagina over "afbeeldingen optimaliseren voor SEO" tilt al je afbeeldingen op die pagina mee omhoog in Google Afbeeldingen.
• Open Graph en Twitter Card tags — bepalen welke afbeelding wordt getoond bij het delen op social media. Stel altijd een og:image in met de aanbevolen 1200×630px maat.

Stap 9: Structured data voor afbeeldingen

Voor specifieke use cases kun je structured data toevoegen om afbeeldingen rijker te laten verschijnen in zoekresultaten. Dit is relevant voor:

• Recepten — de afbeelding verschijnt in rich results
• Producten — productfoto's met prijs in Google Shopping
• Artikelen — de featured image verschijnt als thumbnail in Top Stories
• Video's — thumbnails in videokarussels

Voor de meeste website-eigenaren is dit geen prioriteit. Focus eerst op de stappen 1-8. Structured data is de volgende stap als je al goed scoort en meer uit je bestaande rankings wilt halen.

De meest gemaakte fouten bij afbeeldingsoptimalisatie

Na honderden website-audits zie ik steeds dezelfde fouten terugkomen. Hier zijn de meest voorkomende, met hoe je ze vermijdt:

Fout 1: Hero-afbeelding als lazy load instellen

Dit is een klassieke fout die ik zelfs bij grote websites zie. Je hero-afbeelding is vrijwel altijd het LCP-element — het grootste zichtbare element als de pagina laadt. Als je daar loading="lazy" opzet, vertrag je actief je eigen LCP-score. Gebruik fetchpriority="high" voor de hero en lazy loading voor alles eronder.

Fout 2: PNG gebruiken voor foto's

PNG is een lossless formaat — ideaal voor logo's met transparantie of screenshots met tekst. Maar voor foto's? Een PNG van een gewone foto is 5-10x groter dan dezelfde foto als WebP. Ik zie dit nog steeds bij 40% van de sites die ik analyseer. Zet alle foto's om naar WebP.

Fout 3: Alt-teksten als keyword stuffing gebruiken

Alt-teksten zijn bedoeld om een afbeelding te beschrijven, niet als verborgen plek voor je zoekwoorden. "Kapper Amsterdam kapper Jordaan kapper goedkoop" als alt-tekst is spam, en Google herkent het tegenwoordig prima. Beschrijf gewoon wat er op de afbeelding staat.

Fout 4: Bestaande afbeeldingen nooit opschonen

Websites accumuleren over jaren tientallen tot honderden niet-gebruikte afbeeldingen in de media library. Die worden gecrawld door Google, kosten opslagruimte, en vertragen backups. Doe eens per jaar een opschoonronde. In WordPress helpt de plugin "Media Cleaner" daarmee.

Fout 5: Geen dimensies opgeven in HTML

Als je geen width en height opgeeft in je <img> tag, weet de browser pas hoe groot de afbeelding is als die geladen is. Tot die tijd reserveert hij geen ruimte — wat zorgt voor CLS (Cumulative Layout Shift): de pagina springt plotseling als de afbeelding binnenkomt. Dit kost je Core Web Vitals-punten. Geef altijd breedte en hoogte mee, ook als de afbeelding responsief is.

Tools voor een complete afbeeldings-audit

Wil je weten hoe je huidige website ervoor staat? Gebruik deze tools:

• Google PageSpeed Insights — gratis, toont exact welke afbeeldingen te groot zijn, welke lazy loaded kunnen worden, en welke conversie naar WebP aanbevolen wordt
• GTmetrix — gedetailleerdere waterfall analyse, toont per afbeelding de laadtijd en grootte
• WebPageTest — technische diepgaande analyse voor developers
• Screaming Frog — crawlt je hele site en rapporteert over ontbrekende alt-teksten, te grote bestanden, broken image links
• Chrome DevTools → Network tab — filter op "Img", sorteer op grootte, en je ziet direct welke afbeeldingen de meeste schade aanrichten

Mijn aanpak bij een nieuwe audit: start met PageSpeed Insights op de homepage en één blogpost. Fix de top 3 problemen die je ziet. Meet opnieuw. Herhaal voor de belangrijkste pagina's. Je hoeft niet alles in één keer perfect te maken.

Hoeveel impact heeft dit echt op je rankings?

Eerlijk antwoord: het hangt af van hoe slecht je huidige situatie is. Als je nu een PageSpeed-score van 30-40 hebt door zware afbeeldingen, kun je na optimalisatie naar 70-85 gaan. Dat is een significante verbetering die Google ook ziet.

In de praktijk zie ik na een afbeeldingsoptimalisatie:

• Laadtijdverbetering van 2-5 seconden op mobiel (enorm)
• LCP-verbetering van "slecht" naar "goed" of "gemiddeld"
• Rankings-verbetering van 3-8 posities voor pagina's die al redelijk scoorden
• Bounce rate daling van 5-15% (bezoekers haken minder snel af)

Rankings-verbetering is niet gegarandeerd en hangt af van veel factoren. Maar snelheidsverbetering en betere gebruikerservaring zijn directe, meetbare resultaten die je binnen 24 uur na implementatie al ziet in je PageSpeed-score.

Als je wil weten wat afbeeldingsoptimalisatie kost als onderdeel van een complete website-aanpak, lees dan mijn vergelijking van website laten maken kosten in 2026 — daarin ga ik ook in op wat je wel en niet zelf kunt doen.

Automatiseren voor WordPress-gebruikers

Als je WordPress gebruikt, hoef je dit niet allemaal handmatig te doen. De combinatie van een goede plugin en goede hosting neemt het meeste werk over:

• ShortPixel Adaptive Images — converteert automatisch naar WebP/AVIF, past maten aan per apparaat, lazy loads alles behalve de hero. Gratis tot 100 afbeeldingen/maand.
• Imagify — vergelijkbaar met ShortPixel, iets gebruiksvriendelijker interface. Gratis tier beschikbaar.
• Smush — onderdeel van het WPMUDev-pakket, ook gratis basisversie beschikbaar.
• WP Rocket — niet specifiek voor afbeeldingen, maar regelt lazy loading, preload van kritieke afbeeldingen, en defer van niet-kritieke resources automatisch.

Mijn advies: installeer ShortPixel of Imagify, activeer automatische WebP-conversie en lazy loading, en laat het daarna zijn werk doen. Dit is laaghangend fruit dat je één keer instelt en dan vergeet.

Prioriteitenlijst: begin hier als je weinig tijd hebt

Als je één ding doet na het lezen van dit artikel: open Google PageSpeed Insights, voer je URL in, en kijk naar de sectie "Afbeeldingen met een juist formaat aanbieden" en "Afbeeldingen coderen op efficiënte wijze". Die twee secties geven je direct de concreetste actiepunten.

Als je meer tijd hebt, pak het in deze volgorde aan:

1. Converteer alle JPEG/PNG afbeeldingen op je 10 best bezochte pagina's naar WebP
2. Comprimeer de hero-afbeelding op elke pagina tot onder de 200KB
3. Voeg loading="lazy" toe aan alle afbeeldingen behalve de hero
4. Controleer en verbeter alt-teksten op je beste rankende pagina's
5. Hernoem nieuw te uploaden afbeeldingen met beschrijvende namen
6. Stel voor alle bestaande afbeeldingen de juiste width en height in

FAQ: Afbeeldingen Optimaliseren voor SEO

Hoe groot mag een afbeelding maximaal zijn voor SEO?

Er is geen absolute grens, maar als richtlijn: normale pagina-afbeeldingen onder de 150KB, hero-afbeeldingen onder de 200-300KB. In de praktijk zie ik dat sites met afbeeldingen groter dan 500KB vrijwel altijd een PageSpeed-score onder de 60 hebben. Gebruik WebP en compressie van 75-85% kwaliteit om hieronder te blijven.

Is WebP of AVIF beter voor SEO?

AVIF is technisch gezien beter — tot 50% kleiner dan JPEG versus 25-35% voor WebP. Maar browser support voor AVIF is nog niet 100%. De praktische aanbeveling: bied AVIF aan als primaire optie met WebP als fallback in een <picture> element. Zo profiteer je van AVIF waar mogelijk en val je terug op WebP waar nodig.

Helpt het optimaliseren van alt-teksten echt voor mijn rankings?

Ja, maar het effect is indirect. Alt-teksten helpen Google begrijpen wat er op een afbeelding staat, wat bijdraagt aan de algehele relevantie van je pagina voor een zoekterm. Bovendien ranken je afbeeldingen zelf ook in Google Afbeeldingen — een extra verkeersbron. En toegankelijkheid is een factor die Google meeneemt in gebruikerservaringssignalen.

Moet ik alle oude afbeeldingen op mijn site opnieuw uploaden?

Niet per se opnieuw uploaden, maar wel optimaliseren. Voor WordPress: gebruik een plugin zoals ShortPixel die bestaande afbeeldingen retroactief converteert en comprimeert zonder ze te vervangen. Je hoeft de media library niet te legen. Voor handmatige sites: vervang de zwaarste afbeeldingen op je best bezochte pagina's — dat geeft de meeste impact voor de minste moeite.

Wat is het verschil tussen LCP en CLS, en hoe beïnvloeden afbeeldingen beide?

LCP (Largest Contentful Paint) meet hoe snel het grootste zichtbare element laadt — vrijwel altijd een afbeelding. Een goede score is onder de 2,5 seconden. CLS (Cumulative Layout Shift) meet hoeveel de pagina-indeling verschuift tijdens het laden. Als je afbeeldingen geen vaste breedte/hoogte hebben, reserveert de browser geen ruimte vooraf en springt de content zodra de afbeelding laadt — dat is CLS. Beide zijn directe Google-rankingfactoren.

Mijn site is gebouwd in Webflow/Wix/Squarespace — regelen die de optimalisatie automatisch?

Deels. Webflow en Wix converteren automatisch naar WebP en passen maten responsive aan. Maar ze doen niet alles perfect: alt-teksten moet je zelf invullen, bestandsnamen kun je beter voor het uploaden instellen, en de prioritering van de hero-afbeelding kan handmatige aandacht vereisen. Controleer met PageSpeed Insights of er nog verbeterpunten zijn.

Hoe lang duurt het voordat Google de verbeteringen oppikt?

Google crawlt je pagina's regelmatig — voor actieve sites doorgaans elke paar dagen tot één week. Na een recrawl worden de snelheidsverbeteringen meegenomen. Rankings-impact zie je doorgaans binnen 2-6 weken na implementatie, afhankelijk van hoe concurrerend je niche is. Core Web Vitals-rapporten in Search Console worden maandelijks bijgewerkt.

Is er een verschil in aanpak voor e-commerce versus blogpagina's?

Ja. Productpagina's met meerdere productfoto's hebben baat bij agressieve lazy loading, want bezoekers zien pas de extra foto's als ze erdoor scrollen. Gebruik ook de srcset met meerdere resoluties. Blogpagina's hebben vaak één grote featured image bovenaan — dat is je LCP-element, geef die altijd prioriteit. Lijstpagina's met thumbnails zijn kandidaten voor webP-conversie én lazy loading op alle thumbnails behalve de eerste rij.