Afbeelding-SEO: alt-tekst, grootte en formaat

Afbeelding-SEO is het werk om de afbeeldingen op je pagina zowel begrijpelijk te maken voor zoekmachines als snel laadbaar voor de browser. Goed gedaan levert het dubbel op: extra organisch verkeer uit Google Afbeeldingen en een snellere pagina met betere Core Web Vitals. Op de meeste sites zijn afbeeldingen de zwaarste bron, en daarom is ze optimaliseren meestal de prestatiestap met het hoogste rendement.

Waarom afbeelding-SEO belangrijk is

Zoekmachines begrijpen de inhoud van een afbeelding niet zo duidelijk als een mens. Ze gebruiken de bestandsnaam, de alt-tekst en de omringende context om te raden waar de afbeelding over gaat. Tegelijk vormen afbeeldingen het grootste deel van het paginagewicht. Eén niet-geoptimaliseerde hero-afbeelding kan 2-3 MB zijn, terwijl een goed gecomprimeerde versie naar 150 KB zakt. Dat verschil beïnvloedt rechtstreeks zowel de wachttijd op mobiel als je LCP-score (Largest Contentful Paint).

• Vindbaarheid: goed gelabelde afbeeldingen verschijnen in Google Afbeeldingen en brengen extra bezoekers.
• Snelheid: kleinere bestanden laden sneller en verbeteren de Core Web Vitals, een rankingsignaal.
• Toegankelijkheid: alt-tekst zet de inhoud om in spraak voor bezoekers met een schermlezer.

Hoe schrijf je alt-tekst

Alt-tekst wordt getoond als een afbeelding niet laadt en wordt voorgelezen door schermlezers. Het doel is de afbeelding te beschrijven, niet om zoekwoorden te stapelen. Geef de inhoud in zijn context weer, in een korte, natuurlijke zin.

<!-- Slecht: leeg of spam -->
<img src="product.jpg" alt="">
<img src="product.jpg" alt="schoenen goedkoop schoenen hardloopschoenen kopen">

<!-- Goed: beschrijvend en natuurlijk -->
<img src="hardloopschoen.jpg"
     alt="Grijze hardloopschoen met blauwe zool, zijaanzicht">

Een paar praktische regels: laat alt="" voor puur decoratieve afbeeldingen zonder betekenis (schermlezers slaan ze over). Bevat een afbeelding tekst, zet die tekst dan in de alt. Begin niet met woorden als "afbeelding" of "foto"; de schermlezer kondigt al "afbeelding" aan. Gebruik een zoekwoord alleen als het de afbeelding echt beschrijft.

Het juiste formaat kiezen

De formaatkeuze bepaalt rechtstreeks de bestandsgrootte. Moderne formaten produceren bij dezelfde kwaliteit veel kleinere bestanden dan het oudere JPEG en PNG.

• WebP: vandaag je standaardkeuze. Voor foto's en graphics is het meestal 25-35% kleiner dan JPEG/PNG, en elke moderne browser ondersteunt het.
• AVIF: levert nog kleinere bestanden dan WebP, maar het encoderen is trager en de ondersteuning in oudere browsers is iets lager. De moeite waard voor cruciale afbeeldingen.
• SVG: ideaal voor logo's, iconen en eenvoudige graphics. Als vector blijft het scherp op elke resolutie en is het meestal piepklein.
• JPEG/PNG: handig als fallback voor compatibiliteit; gebruik PNG alleen als je transparantie nodig hebt.

Om één afbeelding in meerdere formaten aan te bieden en de browser het ondersteunde te laten kiezen, gebruik je <picture>:

<picture>
  <source srcset="cover.avif" type="image/avif">
  <source srcset="cover.webp" type="image/webp">
  <img src="cover.jpg" alt="Omslagafbeelding van het project" width="1200" height="630">
</picture>

Bestandsgrootte verkleinen

De grootste winst zit erin geen afbeelding groter aan te bieden dan nodig. Het heeft geen zin een bestand van 4000 pixels in een vlak van 400 pixels breed te plaatsen. Pas de afbeelding aan naar het gebruikte formaat en comprimeer daarna.

Op de commandoregel maak je snel WebP met cwebp:

# Een JPEG naar WebP omzetten met kwaliteit 80
cwebp -q 80 cover.jpg -o cover.webp

# Voor AVIF (libavif-tools)
avifenc --min 20 --max 30 cover.jpg cover.avif

Geef je de voorkeur aan een tool boven losse commando's, dan zijn Squoosh (draait in de browser), ImageOptim of sharp (Node.js) goede opties. Houd de kwaliteit rond 75-85; voor de meeste foto's is dat de sweet spot die onzichtbaar is voor het oog maar de grootte halveert.

Responsieve afbeeldingen en lazy loading

Om verschillende formaten aan verschillende schermen aan te bieden, gebruik je srcset en sizes; de browser downloadt het best passende bestand voor de viewport. Stel afbeeldingen buiten beeld uit met loading="lazy" zodat de eerste lading sneller is.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="500"
  loading="lazy"
  alt="Ontwerper aan het werk in de studio">

Een belangrijk detail: geef geen loading="lazy" aan afbeeldingen boven de vouw, en zeker niet aan de LCP-afbeelding; dat vertraagt je belangrijkste afbeelding en verslechtert de score. Voeg indien nodig fetchpriority="high" toe aan die afbeelding.

Bestandsnaam, sitemap en plaatsing

De bestandsnaam is een klein signaal, maar een gratis signaal: gebruik in plaats van DSC_0421.jpg beschrijvende namen met koppeltekens, zoals grijze-hardloopschoen.jpg. Geef de voorkeur aan ASCII en koppeltekens boven spaties en speciale tekens.

width en height op elke afbeelding zetten laat de browser ruimte reserveren en voorkomt het verspringen van de pagina, bekend als CLS (Cumulative Layout Shift). Heb je tot slot veel belangrijke afbeeldingen, dan helpt een afbeelding-sitemap — of afbeeldingsvermeldingen toevoegen aan je bestaande sitemap — Google ze sneller te ontdekken.

Veelgestelde vragen

Heeft elke afbeelding alt-tekst nodig?

Elke afbeelding die inhoud draagt, ja. Voor puur decoratieve afbeeldingen (een achtergrondpatroon, een scheidingslijn) laat je bewust alt="" staan zodat schermlezers ze overslaan. Het gaat er niet om het leeg te laten, maar om de betekenisloze afbeelding bewust te markeren.

Moet ik WebP of AVIF gebruiken?

In de praktijk is beide aanbieden het beste: in <picture> eerst AVIF, dan WebP, met een JPEG-fallback als laatste. Moet je één formaat kiezen, dan is WebP het meest evenwichtig: brede ondersteuning en goede compressie.

Beïnvloedt afbeelding-SEO de ranking echt?

Indirect maar krachtig. Hoewel afbeeldingen geen directe "rankingfactor" zijn, beïnvloeden ze de snelheid (Core Web Vitals) en het verkeer uit Google Afbeeldingen, die beide je totale zichtbaarheid verhogen.

Vertragen je afbeeldingen je pagina, of krijg je niet het verkeer uit Google Afbeeldingen dat je verdient? Laten we alle afbeeldingen van je site optimaliseren en alt-teksten en formaten samen opzetten. Neem contact op en we versnellen je pagina van begin tot eind.