Afbeeldingen optimaliseren: van Core Web Vitals tot AI-herkenning
Waarom afbeeldingsoptimalisatie meer is dan bestandsformaat kiezen
Ik moet een bekentenis doen. Jarenlang dacht ik bij afbeeldingsoptimalisatie alleen aan bestandsgrootte. WebP in plaats van JPEG, compressie opschroeven, afmetingen aanpassen. Klaar. Door naar het volgende probleem.
Maar ik had het maar half begrepen.
Afbeeldingen communiceren ook context. Aan zoekmachines, aan schermlezers, aan AI-modellen. Hoe je die context meegeeft (alt-teksten, structured data, bestandsnamen) is minstens zo belangrijk als de bestandsgrootte. Misschien wel belangrijker.
Bij Kobalt zien we regelmatig websites waarbij de afbeeldingen technisch prima zijn: kleine bestanden, WebP-formaat, lazy loading op de juiste plekken. Maar de alt-teksten? "afbeelding1.webp". Of helemaal leeg. Voor een menselijke bezoeker maakt dat weinig uit. Voor een AI-crawler is de alt-tekst vaak de enige manier om te begrijpen wat er op die afbeelding staat.
Moderne formaten: WebP en AVIF
Even de basis. Want ik kom nog steeds sites tegen die volledige PNG's van 3 MB serveren. In 2026. Ik word er een beetje moedeloos van.
- WebP: de moderne standaard. Breed ondersteund, typisch 25 tot 35 procent kleiner dan JPEG bij vergelijkbare kwaliteit.
- AVIF: nog kleiner dan WebP (20 tot 30 procent), maar de encoder is langzamer en sommige oudere browsers worstelen ermee.
- SVG: voor iconen, logo's en illustraties. Oneindig schaalbaar en klein. Gebruik dit waar je kunt.
- Gebruik het `
` element: AVIF als primair, WebP als fallback, JPEG als veiligheidsnet. Zo dek je alles af.
Converteer afbeeldingen nooit handmatig als je meer dan tien pagina's hebt. Gebruik een image CDN (Cloudinary, imgix) of een server-side transformatieservice. Die converteren automatisch naar het beste formaat op basis van de browser. Jij hoeft er niet meer over na te denken.
Largest Contentful Paint: de afbeelding die ertoe doet
LCP is de Core Web Vital die het meest door afbeeldingen wordt beinvloed. Het meet hoe lang het duurt voor het grootste zichtbare element in de viewport te laden. Op de meeste sites is dat een hero-afbeelding.
En hier maak ik me soms zorgen. Want ik zie sites die hun hero-afbeelding lazy loaden. De afbeelding die het meest bepalend is voor de snelheidservaring van de bezoeker. Die laden ze als laatste. Dat is alsof je de ingang van je winkel pas opent als de klant al een kwartier voor de deur staat.
- Preload je LCP-afbeelding. Een `` in de `` geeft de browser een vroeg signaal.
- Gebruik absoluut geen lazy loading op de LCP-afbeelding. Dit is de meest voorkomende fout die ik tegenkom.
- Sla de LCP-afbeelding op in een CDN dicht bij je bezoekers.
- Geef altijd `width` en `height` attributen mee in de HTML. Voorkomt Cumulative Layout Shift terwijl de afbeelding laadt.
Alt-teksten als brug naar AI-begrip
Hier wordt het echt interessant. Alt-teksten zijn oorspronkelijk bedoeld voor toegankelijkheid. Schermlezers lezen ze voor. Maar ze spelen ook een cruciale rol in hoe AI-modellen afbeeldingen begrijpen.
"Foto van laptop" is een slechte alt-tekst. "Laravel Artisan-commando dat database-migrations uitvoert in de terminal" is een goede. Dat verschil is niet alleen relevant voor blinde bezoekers. Het is de context die een AI-crawler gebruikt om te begrijpen wat jouw pagina behandelt.
Decoratieve afbeeldingen (achtergrondtexturen, sierlijnen) krijgen een leeg alt-attribuut: `alt=""`. Dat vertelt schermlezers en crawlers expliciet: deze afbeelding draagt geen inhoudelijke informatie. Dat is net zo belangrijk als een goede alt-tekst bij een inhoudelijke afbeelding.
Structured data: maak het expliciet
Schema.org biedt ImageObject-schema waarmee je afbeeldingen kunt annoteren. Wat staat erop? Wie heeft de rechten? Hoe past de afbeelding in de context van de pagina? Voor producten, recepten en artikelen is een bijbehorende afbeelding zelfs vereist voor Google's Rich Results.
Een B2B-klant in de machinebouw had producten met uitgebreide technische afbeeldingen maar nul alt-teksten. Na het toevoegen van beschrijvende alt-teksten en ImageObject-schema: 40% meer afbeeldingsverkeer via Google Images binnen zes weken. En Perplexity begon hun productpagina's te citeren bij technische vragen. Dat is de kracht van context.
Afbeeldingen zijn geen decoratie. Ze zijn inhoud. Behandel ze ook zo: met beschrijvende alt-teksten, correct formaat, de juiste afmetingen en structured data. Benieuwd hoe jouw afbeeldingen scoren? Doe de gratis AEO-scan en zie het direct.
Veelgestelde vragen
Moet ik al mijn bestaande JPEG-afbeeldingen omzetten naar WebP?
Ja, als je serieus bent over performance. Maar doe het niet handmatig. Gebruik een image CDN of geautomatiseerde tool om het in bulk te doen. Prioriteer de afbeeldingen op je belangrijkste pagina's die het zwaarst zijn.
Hoe lang moet een alt-tekst zijn?
Een tot twee zinnen die uitleggen wat er op de afbeelding staat en welke context die heeft. Langer dan 125 tekens wordt door sommige schermlezers afgekapt. Korter dan tien tekens is zelden beschrijvend genoeg. Vind de balans. Het is geen wetenschap, het is gezond verstand.
Helpt een image sitemap voor AI-zichtbaarheid?
Een image sitemap helpt Google om afbeeldingen te ontdekken die niet makkelijk via reguliere crawling te vinden zijn. Voor AI-modellen is het directe effect minder duidelijk, maar het helpt indirect: Google indexeert de afbeeldingen beter en neemt ze als context op in zijn kennisbasis.
Hoe scoort jouw website op AI-gereedheid?
Krijg binnen 30 seconden je AEO-score en ontdek wat je kunt verbeteren.
