---
title: "Afbeeldingen optimaliseren voor SEO: de complete gids"
description: "Leer hoe je afbeeldingen optimaliseert voor SEO: alt-teksten, WebP-formaat, compressie, lazy loading en meer. Complete gids met 14 stappen voor betere vindbaarheid."
canonical: https://www.keurigonline.nl/blog/afbeeldingen-optimaliseren-voor-seo
last_modified: 2025-10-27
---

### Op deze pagina

[Blog](https://www.keurigonline.nl/blog) / [ SEO ](https://www.keurigonline.nl/blog/categorie/seo) · 13 januari 2026 · ~0 min lezen

# Afbeeldingen optimaliseren voor SEO: de complete gids

Leer hoe je afbeeldingen optimaliseert voor SEO: alt-teksten, WebP-formaat, compressie, lazy loading en meer. Complete gids met 14 stappen voor betere vindbaarheid.

Geschreven door: Maarten Keizer

Deel dit artikel [ ](http://twitter.com/share?text=Afbeeldingen+optimaliseren+voor+SEO%3A+de+complete+gids&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo) [ ](mailto:?subject=Afbeeldingen+optimaliseren+voor+SEO%3A+de+complete+gids&body=Bekijk+dit+artikel%3A+https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo)

     Op deze pagina

   **Samenvatting: afbeeldingen optimaliseren voor SEO**

- **Bestandsnamen:** Beschrijvend, kleine letters, streepjes als scheidingsteken
- **Alt-tekst:** Max 125 tekens, beschrijf wat je ziet
- **Formaat:** WebP (30-40% kleiner dan JPEG)
- **Compressie:** Onder 100KB voor standaard afbeeldingen
- **Lazy loading:** Aan voor afbeeldingen onder de vouw
- **Responsive:** Gebruik srcset voor verschillende schermformaten
- **Structured data:** Product/Article schema met afbeeldingen

**Resultaat:** Tot 12% meer organisch verkeer en betere Core Web Vitals.

Ongeveer **10% van al het Google-verkeer** gaat naar Google Afbeeldingen — dat zijn meer dan 1 miljard zoekopdrachten per dag.\[1\] En toch heeft slechts 26% van alle websites correct ingevulde alt-teksten.\[2\] De meeste websites laten dus enorm veel verkeer liggen.

Afbeeldingen zijn vaak de zwaarste elementen op een webpagina. Een gemiddelde webpagina bevat **1-2 MB aan afbeeldingen**, wat 50-70% van het totale paginagewicht uitmaakt.\[3\] Slecht geoptimaliseerde afbeeldingen vertragen je website, schaden je Core Web VitalsKeurigOnline zegt [Core Web Vitals](https://www.keurigonline.nl/begrippenlijst/core-web-vitals)Core Web Vitals zijn Google's belangrijkste metrics voor website-ervaring en snelheid. , en kosten je posities in Google.

In deze uitgebreide gids leer je **alles** over het optimaliseren van afbeeldingen voor zoekmachines: van bestandsnamen en alt-teksten tot compressie, lazy loadingKeurigOnline zegt [Lazy loading](https://www.keurigonline.nl/begrippenlijst/lazy-loading)Lazy loading is een techniek waarbij afbeeldingen en content pas worden geladen wanneer ze in beeld komen. , en structured data. Of je nu een WordPressKeurigOnline zegt [WordPress](https://www.keurigonline.nl/begrippenlijst/wordpress)WordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. -website beheert of een webshop runt — na het lezen van dit artikel weet je precies hoe je je afbeeldingen optimaal inzet voor betere vindbaarheid.

  **Definitie:** Image SEO is het optimaliseren van afbeeldingen voor zoekmachines door technische verbeteringen (formaat, compressie) en beschrijvende metadata (alt-tekst, bestandsnaam), zodat ze beter ranken in Google Afbeeldingen.

---

## 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](https://www.google.com/imghp)
- 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)](https://web.dev/articles/lcp) scores — slecht voor Core Web Vitals
- Langere laadtijden op mobiele apparaten
- Hogere bounce rates (bezoekers verlaten je site)

**Snelheidsfeit**

- Een vertraging van 1 seconde kan conversies met 7% verlagen
- 53% van mobiele bezoekers verlaat een pagina die langer dan 3 seconden laadt
- Google gebruikt paginasnelheid als rankingfactor sinds 2018

### 3. Toegankelijkheid en gebruikerservaring

Alt-teksten zijn niet alleen voor SEO. Ze zijn essentieel voor [webtoegankelijkheid](https://www.w3.org/WAI/tutorials/images/):

- 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

**Bestandsnaam optimaliseren in 5 regels**

1. **Alleen kleine letters** — vermijd hoofdletters volledig
2. **Gebruik streepjes (-)** — niet underscores of spaties
3. **3-5 woorden** — kort maar beschrijvend
4. **Beschrijf wat je ziet** — niet wat je wilt ranken
5. **Geen speciale tekens** — alleen letters, cijfers en streepjes

### Streepjes vs. underscores

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

| Bestandsnaam | Google leest dit als |
|---|---|
| `wordpress-hosting.jpg` | "wordpress" EN "hosting" (twee aparte woorden) |
| `wordpress_hosting.jpg` | "wordpresshosting" (één samengevoegd woord) |

Dit wordt bevestigd door [Google's eigen stijlgids voor documentatie](https://developers.google.com/style/filenames#naming-guidelines).\[6\]

**Let op: keyword stuffing**

- Vermijd: `wordpress-seo-snelheid-optimalisatie-tips-2024.jpg`
- Beter: `wordpress-dashboard-snelheidstest.jpg`
- Google waarschuwt expliciet tegen het volstoppen van bestandsnamen met zoekwoorden

### 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](https://wordpress.org/plugins/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 zegt [HTML](https://www.keurigonline.nl/begrippenlijst/html)HTML is de programmeertaal voor het maken van webpagina’s. -attribuut dat een tekstuele beschrijving van een afbeelding geeft:

```html
<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

**Alt-tekst formule**

1. **Beschrijf wat je ziet** — Wees specifiek en visueel
2. **Maximaal 125 tekens** — Langere teksten worden afgekapt door schermlezers
3. **Voeg context toe** — Waarom is deze afbeelding relevant?
4. **Natuurlijk taalgebruik** — Schrijf voor mensen, niet voor robots
5. **Eén trefwoord (optioneel)** — Alleen als het natuurlijk past

### Voorbeelden van goede alt-teksten

| Slecht | Goed |
|---|---|
| `alt=""` | `alt="WordPress dashboard met plugin-overzicht"` |
| `alt="afbeelding"` | `alt="Screenshot van Google Search Console met 1000 klikken per dag"` |
| `alt="wordpress seo optimalisatie tips beste praktijken"` | `alt="Yoast SEO plugin instellingen voor meta-beschrijving"` |

### Wanneer géén alt-tekst gebruiken

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

```html
<!-- 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](https://www.w3.org/WAI/tutorials/images/decorative/) 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.

```html
<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

| Formaat | Beste voor | Voordelen | Nadelen |
|---|---|---|---|
| **JPEG** | Foto's | Universele ondersteuning, goede compressie | Geen transparantie, lossy compressie |
| **PNG** | Logo's, graphics met transparantie | Lossless, transparantie | Grotere bestanden dan JPEG |
| **WebP** | Alles (moderne standaard) | 30% kleiner dan JPEG, transparantie, animatie | Oudere browsers (IE11, Safari |
| **AVIF** | Alles (nieuwste standaard) | 50% kleiner dan JPEG, beste kwaliteit | Beperkte browserondersteuning |
| **SVG** | Iconen, logo's, illustraties | Schaalbaar zonder kwaliteitsverlies, klein | Alleen voor vectorafbeeldingen |
| **GIF** | Simpele animaties | Animatie-ondersteuning | Slechte compressie, beperkt kleurenpalet |

### WebP: de nieuwe standaard

[WebP](https://developers.google.com/speed/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 WebPKeurigOnline zegt [WebP](https://www.keurigonline.nl/begrippenlijst/webp)WebP is een modern afbeeldingsformaat dat 25-35% kleiner is dan JPEG en PNG. is inmiddels **97%+** wereldwijd, inclusief alle moderne browsers.\[8\]

**Originele testdata: WebP vs JPEG vergelijking**

We hebben een testafbeelding (1376×768 pixels) geconverteerd naar verschillende formaten om de bestandsgrootte te vergelijken:

| Formaat | Kwaliteit | Grootte | Besparing |
|---|---|---|---|
| PNG (origineel) | 100% | 550 KB | — |
| JPEG | 85% | 127 KB | -77% |
| **WebP** | 85% | **81 KB** | **-85% (36% kleiner dan JPEG)** |
| JPEG | 75% | 101 KB | -82% |
| **WebP** | 75% | **62 KB** | **-89% (39% kleiner dan JPEG)** |

**Conclusie:** WebP levert bij dezelfde kwaliteitsinstelling **36-39% kleinere bestanden** dan JPEG — zelfs beter dan de theoretische 25-35% die vaak wordt genoemd.

**Tip:** Gebruik WebP als standaardformaat voor alle nieuwe afbeeldingen. Voor browsers zonder ondersteuning kun je een JPEG-fallback instellen met het `<picture>`-element.

### Picture-element voor fallbacks

Voor maximale browsercompatibiliteit gebruik je het [<picture>-element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture):

```html
<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 → WebP → JPEG).

### SVG voor iconen en logo's

[SVG (Scalable Vector Graphics)](https://developer.mozilla.org/en-US/docs/Web/SVG) 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](https://tinypng.com/) | Online / API | Gratis (20 afb/maand) of betaald | Uitstekende kwaliteit, WebP-ondersteuning |
| [Squoosh](https://squoosh.app/) | Online | Gratis | Google-tool, geavanceerde opties, AVIF |
| [ShortPixel](https://shortpixel.com/) | WordPress plugin | Freemium | Automatische optimalisatie, WebP-conversie |
| [Imagify](https://imagify.io/) | WordPress plugin | Freemium | Van WP Rocket-makers, bulk-optimalisatie |
| [ImageOptim](https://imageoptim.com/) | Desktop (Mac) | Gratis | Drag-and-drop, lossless + lossy |

### Optimale bestandsgrootte

**Richtlijnen voor bestandsgrootte**

- **Hero-afbeeldingen:** Maximaal 200KB
- **Productfoto's:** Maximaal 100KB
- **Thumbnails:** Maximaal 30KB
- **Achtergrondafbeeldingen:** Maximaal 150KB
- **Logo's (SVG):** Maximaal 10KB

### WordPress-plugins voor automatische compressie

De beste WordPress-plugins voor afbeeldingsoptimalisatie zijn:

1. **[Imagify](https://wordpress.org/plugins/imagify/)** — Van de makers van WP Rocket, uitstekende balans tussen kwaliteit en compressie
2. **[ShortPixel](https://wordpress.org/plugins/shortpixel-image-optimiser/)** — Genereuze gratis tier, goede bulk-optimalisatie
3. **[EWWW Image Optimizer](https://wordpress.org/plugins/ewww-image-optimizer/)** — Lokale optimalisatie (geen APIKeurigOnline zegt [API](https://www.keurigonline.nl/begrippenlijst/api)Een API (Application Programming Interface) is een set regels en protocollen waarmee softwareapplicaties met elkaar kunnen communiceren en gegevens uitwisselen. -limieten)
4. **[Smush](https://wordpress.org/plugins/smush/)** — Populair, gratis versie beschikbaar

Wil je weten welke [andere optimalisaties je kunt doen om WordPress sneller te maken](https://www.keurigonline.nl/blog/wordpress-sneller-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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading) met het `loading`-attribuut:

```html
<!-- 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\]

**Let op: LCP-afbeeldingen**

- Gebruik **nooit** `loading="lazy"` op je LCP-element (grootste afbeelding boven de vouw)
- Dit vertraagt je Largest Contentful Paint score
- Hero-afbeeldingen moeten altijd `loading="eager"` (of geen attribuut) hebben

### WordPress en lazy loading

Sinds WordPressKeurigOnline zegt [WordPress](https://www.keurigonline.nl/begrippenlijst/wordpress)WordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. 5.5 is lazy loading automatisch ingeschakeld voor alle afbeeldingen. WordPress voegt automatisch `loading="lazy"` toe aan afbeeldingen.

Voor de LCPKeurigOnline zegt [LCP](https://www.keurigonline.nl/begrippenlijst/lcp)LCP (Largest Contentful Paint) meet de laadtijd van het grootste zichtbare element op een webpagina. -afbeelding (meestal je hero-image) kun je dit uitschakelen:

```php
// 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority) om de browser te vertellen welke afbeeldingen prioriteit hebben:

```html
<!-- 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset) en [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes) om responsive afbeeldingen te implementeren:

```html
<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.php`:

```php
// 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
```

**Tip:** Gebruik een plugin zoals [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/) om bestaande afbeeldingen opnieuw te genereren na het toevoegen van nieuwe formaten.

 ---

## 7. Afmetingen specificeren

Het specificeren van afbeeldingsafmetingen in HTML voorkomt layout shifts en verbetert je [Cumulative Layout Shift (CLS)](https://web.dev/articles/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.

```html
<!-- ❌ 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 zegt [CSS](https://www.keurigonline.nl/begrippenlijst/css)CSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. kun je ook de [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property gebruiken:

```css
.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

**Aanbevolen afbeeldingsafmetingen**

- **Hero-afbeelding:** 1920×1080 (16:9) of 1920×800 (letterbox)
- **Blogafbeelding:** 1200×630 (1.91:1, optimaal voor social sharing)
- **Productfoto:** 800×800 (1:1, vierkant) of 800×1000 (4:5)
- **Thumbnail:** 400×300 (4:3) of 400×400 (1:1)
- **Open Graph (social):** 1200×630 pixels

 ---

## 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

| Optie | Voorbeeld | Tools |
|---|---|---|
| Screenshots maken | WordPress dashboard, tool-interfaces | [CleanShot X](https://cleanshot.com/), Snipping Tool |
| Eigen foto's | Kantoor, team, producten | Smartphone camera |
| Custom graphics | Infographics, diagrammen | [Canva](https://www.canva.com/), [Figma](https://www.figma.com/) |
| AI-gegenereerde afbeeldingen | Illustraties, conceptuele beelden | [Midjourney](https://www.midjourney.com/), DALL-E |

### 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](https://unsplash.com/) — Gratis, hoge kwaliteit
- [Pexels](https://www.pexels.com/) — Gratis, veel diversiteit
- [Shutterstock](https://www.shutterstock.com/) — Betaald, professionele kwaliteit

 ---

## 9. Image sitemap aanmaken

Een image sitemapKeurigOnline zegt [Sitemap](https://www.keurigonline.nl/begrippenlijst/sitemap)Een 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 zegt [JavaScript](https://www.keurigonline.nl/begrippenlijst/javascript)JavaScript 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](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps) is een XMLKeurigOnline zegt [XML](https://www.keurigonline.nl/begrippenlijst/xml)XML 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
<?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](https://wordpress.org/plugins/wordpress-seo/)** — Bevat afbeeldingen in de standaard sitemap
- **[All in One SEO](https://wordpress.org/plugins/all-in-one-seo-pack/)** — Aparte image sitemap optie
- **[XML Sitemaps](https://wordpress.org/plugins/google-sitemap-generator/)** — Met image sitemap add-on

Wil je meer weten over SEO-plugins? Bekijk onze [complete Yoast SEO gids](https://www.keurigonline.nl/blog/yoast-seo-complete-gids-voor-betere-vindbaarheid).

### Image sitemap indienen bij Google

Na het genereren van je image sitemap:

1. Ga naar [Google Search Console](https://search.google.com/search-console)
2. Klik op "Sitemaps" in het linker menu
3. Voer de URL van je sitemapKeurigOnline zegt [Sitemap](https://www.keurigonline.nl/begrippenlijst/sitemap)Een sitemap is een bestand dat zoekmachines helpt alle pagina's van je website te vinden. 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](https://schema.org/Product):

```json
{
    "@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](https://schema.org/Article):

```json
{
    "@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](https://schema.org/ImageObject):

```json
{
    "@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](https://search.google.com/test/rich-results).

 ---

## 11. Prestaties meten in Google Search Console

[Google Search Console](https://search.google.com/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 zegt [robots.txt](https://www.keurigonline.nl/begrippenlijst/robots.txt)robots.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 `.htaccess` bestand (ApacheKeurigOnline zegt [Apache](https://www.keurigonline.nl/begrippenlijst/apache)Apache HTTP Server is een open source webserver ontwikkeld door de Apache Software Foundation. ):

```apache
# 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)](https://developer.mozilla.org/en-US/docs/Glossary/CDN) serveert afbeeldingen vanaf servers dicht bij de bezoeker. Dit vermindert latency en verbetert laadtijden wereldwijd.

Populaire CDNKeurigOnline zegt [CDN](https://www.keurigonline.nl/begrippenlijst/cdn)Een CDN (Content Delivery Network) is een wereldwijd netwerk van servers dat content sneller bij gebruikers aflevert. -opties:

- [Cloudflare](https://www.cloudflare.com/) — Gratis tier beschikbaar, eenvoudige setup
- [BunnyCDN](https://www.bunny.net/) — Goedkoop, snelle EU-servers
- [AWS CloudFront](https://aws.amazon.com/cloudfront/) — Enterprise-niveau, pay-per-use

**Tip:** Bij Keurig Online gebruiken we LiteSpeed webservers met ingebouwde caching. Bekijk onze [WordPress hosting](https://www.keurigonline.nl/webhosting) voor snelle websites zonder gedoe met CDN-configuratie.

 ---

## 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

**Let op: SEO-implicaties**

- CSS background-images worden **niet** geïndexeerd door Google
- CSS background-images hebben geen alt-tekst (slecht voor toegankelijkheid)
- Gebruik altijd HTML voor afbeeldingen die SEO-waarde moeten hebben

### Voorbeeld: CSS background met overlay

```css
.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

**Visueel zoeken optimalisatie in 5 stappen**

1. **Hoge kwaliteit:** Gebruik scherpe, goed belichte afbeeldingen
2. **Product prominent:** Zorg dat het product duidelijk zichtbaar is, niet afgeleid door achtergrond
3. **Meerdere hoeken:** Voeg afbeeldingen toe vanuit verschillende perspectieven
4. **Product schema:** Gebruik structured data met meerdere afbeeldingen
5. **Context:** Omring afbeeldingen met relevante, beschrijvende tekst

### 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:

**Complete image SEO checklist**

1. **Bestandsnaam:** Beschrijvend, kleine letters, streepjes als scheidingsteken
2. **Alt-tekst:** Ingevuld, beschrijvend, max 125 tekens
3. **Formaat:** WebP voor foto's, SVG voor iconen/logo's
4. **Compressie:** Onder 100KB voor standaard afbeeldingen
5. **Lazy loading:** Ingeschakeld voor afbeeldingen onder de vouw
6. **Responsive:** Srcset en sizes attributen ingesteld
7. **Afmetingen:** Width en height attributen aanwezig
8. **LCP-afbeelding:** Geen lazy loading, fetchpriority="high"
9. **Unieke afbeeldingen:** Zoveel mogelijk origineel materiaal
10. **Image sitemap:** Gegenereerd en ingediend
11. **Structured data:** Schema markup voor producten/artikelen
12. **Caching:** Browser caching ingesteld

 ---

## Veelgestelde vragen

### Wat is image SEO en waarom is het belangrijk?

Image SEO is het optimaliseren van afbeeldingen voor zoekmachines door technische verbeteringen en beschrijvende metadata.

**Waarom het belangrijk is:**

- Google Afbeeldingen = 10% van al het zoekverkeer (1+ miljard zoekopdrachten/dag)
- Verbetert paginasnelheid en Core Web Vitals
- Verhoogt toegankelijkheid voor schermlezers

### Hoe schrijf je een goede alt-tekst?

- **Lengte:** Max 125 tekens
- **Inhoud:** Beschrijf wat je visueel ziet
- **Trefwoord:** Optioneel, alleen als het natuurlijk past

**Voorbeeld:**

- ✅ "WordPress dashboard met plugin-overzicht en 5 actieve updates"
- ❌ "dashboard" of "wordpress seo optimalisatie tips"

### Wat is het beste bestandsformaat voor afbeeldingen?

- **WebP:** Aanbevolen voor foto's (25-34% kleiner dan JPEG)
- **SVG:** Ideaal voor iconen en logo's (schaalbaar)
- **AVIF:** Nieuwste formaat, nog betere compressie
- **PNG:** Alleen voor transparantie zonder WebP-ondersteuning

Gebruik het `<picture>`-element voor fallbacks: AVIF → WebP → JPEG.

### Hoe groot mogen afbeeldingen zijn voor websites?

**Maximale bestandsgroottes:**

- Hero-afbeeldingen: 200KB
- Productfoto's: 100KB
- Thumbnails: 30KB
- Logo's (SVG): 10KB

**Tools:** TinyPNG, Squoosh, Imagify, ShortPixel.

### Wat is lazy loading en moet ik het gebruiken?

Lazy loading laadt afbeeldingen pas wanneer ze in beeld komen.

- ✅ **Gebruik voor:** Afbeeldingen onder de vouw
- ❌ **Niet gebruiken voor:** LCP-afbeelding (vertraagt Core Web Vitals)

**Implementatie:** `loading="lazy"` aan je img-tag.

### Hoe gebruik ik responsive afbeeldingen met srcset?

Responsive afbeeldingen serveren kleinere versies aan mobiele bezoekers.

- **srcset:** Definieert beschikbare formaten
    `srcset="foto-400.jpg 400w, foto-800.jpg 800w"`
- **sizes:** Vertelt browser de weergavebreedte
    `sizes="(max-width: 600px) 100vw, 50vw"`

De browser kiest automatisch het optimale formaat.

### Wat is een image sitemap en heb ik die nodig?

Een XMLKeurigOnline zegt [XML](https://www.keurigonline.nl/begrippenlijst/xml)XML is een opmaaktaal die gebruikt wordt om gestructureerde data uit te wisselen tussen systemen. -bestand dat Google vertelt welke afbeeldingen op je site staan.

**Nuttig voor:**

- Afbeeldingen geladen via JavaScriptKeurigOnline zegt [JavaScript](https://www.keurigonline.nl/begrippenlijst/javascript)JavaScript is een programmeertaal die wordt gebruikt om interactieve en dynamische websites te maken.
- Grote sites met veel afbeeldingen

**Genereren:** Yoast SEO of All in One SEO doen dit automatisch. Indienen via Google Search Console.

### Moet ik streepjes of underscores gebruiken in bestandsnamen?

**Altijd streepjes (-), geen underscores (\_).**

- `wordpress-hosting.jpg` → Google leest: "wordpressKeurigOnline zegt [WordPress](https://www.keurigonline.nl/begrippenlijst/wordpress)WordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. " + "hosting"
- `wordpress_hosting.jpg` → Google leest: "wordpresshosting"

Dit is bevestigd door Google's officiële stijlgids.

### Hoe lang mag een alt-tekst zijn?

- **Optimaal:** 80-125 tekens
- **Maximum:** 125 tekens (schermlezers kappen af)

Focus op één tot twee zinnen die beschrijven wat je ziet. Vermijd keyword-herhaling.

### Hoe optimaliseer ik afbeeldingen voor Google Lens?

Google Lens verwerkt 20+ miljard visuele zoekopdrachten per maand.

- Gebruik hoge kwaliteit afbeeldingen met scherp zichtbare producten
- Voeg meerdere afbeeldingen vanuit verschillende hoeken toe
- Implementeer Product schema markup met meerdere images
- Omring afbeeldingen met relevante, beschrijvende tekst

### Wat is het verschil tussen alt-tekst en title-attribuut?

- **Alt-tekst (`alt`):** Essentieel — voorgelezen door schermlezers, fallback bij laadproblemen, gebruikt door Google
- **Title (`title`):** Optioneel — verschijnt alleen als tooltip bij hover, minimale SEO-waarde

Investeer je tijd in goede alt-teksten.

### Worden CSS background-images geïndexeerd door Google?

**Nee.** CSS background-images verschijnen niet in Google Afbeeldingen.

- ✅ **CSSKeurigOnline zegt [CSS](https://www.keurigonline.nl/begrippenlijst/css)CSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. backgrounds:** Decoratieve elementen (patronen, texturen)
- ✅ Productfoto's, screenshots, infographics

 ---

## 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 zegt [Core Web Vitals](https://www.keurigonline.nl/begrippenlijst/core-web-vitals)Core 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 zegt [Lazy loading](https://www.keurigonline.nl/begrippenlijst/lazy-loading)Lazy 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 zegt [LCP](https://www.keurigonline.nl/begrippenlijst/lcp)LCP (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.

**Volgende stap:** Wil je je WordPress-website sneller maken en beter laten presteren? Bij Keurig Online helpen we je met [razendsnelle WordPress hosting](https://www.keurigonline.nl/webhosting) op LiteSpeed-servers met automatische afbeeldingsoptimalisatie. [Neem contact op](https://www.keurigonline.nl/contact) voor een vrijblijvend gesprek over de mogelijkheden.

 ---

## Bronnen en referenties

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

1. **Semrush (2025)** — [Google Search Statistics](https://www.semrush.com/blog/google-search-statistics/): StatistiekenKeurigOnline zegt [Statistieken](https://www.keurigonline.nl/begrippenlijst/statistieken)Statistieken 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](https://www.amraandelma.com/image-seo-statistics/): Onderzoeksdata over image SEO, waaronder dat slechts 26% van websites alt-teksten correct invult.
3. **HTTPKeurigOnline zegt [HTTP](https://www.keurigonline.nl/begrippenlijst/http)HTTP (HyperText Transfer Protocol) is het protocol dat de communicatie tussen webclients en servers mogelijk maakt. Archive (2024)** — [Page Weight Report](https://httparchive.org/reports/page-weight): 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](https://developers.google.com/search/docs/appearance/google-images): Officiële richtlijnen voor afbeeldingsoptimalisatie, bestandsnamen, alt-tekst en contextuele plaatsing.
6. **Google Developer Documentation Style Guide (2024)** — [File naming guidelines](https://developers.google.com/style/filenames): Google's aanbeveling om streepjes te gebruiken in plaats van underscores.
7. **W3C Web Accessibility Initiative** — [Decorative Images Tutorial](https://www.w3.org/WAI/tutorials/images/decorative/): Richtlijnen voor het gebruik van lege alt-tekst bij decoratieve afbeeldingen.
8. **Can I Use (2025)** — [WebP Browser Support](https://caniuse.com/webp): Actuele browserondersteuning voor WebPKeurigOnline zegt [WebP](https://www.keurigonline.nl/begrippenlijst/webp)WebP 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](https://caniuse.com/loading-lazy-attr): Browserondersteuning voor het loading-attribuut (95%+).
10. **Google Search Central (2024)** — [Image Sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/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.

Deel dit artikel:

[ ](https://twitter.com/share?text=Afbeeldingen+optimaliseren+voor+SEO%3A+de+complete+gids&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo "Delen op Twitter") [ ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo "Delen op Facebook") [ ](whatsapp://send?text=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo "Delen op WhatsApp") [ ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo&title=Afbeeldingen+optimaliseren+voor+SEO%3A+de+complete+gids "Delen op LinkedIn") [ ](mailto:?subject=Afbeeldingen+optimaliseren+voor+SEO%3A+de+complete+gids&body=Bekijk+dit+artikel%3A+https%3A%2F%2Fwww.keurigonline.nl%2Fblog%2Fafbeeldingen-optimaliseren-voor-seo "Versturen via email")

     De link is gekopieerd naar je klembord!

- SEO 7 Jul

    ### WordPress SEO-plugin vervangen door Schema.org markup

     WordPress SEO-plugin vervangen door Schema.org markup: minder plugin-overhead, JSON-LD zelf beheren. Stappenplan, code en veelgemaakte fouten.

     Pablo Cleij
- SEO 4 Jul

    ### Hreflang instellen WordPress: multi-taal SEO-setup 2026

     Hreflang instellen in WordPress: 3 methodes, WPML/Polylang/handmatig, veelgemaakte fouten en testen in Search Console. Complete gids voor 2026.

     Pablo Cleij
- SEO 2 Jul

    ### Google algoritme update voorbereiding: stresstest 2026

     De mei 2026 Core Update sloeg hard toe. Check met deze stresstest of je site klaarstaat, en volg het 30-60-90 dagenplan om te herstellen of voor te blijven.

     Pablo Cleij
