Afbeeldingen optimaliseren voor SEO: de complete gids

Waarom is image SEO belangrijk?

Image SEO is cruciaal om drie redenen: verkeer, snelheid, en gebruikerservaring. Laten we elk punt bekijken.

1. Direct verkeer uit Google Afbeeldingen

Google Afbeeldingen is de op één na meest gebruikte zoekmachine ter wereld, na de reguliere Google-zoekopdrachten. Google verwerkt maandelijks meer dan 20 miljard visuele zoekopdrachten via Google Lens alleen al.^[1]

Als je afbeeldingen goed geoptimaliseerd zijn, kunnen ze:

• Direct verschijnen in de Google Afbeeldingen zoekresultaten
• Getoond worden in de "Afbeeldingen"-carousel bovenaan reguliere zoekresultaten
• Gevonden worden via visuele zoekopdrachten (Google Lens, Circle to Search)

2. Invloed op paginasnelheid en Core Web Vitals

Afbeeldingen vormen gemiddeld 50-70% van het totale paginagewicht.^[3] Ongeoptimaliseerde afbeeldingen vertragen je website direct, wat leidt tot:

• Hogere Largest Contentful Paint (LCP) scores — slecht voor Core Web Vitals
• Langere laadtijden op mobiele apparaten
• Hogere bounce rates (bezoekers verlaten je site)

3. Toegankelijkheid en gebruikerservaring

Alt-teksten zijn niet alleen voor SEO. Ze zijn essentieel voor webtoegankelijkheid:

• Schermlezers lezen alt-teksten voor aan slechtziende bezoekers
• Alt-teksten verschijnen als afbeeldingen niet laden
• Zoekmachines gebruiken alt-teksten om afbeeldingsinhoud te begrijpen

In Nederland gebruiken naar schatting 300.000 mensen een schermlezer of andere hulptechnologie.^[4] Goede alt-teksten maken je website toegankelijk voor iedereen.

1. Bestandsnamen optimaliseren

De bestandsnaam is het eerste wat Google leest om te begrijpen wat er op een afbeelding staat. Dit is je eerste kans om relevantie te communiceren.

Waarom bestandsnamen ertoe doen

Google kan afbeeldingen niet "zien" zoals mensen dat kunnen. De zoekmachine analyseert de bestandsnaam, alt-tekst, omringende tekst, en paginacontext om te bepalen wat er op een afbeelding staat.^[5]

Slechte bestandsnamen:

• IMG_20241208_143022.jpg
• DSC00042.jpg
• Schermafbeelding 2024-12-08.png
• foto (1).jpg
• WhatsApp Image 2024-12-08.jpeg

Goede bestandsnamen:

• wordpress-dashboard-homepage.jpg
• amsterdam-grachtenpand-zonsondergang.jpg
• webhosting-server-rack.jpg
• google-search-console-prestaties.png

De basisregels voor bestandsnamen

Streepjes vs. underscores

Dit is cruciaal: gebruik streepjes (-), geen underscores (_). Google leest streepjes als woordscheidingen, terwijl underscores worden genegeerd.

Dit wordt bevestigd door Google's eigen stijlgids voor documentatie.^[6]

Bestandsnamen wijzigen in WordPress

WordPress behoudt de originele bestandsnaam na upload. Je moet afbeeldingen hernoemen vóór je ze uploadt. De workflow is:

1. Maak of download de afbeelding
2. Hernoem het bestand op je computer
3. Upload naar WordPress

Wil je bestaande bestandsnamen wijzigen? Gebruik een plugin zoals Media File Renamer. Let op: dit kan bestaande links naar afbeeldingen breken.

2. Alt-tekst schrijven die werkt

De alt-tekst (alternatieve tekst) is waarschijnlijk het belangrijkste element voor image SEO. Het is wat schermlezers voorlezen én wat Google gebruikt om afbeeldingsinhoud te begrijpen.

Wat is alt-tekst?

Alt-tekst is een HTMLKeurigOnline zegtHTMLHTML is de programmeertaal voor het maken van webpagina’s.-attribuut dat een tekstuele beschrijving van een afbeelding geeft:

<img src="wordpress-dashboard.jpg" alt="WordPress dashboard met homepage-instellingen en widget-configuratie">

Dit attribuut heeft drie functies:

• Toegankelijkheid: Schermlezers lezen deze tekst voor
• Fallback: Tekst verschijnt als afbeelding niet laadt
• SEO: Google gebruikt dit om afbeeldingsinhoud te begrijpen

De perfecte alt-tekst schrijven

Voorbeelden van goede alt-teksten

Wanneer géén alt-tekst gebruiken

Decoratieve afbeeldingen die geen inhoudelijke waarde toevoegen, moeten een lege alt-tekst hebben:

<!-- Decoratieve afbeelding -->
<img src="decorative-line.png" alt="">

<!-- Inhoudelijke afbeelding -->
<img src="wordpress-dashboard.jpg" alt="WordPress dashboard met homepage-instellingen">

Volgens de W3C richtlijnen voor decoratieve afbeeldingen moeten puur visuele elementen (zoals lijnen, schaduwen, of achtergrondpatronen) een lege alt="" krijgen zodat schermlezers ze overslaan.^[7]

Alt-tekst vs. title-attribuut

Dit zijn twee verschillende attributen:

• Alt-tekst (alt): Essentieel voor SEO en toegankelijkheid. Wordt voorgelezen door schermlezers.
• Title-attribuut (title): Verschijnt als tooltip bij hover. Minder belangrijk voor SEO.

<img
    src="wordpress-dashboard.jpg"
    alt="WordPress dashboard met homepage-instellingen"
    title="Klik om te vergroten"
>

Focus je tijd op de alt-tekst — het title-attribuut is optioneel en heeft minimale SEO-waarde.

3. Het juiste bestandsformaat kiezen

Het kiezen van het juiste bestandsformaat kan je afbeeldingsgrootte met 50% of meer verminderen, zonder zichtbaar kwaliteitsverlies.

Overzicht van bestandsformaten

WebP: de nieuwe standaard

WebP is ontwikkeld door Google en biedt aanzienlijk betere compressie dan JPEG en PNG:

• 25-34% kleiner dan vergelijkbare JPEG-afbeeldingen
• 26% kleiner dan PNG bij lossless compressie
• Ondersteunt zowel lossy als lossless compressie
• Ondersteunt transparantie (zoals PNG)
• Ondersteunt animatie (zoals GIF)

Browserondersteuning voor WebP is inmiddels 97%+ wereldwijd, inclusief alle moderne browsers.^[8]

Picture-element voor fallbacks

Voor maximale browsercompatibiliteit gebruik je het <picture>-element:

<picture>
    <source srcset="afbeelding.avif" type="image/avif">
    <source srcset="afbeelding.webp" type="image/webp">
    <img src="afbeelding.jpg" alt="Beschrijvende alt-tekst">
</picture>

De browser kiest automatisch het beste ondersteunde formaat (AVIF → WebPKeurigOnline zegtWebPWebP is een modern afbeeldingsformaat dat 25-35% kleiner is dan JPEG en PNG. → JPEG).

SVG voor iconen en logo's

SVG (Scalable Vector Graphics) is ideaal voor:

• Logo's
• Iconen
• Illustraties met egale kleuren
• Grafieken en diagrammen

SVG-bestanden zijn vaak slechts enkele kilobytes groot en blijven scherp op elk schermformaat — van telefoon tot 4K-monitor.

4. Afbeeldingen comprimeren

Compressie is waarschijnlijk de snelste manier om je paginasnelheid te verbeteren. Met de juiste tools kun je afbeeldingsgrootte met 50-80% verminderen zonder zichtbaar kwaliteitsverlies.

Lossy vs. lossless compressie

• Lossy compressie: Verwijdert permanent beelddata voor kleinere bestanden. Ideaal voor foto's.
• Lossless compressie: Behoudt alle beelddata, kleinere besparingen. Ideaal voor graphics/logo's.

Aanbevolen compressietools

Tool	Type	Prijs	Bijzonderheden
TinyPNG	Online / APIKeurigOnline zegtAPIEen API (Application Programming Interface) is een set regels en protocollen waarmee softwareapplicaties met elkaar kunnen communiceren en gegevens uitwisselen.	Gratis (20 afb/maand) of betaald	Uitstekende kwaliteit, WebP-ondersteuning
Squoosh	Online	Gratis	Google-tool, geavanceerde opties, AVIF
ShortPixel	WordPress plugin	Freemium	Automatische optimalisatie, WebP-conversie
Imagify	WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. plugin	Freemium	Van WP Rocket-makers, bulk-optimalisatie
ImageOptim	Desktop (Mac)	Gratis	Drag-and-drop, lossless + lossy

Optimale bestandsgrootte

WordPress-plugins voor automatische compressie

De beste WordPress-plugins voor afbeeldingsoptimalisatie zijn:

1. Imagify — Van de makers van WP Rocket, uitstekende balans tussen kwaliteit en compressie
2. ShortPixel — Genereuze gratis tier, goede bulk-optimalisatie
3. EWWW Image Optimizer — Lokale optimalisatie (geen APIKeurigOnline zegtAPIEen API (Application Programming Interface) is een set regels en protocollen waarmee softwareapplicaties met elkaar kunnen communiceren en gegevens uitwisselen.-limieten)
4. Smush — Populair, gratis versie beschikbaar

Wil je weten welke andere optimalisaties je kunt doen om WordPress sneller te maken? Bekijk onze complete gids.

5. Lazy loading implementeren

Lazy loading zorgt ervoor dat afbeeldingen pas laden wanneer ze in beeld komen. Dit verbetert de initiële laadtijd van je pagina aanzienlijk.

Hoe lazy loading werkt

Zonder lazy loading laadt de browser alle afbeeldingen op een pagina, zelfs als ze onderaan staan en de bezoeker ze misschien nooit ziet. Met lazy loading worden alleen afbeeldingen "above the fold" (direct zichtbaar) geladen.

Native lazy loading (HTML)

Moderne browsers ondersteunen native lazy loading met het loading-attribuut:

<!-- Lazy loading (standaard voor afbeeldingen onder de vouw) -->
<img src="product-foto.jpg" alt="Product beschrijving" loading="lazy">

<!-- Eager loading (voor hero-afbeeldingen boven de vouw) -->
<img src="hero-banner.jpg" alt="Welkom banner" loading="eager">

Browserondersteuning is inmiddels 95%+ wereldwijd.^[9]

WordPress en lazy loading

Sinds WordPress 5.5 is lazy loadingKeurigOnline zegtLazy loadingLazy loading is een techniek waarbij afbeeldingen en content pas worden geladen wanneer ze in beeld komen. automatisch ingeschakeld voor alle afbeeldingen. WordPress voegt automatisch loading="lazy" toe aan afbeeldingen.

Voor de LCP-afbeelding (meestal je hero-image) kun je dit uitschakelen:

// In je theme's functions.php
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    // Verwijder lazy loading van de eerste afbeelding in content
    if ($context === 'the_content') {
        static $first_image = true;
        if ($first_image) {
            $first_image = false;
            return false; // Geen loading attribuut
        }
    }
    return $value;
}, 10, 3);

FetchPriority voor kritieke afbeeldingen

Gebruik het fetchpriority-attribuut om de browser te vertellen welke afbeeldingen prioriteit hebben:

<!-- Hoogste prioriteit voor LCP-afbeelding -->
<img src="hero-banner.jpg" alt="Hero banner" fetchpriority="high">

<!-- Lagere prioriteit voor afbeeldingen onder de vouw -->
<img src="footer-image.jpg" alt="Footer afbeelding" fetchpriority="low" loading="lazy">

6. Responsive afbeeldingen met srcset

Responsive afbeeldingen zorgen ervoor dat bezoekers op mobiele apparaten kleinere afbeeldingen krijgen dan desktopgebruikers. Dit bespaart bandbreedte en verbetert de laadtijd op mobiel.

Waarom responsive afbeeldingen belangrijk zijn

Een afbeelding van 1920×1080 pixels weegt misschien 500KB. Maar op een telefoon met een scherm van 375 pixels breed is die resolutie compleet overbodig. Met responsive afbeeldingen server je:

• Kleine afbeeldingen (400px) voor mobiel → ~50KB
• Middelgrote afbeeldingen (800px) voor tablet → ~150KB
• Grote afbeeldingen (1600px) voor desktop → ~400KB

Srcset en sizes attributen

Gebruik srcset en sizes om responsive afbeeldingen te implementeren:

<img
    src="product-800.jpg"
    srcset="product-400.jpg 400w,
            product-800.jpg 800w,
            product-1200.jpg 1200w,
            product-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           800px"
    alt="Product foto"
>

Uitleg:

• srcset — Definieert welke afbeeldingsversies beschikbaar zijn en hun breedte
• sizes — Vertelt de browser hoe breed de afbeelding wordt weergegeven op verschillende schermformaten
• De browser kiest automatisch de optimale versie

WordPress en responsive afbeeldingen

WordPress genereert automatisch meerdere formaten wanneer je een afbeelding uploadt:

• Thumbnail: 150×150 pixels
• Medium: 300×300 pixels
• Medium Large: 768px breed
• Large: 1024×1024 pixels
• Full: Originele grootte

WordPress voegt automatisch srcset-attributen toe aan afbeeldingen in je content. Je kunt extra formaten toevoegen in functions.phpKeurigOnline zegtPHPPHP (Hypertext Preprocessor) is een populaire open-source scripttaal die speciaal is ontworpen voor webontwikkeling en server-side programmering.:

// Extra afbeeldingsformaten toevoegen
add_image_size('extra-large', 1600, 9999); // 1600px breed, proportionele hoogte
add_image_size('hero', 1920, 1080, true);  // Exacte crop voor hero-afbeeldingen

7. Afmetingen specificeren

Het specificeren van afbeeldingsafmetingen in HTML voorkomt layout shifts en verbetert je Cumulative Layout Shift (CLS) score.

Waarom width en height attributen belangrijk zijn

Zonder afmetingen weet de browser niet hoeveel ruimte een afbeelding inneemt totdat deze is geladen. Dit veroorzaakt "layout shifts" — content die verschuift terwijl de pagina laadt. Dit is frustrerend voor gebruikers én slecht voor je Core Web Vitals.

<!-- ❌ Slecht: geen afmetingen -->
<img src="product.jpg" alt="Product foto">

<!-- ✅ Goed: afmetingen gespecificeerd -->
<img src="product.jpg" alt="Product foto" width="800" height="600">

Aspect ratio en moderne CSS

Met moderne CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. kun je ook de aspect-ratio property gebruiken:

.product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* 4:3 beeldverhouding */
}

De browser reserveert ruimte op basis van de opgegeven verhouding, zelfs voordat de afbeelding is geladen.

Optimale afmetingen per context

8. Unieke afbeeldingen vs. stockfoto's

Google waardeert unieke, originele afbeeldingen hoger dan stockfoto's die op duizenden andere websites voorkomen. Dit sluit aan bij de E-E-A-T richtlijnen (Experience, Expertise, Authoritativeness, Trustworthiness).

Waarom unieke afbeeldingen beter zijn

• Onderscheidend vermogen: Unieke afbeeldingen maken je content herkenbaar
• E-E-A-T signalen: Originele screenshots, foto's en illustraties tonen expertise
• Geen duplicatie: Dezelfde stockfoto op 1000+ websites verdunt de waarde
• Betere CTR: Unieke thumbnails vallen op in zoekresultaten

Alternatieven voor standaard stockfoto's

Als je toch stockfoto's gebruikt

Soms zijn stockfoto's praktisch of noodzakelijk. In dat geval:

1. Bewerk de afbeelding: Voeg tekst, overlays, of filters toe
2. Crop anders: Gebruik een ander uitsnede dan standaard
3. Combineer: Maak een collage van meerdere stockfoto's
4. Voeg branding toe: Logo of huisstijlkleuren

Goede bronnen voor kwalitatieve stockfoto's:

• Unsplash — Gratis, hoge kwaliteit
• Pexels — Gratis, veel diversiteit
• Shutterstock — Betaald, professionele kwaliteit

9. Image sitemap aanmaken

Een image sitemapKeurigOnline zegtSitemapEen sitemap is een bestand dat zoekmachines helpt alle pagina's van je website te vinden. helpt Google al je afbeeldingen te ontdekken, vooral afbeeldingen die via JavaScriptKeurigOnline zegtJavaScriptJavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken. worden geladen of diep in je site verstopt zitten.

Wat is een image sitemap?

Een image sitemap is een XMLKeurigOnline zegtXMLXML is een opmaaktaal die gebruikt wordt om gestructureerde data uit te wisselen tussen systemen.-bestand dat Google vertelt welke afbeeldingen op je site staan en op welke pagina's ze voorkomen.^[10]

Image sitemap formaat

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
    <url>
        <loc>https://keurigonline.nl/blog/wordpress-hosting</loc>
        <image:image>
            <image:loc>https://keurigonline.nl/uploads/wordpress-dashboard.jpg</image:loc>
            <image:title>WordPress dashboard overzicht</image:title>
        </image:image>
        <image:image>
            <image:loc>https://keurigonline.nl/uploads/hosting-server.jpg</image:loc>
            <image:title>Webhosting server rack</image:title>
        </image:image>
    </url>
</urlset>

WordPress en image sitemaps

De meeste SEO-plugins genereren automatisch image sitemaps:

• Yoast SEO — Bevat afbeeldingen in de standaard sitemap
• All in One SEO — Aparte image sitemap optie
• XML Sitemaps — Met image sitemap add-on

Wil je meer weten over SEO-plugins? Bekijk onze complete Yoast SEO gids.

Image sitemap indienen bij Google

Na het genereren van je image sitemap:

1. Ga naar Google Search Console
2. Klik op "Sitemaps" in het linker menu
3. Voer de URL van je sitemap in (bijv. https://jouwsite.nl/sitemap_index.xml)
4. Klik op "Verzenden"

10. Structured data voor afbeeldingen

Structured data (schema markup) helpt Google je afbeeldingen beter te begrijpen en kan leiden tot rijkere zoekresultaten.

Product afbeeldingen

Voor e-commerce producten gebruik je Product schema:

{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "WordPress Hosting Pakket",
    "image": [
        "https://keurigonline.nl/uploads/wordpress-hosting-product.jpg",
        "https://keurigonline.nl/uploads/wordpress-hosting-dashboard.jpg"
    ],
    "description": "Snelle WordPress hosting met LiteSpeed en gratis SSL",
    "offers": {
        "@type": "Offer",
        "price": "4.95",
        "priceCurrency": "EUR"
    }
}

Article afbeeldingen

Voor blogartikelen gebruik je Article schema:

{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Afbeeldingen optimaliseren voor SEO: de complete gids",
    "image": "https://keurigonline.nl/uploads/afbeeldingen-optimaliseren-seo-hero.jpg",
    "author": {
        "@type": "Organization",
        "name": "Keurig Online"
    },
    "datePublished": "2025-01-10"
}

ImageObject voor specifieke afbeeldingen

Je kunt ook specifieke afbeeldingen beschrijven met ImageObject:

{
    "@context": "https://schema.org",
    "@type": "ImageObject",
    "contentUrl": "https://keurigonline.nl/uploads/wordpress-dashboard.jpg",
    "creditText": "Keurig Online",
    "creator": {
        "@type": "Organization",
        "name": "Keurig Online"
    },
    "copyrightNotice": "© 2025 Keurig Online"
}

Test je structured data met de Google Rich Results Test.

11. Prestaties meten in Google Search Console

Google Search Console biedt specifieke rapportage voor afbeeldingen, waarmee je kunt zien welke afbeeldingen verkeer genereren.

Image prestaties bekijken

1. Ga naar Google Search Console
2. Klik op "Prestaties" in het linker menu
3. Klik op "Zoektype" boven de grafiek
4. Selecteer "Afbeelding" in plaats van "Web"

Nu zie je specifiek hoeveel vertoningen, klikken, CTR, en gemiddelde positie je afbeeldingen genereren.

Belangrijke metrics

• Vertoningen: Hoe vaak je afbeeldingen in zoekresultaten verschijnen
• Klikken: Hoeveel keer gebruikers op je afbeeldingen klikken
• CTR: Click-through rate (klikken / vertoningen)
• Gemiddelde positie: Waar je afbeeldingen gemiddeld ranken

Problemen oplossen

Onder "Indexering" → "Pagina's" kun je zien of Google problemen heeft met het indexeren van je afbeeldingen. Veelvoorkomende problemen:

• Geblokkeerd door robots.txtKeurigOnline zegtrobots.txtrobots.txt is een bestand dat zoekmachines vertelt welke delen van je site ze mogen crawlen.: Check of je /uploads/ niet blokkeert
• Noindex tag: Zorg dat afbeeldingen niet zijn uitgesloten
• Te langzaam: Optimaliseer laadtijd van afbeeldingen

12. Browser caching voor afbeeldingen

Browser caching zorgt ervoor dat terugkerende bezoekers afbeeldingen niet opnieuw hoeven te downloaden. Dit verbetert de snelheid aanzienlijk voor herhaalde bezoeken.

Cache-Control headers instellen

Voeg deze regels toe aan je .htaccessKeurigOnline zegthtaccessEen .htaccess bestand is een configuratiebestand voor Apache webservers waarmee je per directory instellingen kunt wijzigen zonder toegang tot de hoofdconfiguratie. bestand (ApacheKeurigOnline zegtApacheApache HTTP Server is een open source webserver ontwikkeld door de Apache Software Foundation.):

# Cache afbeeldingen voor 1 jaar
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/avif "access plus 1 year"
</IfModule>

# Of via Cache-Control headers
<IfModule mod_headers.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|webp|svg|avif)$">
        Header set Cache-Control "max-age=31536000, public, immutable"
    </FilesMatch>
</IfModule>

CDN voor afbeeldingen

Een Content Delivery Network (CDN) serveert afbeeldingen vanaf servers dicht bij de bezoeker. Dit vermindert latency en verbetert laadtijden wereldwijd.

Populaire CDNKeurigOnline zegtCDNEen CDN (Content Delivery Network) is een wereldwijd netwerk van servers dat content sneller bij gebruikers aflevert.-opties:

• Cloudflare — Gratis tier beschikbaar, eenvoudige setup
• BunnyCDN — Goedkoop, snelle EU-servers
• AWS CloudFront — Enterprise-niveau, pay-per-use

13. CSS background images vs. HTML images

Niet alle afbeeldingen moeten via HTML <img> tags worden geladen. Het kiezen tussen CSS en HTML afbeeldingen heeft impact op SEO en toegankelijkheid.

Wanneer HTML <img> gebruiken

• Inhoudelijke afbeeldingen: Productfoto's, screenshots, illustraties
• Afbeeldingen die je wilt laten indexeren: Alles wat in Google Afbeeldingen moet verschijnen
• Afbeeldingen met belangrijke informatie: Infographics, diagrammen
• Logo's: Voor herkenning en branding

Wanneer CSS background-image gebruiken

• Decoratieve elementen: Patronen, texturen, visuele accenten
• UI-elementen: Knoppen met iconen, decoratieve borders
• Overlays: Afbeeldingen met tekst eroverheen
• Achtergronden: Pagina- of sectie-achtergronden

Voorbeeld: CSS background met overlay

.hero-section {
    /* Decoratieve achtergrond - niet geïndexeerd door Google */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('/uploads/hero-background.jpg');
    background-size: cover;
    background-position: center;
}

/* Alternatief met HTML img voor SEO */
.hero-section img {
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

14. Optimaliseren voor Google Lens en visueel zoeken

Visueel zoeken groeit snel. Google Lens verwerkt maandelijks meer dan 20 miljard zoekopdrachten.^[1] Met "Circle to Search" op Android kunnen gebruikers direct vanuit elke app zoeken naar wat ze zien.

Hoe visueel zoeken werkt

Bij visueel zoeken analyseert Google:

• De visuele inhoud van de afbeelding (objecten, kleuren, vormen)
• Tekst in de afbeelding (OCR)
• Context van de omringende tekst en metadata
• Structured data (Product schema, etc.)

Optimalisatietips voor visueel zoeken

E-commerce en Google Lens

Voor webshops is Google Lens bijzonder waardevol. Gebruikers kunnen:

• Een product fotograferen en vinden waar het te koop is
• Vergelijkbare producten ontdekken
• Direct naar je productpagina navigeren

Zorg ervoor dat je Product schema correct is ingesteld met meerdere afbeeldingen en complete productinformatie.

Image SEO checklist

Gebruik deze checklist om te controleren of je afbeeldingen volledig geoptimaliseerd zijn:

Veelgestelde vragen

Conclusie: begin vandaag met image SEO

Afbeeldingen optimaliseren voor SEO is geen eenmalige taak — het is een onderdeel van je reguliere contentworkflow. Maar de investering betaalt zich terug: beter vindbaar in Google Afbeeldingen, snellere laadtijden, betere Core Web VitalsKeurigOnline zegtCore Web VitalsCore Web Vitals zijn Google's belangrijkste metrics voor website-ervaring en snelheid., en een toegankelijkere website.

De belangrijkste punten om te onthouden:

• Bestandsnamen: Beschrijvend, kleine letters, streepjes als scheidingsteken
• Alt-tekst: Beschrijvend maar bondig, max 125 tekens
• Formaat: WebP als standaard, SVG voor iconen
• Compressie: Onder 100KB, gebruik tools zoals TinyPNG of Imagify
• Lazy loadingKeurigOnline zegtLazy loadingLazy loading is een techniek waarbij afbeeldingen en content pas worden geladen wanneer ze in beeld komen.: Aan voor afbeeldingen onder de vouw, uit voor LCPKeurigOnline zegtLCPLCP (Largest Contentful Paint) meet de laadtijd van het grootste zichtbare element op een webpagina.

Begin met de afbeeldingen op je belangrijkste pagina's — de homepage, productpagina's, en best presterende blogartikelen. Werk daarna systematisch door je hele site.

Bronnen en referenties

Dit artikel is gebaseerd op officiële documentatie en betrouwbare onderzoeken:

1. Semrush (2025) — Google Search Statistics: StatistiekenKeurigOnline zegtStatistiekenStatistieken laten zien hoe bezoekers je website gebruiken. over Google zoekverkeer, waaronder het aandeel van Google Afbeeldingen (~10%) en Google Lens (20+ miljard maandelijkse zoekopdrachten).
2. Amra & Elma (2025) — Image SEO Statistics: Onderzoeksdata over image SEO, waaronder dat slechts 26% van websites alt-teksten correct invult.
3. HTTPKeurigOnline zegtHTTPHTTP (HyperText Transfer Protocol) is het protocol dat de communicatie tussen webclients en servers mogelijk maakt. Archive (2024) — Page Weight Report: Data over gemiddeld paginagewicht en het aandeel van afbeeldingen (50-70% van totaal).
4. NCBI/Toegankelijkheid Nederland — Schattingen over het gebruik van schermlezers en hulptechnologie in Nederland (circa 300.000 gebruikers).
5. Google Search Central (2024) — Google Images Best Practices: Officiële richtlijnen voor afbeeldingsoptimalisatie, bestandsnamen, alt-tekst en contextuele plaatsing.
6. Google Developer Documentation Style Guide (2024) — File naming guidelines: Google's aanbeveling om streepjes te gebruiken in plaats van underscores.
7. W3C Web Accessibility Initiative — Decorative Images Tutorial: Richtlijnen voor het gebruik van lege alt-tekst bij decoratieve afbeeldingen.
8. Can I Use (2025) — WebP Browser Support: Actuele browserondersteuning voor WebPKeurigOnline zegtWebPWebP is een modern afbeeldingsformaat dat 25-35% kleiner is dan JPEG en PNG.-formaat (97%+ wereldwijd).
9. Can I Use (2025) — Native Lazy Loading Support: Browserondersteuning voor het loading-attribuut (95%+).
10. Google Search Central (2024) — Image Sitemaps: Officiële documentatie over het aanmaken en indienen van image sitemaps.

Let op: SEO-richtlijnen kunnen wijzigen. Dit artikel is geschreven in januari 2025 en is gebaseerd op de meest recente documentatie op dat moment.