Afbeeldingen optimaliseren: formaat, compressie en SEO

Begin met de juiste afmetingen, niet met compressie

De grootste winst zit niet in compressie maar in afmetingen. Een foto van 4000 pixels breed in een kolom van 800 pixels verspilt data, hoe goed je hem ook comprimeert. Schaal elke afbeelding daarom eerst terug naar de maximale breedte waarop hij getoond wordt. Reken voor scherpe schermen met maximaal twee keer die weergavebreedte.

WordPress genereert bij elke upload automatisch meerdere maten, maar dat werkt alleen goed als het origineel niet onnodig groot is. Verklein foto’s uit een camera of telefoon dus voor het uploaden. Voor een beeld over de volle paginabreedte is zo’n 1600 tot 2400 pixels breed ruim voldoende; voor beelden in een kolom kan het veel kleiner.

Kies WebP of AVIF en comprimeer met beleid

Moderne bestandsformaten maken afbeeldingen fors kleiner bij gelijke beeldkwaliteit. WebP wordt door alle gangbare browsers ondersteund en is de veilige standaardkeuze. AVIF comprimeert foto’s vaak nog scherper en is inmiddels breed bruikbaar. PNG bewaar je voor beelden die transparantie nodig hebben, SVG voor logo’s en iconen.

Zo pak je compressie aan

• Gebruik lossy compressie voor foto’s. Een kwaliteitsinstelling rond 70 tot 80 procent is voor bezoekers meestal niet van het origineel te onderscheiden.
• Automatiseer de omzetting. In WordPress zetten plugins of je hostingpakket uploads automatisch om naar WebP of AVIF, zodat je er niet meer naar hoeft om te kijken.
• Bewaar het origineel en comprimeer nooit een al gecomprimeerd bestand opnieuw, want kwaliteitsverlies stapelt zich op.
• Controleer het resultaat visueel op een scherp scherm voordat je een instelling sitebreed doorvoert.

Lever per schermformaat de juiste versie met srcset

Een telefoon heeft niets aan een beeld van 1600 pixels breed. Met het srcset-attribuut geef je de browser meerdere versies van dezelfde afbeelding, en met sizes vertel je hoe breed het beeld in de layout staat. De browser kiest dan zelf de kleinste versie die scherp genoeg is voor het scherm van de bezoeker.

<img src="terras-800.webp"
  srcset="terras-400.webp 400w, terras-800.webp 800w, terras-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="533"
  alt="Houten terras met plantenbakken in een stadstuin">

WordPress voegt srcset automatisch toe aan afbeeldingen in de content. Controleer wel of je thema dit niet doorbreekt bij hero-beelden en sliders, want juist daar staan vaak de zwaarste bestanden van de hele site.

Voorkom layout shift en laad in de juiste volgorde

Geef elke afbeelding een width en height mee. De browser reserveert dan de juiste ruimte voordat het bestand binnen is, waardoor de pagina niet verspringt tijdens het laden. Dat verspringen heet Cumulative Layout Shift en telt mee in de Core Web Vitals waarmee Google de paginabeleving beoordeelt.

Zet daarnaast loading=”lazy” op afbeeldingen die onder de vouw staan, zodat de browser ze pas ophaalt wanneer de bezoeker in de buurt scrolt. Eén uitzondering geldt altijd: het grootste beeld boven de vouw, meestal je hero-afbeelding, mag nooit lazy laden. Dat beeld bepaalt je Largest Contentful Paint en moet juist zo vroeg mogelijk binnenkomen. Hoe je dit veilig instelt en test, lees je in het artikel over lazy loading zonder SEO-risico.

Maak afbeeldingen vindbaar: bestandsnaam, alt-tekst en context

Google leest geen pixels maar signalen rond de afbeelding. Drie dingen bepalen de vindbaarheid in Google Afbeeldingen:

• Bestandsnaam. Een naam als houten-terras-stadstuin.webp zegt meer dan IMG-4082.webp. Gebruik korte, beschrijvende namen met koppeltekens, volgens dezelfde logica als een SEO-vriendelijke URL.
• Alt-tekst. Beschrijf functioneel wat er te zien is, in normale taal. Geen opsomming van zoekwoorden: de alt-tekst is er in de eerste plaats voor bezoekers met een schermlezer.
• Context. De tekst en het bijschrift rond de afbeelding vertellen Google waar het beeld over gaat. Plaats afbeeldingen dus bij de alinea waar ze inhoudelijk bij horen.

Let op als de URL’s van je afbeeldingen veranderen, bijvoorbeeld door een nieuw thema, een CDN of een verhuizing naar een ander domein. Zonder redirects verliest Google de opgebouwde beeldposities. Hoe je dat opvangt, staat in het kennisbankartikel over SEO bij een website-migratie.

Veelgemaakte fouten bij het optimaliseren van afbeeldingen

Deze fouten kom ik in de praktijk het vaakst tegen:

• Camerabestanden direct uploaden. Originelen van meerdere megabytes vertragen elke pagina. Fix: schaal terug naar de weergavebreedte voordat je uploadt en laat je site de rest van de maten genereren.
• Lazy loading op het hero-beeld. Het belangrijkste beeld laadt dan als laatste en je Largest Contentful Paint verslechtert. Fix: sluit het eerste beeld boven de vouw uit van lazy loading.
• Width en height weglaten. De pagina verspringt tijdens het laden en je layout shift loopt op. Fix: geef elke afbeelding vaste afmetingen mee, ook als CSS de weergave verder regelt.
• Alles naar één formaat forceren. Logo’s als zware foto exporteren of transparante beelden platslaan kost kwaliteit. Fix: kies per beeldtype, met WebP of AVIF als standaard voor foto’s.
• Alt-teksten volstoppen met zoekwoorden. Dat helpt je posities niet en stoort bezoekers met een schermlezer. Fix: één korte, natuurlijke beschrijving per beeld.
• Tekst in afbeeldingen zetten. Zoekmachines en vertaalfuncties kunnen er niets mee en op mobiel wordt het onleesbaar. Fix: gebruik echte tekst in de HTML.

Veelgestelde vragen

Bronnen en verder lezen

• Google: best practices voor afbeeldingen in Google Zoeken
• web.dev: Learn Images
• web.dev: Cumulative Layout Shift optimaliseren