Afbeeldingen optimaliseren voor SEO betekent: elke afbeelding uploaden op de breedte waarop hij getoond wordt, in WebP (of SVG voor logo's), gecomprimeerd tot het punt waarop je geen verschil ziet, met een beschrijvende bestandsnaam en alt-tekst. Afbeeldingen onder de vouw laad je later in, de grote afbeelding bovenaan nooit. Onze kijk daarop is nuchterder dan […]
Afbeeldingen optimaliseren voor SEO betekent: elke afbeelding uploaden op de breedte waarop hij getoond wordt, in WebP (of SVG voor logo's), gecomprimeerd tot het punt waarop je geen verschil ziet, met een beschrijvende bestandsnaam en alt-tekst. Afbeeldingen onder de vouw laad je later in, de grote afbeelding bovenaan nooit.
Onze kijk daarop is nuchterder dan de meeste checklists: afbeeldingen optimaliseer je niet voor Google, maar voor de bezoeker die anders wegklikt voordat hij je telefoonnummer ziet. Snelheid is een feature. Een trage site verliest leads vóór het eerste contactmoment, en dat kost meer dan een paar posities. En de winst zit bijna nooit in alle afbeeldingen, maar in de paar beelden die als eerste in beeld komen.
Waar wij dit op baseren
Onlinemeersucces.nl heeft 300+ websites in hosting en onderhoud en draait 100+ websites op een eigen systeem met 22 eigen plugins. Afbeeldingen zijn daarbij geen eenmalig project maar dagelijks onderhoud: klanten uploaden zelf, thema's en pagina-bouwers veranderen, en elke nieuwe slider kan een snelle pagina weer traag maken. Daarom werken we met vaste regels in plaats van een lijst tips, en controleren we na wijzigingen opnieuw.
Wat we bij het doorlichten van sites steeds weer tegenkomen, ook in de 367 gratis websitescans die we tot nu toe hebben gedaan:
- Een headerfoto of slider die recht van de camera of telefoon is geüpload, zodat precies het eerste beeld het traagst laadt.
- Logo's als groot PNG-bestand, terwijl een SVG een fractie weegt en scherper is.
- Een slider met meerdere grote foto's die allemaal tegelijk laden, terwijl de bezoeker er één ziet.
- Een optimalisatieplugin die wel is geïnstalleerd, maar nooit op de bestaande mediabibliotheek is losgelaten.
- Productfoto's met namen als DSC_0012.jpg en lege alt-teksten.
Geen van deze punten is moeilijk op te lossen. Het probleem is dat niemand er eigenaar van is, dus het komt na elke nieuwe upload terug.
De beslisregels die we zelf hanteren
Dit zijn onze vuistregels voor WordPress-sites. Ze zijn bedoeld om zonder discussie toe te passen, en pas af te wijken als je een goede reden hebt.
| Situatie | Formaat | Afmeting (breedte) | Laden |
|---|---|---|---|
| Grote afbeelding bovenaan (hero, header, eerste slide) | WebP | Maximaal 2× de getoonde breedte, in de praktijk zelden meer dan 2.000 px | Nooit lazy; dit is vaak je LCP-element |
| Foto in de tekst of in een kolom | WebP | 2× de kolombreedte | Lazy loading |
| Productfoto waar detail de verkoop maakt | WebP, iets minder hard gecomprimeerd | Groot genoeg voor inzoomen, origineel niet groter dan nodig | Eerste productfoto niet lazy, de rest wel |
| Logo, icoon, eenvoudige illustratie | SVG (uit betrouwbare bron) | Niet van toepassing | Logo in de header niet lazy |
| Schermafbeelding met tekst | WebP of PNG | Getoonde breedte, liever bijsnijden dan verkleinen | Lazy loading |
Drie regels die de tabel aanvullen:
- Afmeting eerst, compressie daarna. Een foto van 4.000 pixels breed die op 800 pixels getoond wordt, kun je niet "wegcomprimeren". Verkleinen pakt de pixels aan, comprimeren de kilobytes. Je hebt ze allebei nodig, in die volgorde.
- Eén plek waar gecomprimeerd wordt. Comprimeert je plugin bij uploaden, lever dan geen al zwaar gecomprimeerde bestanden aan. Twee keer comprimeren geeft kleurbanden en vlekken zonder dat het bestand nog veel kleiner wordt.
- Altijd breedte en hoogte meegeven. Dan reserveert de browser vooraf de ruimte en verspringt de pagina niet tijdens het laden. Dat verspringen meet Google als CLS, een van de Core Web Vitals.
Lazy loading: de instelling die het vaakst verkeerd staat
Lazy loading betekent dat een afbeelding pas laadt als de bezoeker ernaartoe scrolt. Voor alles onder de vouw is dat winst. Voor de grote afbeelding bovenaan is het schade: dat beeld is vaak het element waarop Google de laadsnelheid meet (de LCP), en lazy laden betekent dat de browser er bewust later aan begint.
WordPress zet lazy loading automatisch aan en probeert de eerste afbeelding uit te zonderen. Pagina-bouwers, sliders en achtergrondafbeeldingen in een sectie doorkruisen dat geregeld, omdat WordPress dan niet weet welk beeld "eerst" is. Ga er dus niet van uit dat het goed staat. De controle kost twee minuten: draai PageSpeed Insights op je homepage en je belangrijkste dienstpagina, en kijk welk element als LCP wordt aangewezen. Staat daar een afbeelding met lazy loading, dan is dat de eerste fix.
Welk formaat, en waarom niet altijd AVIF?
WebP is voor foto's de veilige standaard: kleiner dan JPEG bij vergelijkbare kwaliteit en door alle gangbare browsers ondersteund. AVIF comprimeert vaak nog sterker, maar het omzetten kost meer rekentijd en niet elke tool of plugin kan ermee overweg. Ons advies: kies WebP als standaard en laat AVIF alleen aan een plugin over als die het betrouwbaar doet. De winst van WebP naar AVIF is klein vergeleken met de winst van een te groot origineel naar de juiste afmeting.
Op servers met LiteSpeed kan de cachingplugin automatisch WebP-versies van je uploads maken en die serveren aan browsers die ze ondersteunen. Je originelen blijven dan bewaard. Dat bespaart handwerk, maar lost geen te grote originelen of verkeerd ingestelde lazy loading op.
Bestandsnaam en alt-tekst: klein, maar niet overslaan
Google leest een foto niet zoals een mens. De bestandsnaam is een kleine hint, de alt-tekst weegt zwaarder en is ook nodig voor bezoekers met een schermlezer. Kort, beschrijvend, kleine letters, koppeltekens tussen woorden: badkamer-renovatie-inloopdouche.webp in plaats van IMG_4821.jpg. Beschrijf wat er te zien is, niet waar je op wilt scoren. Hoe je goede alt-teksten schrijft en wanneer je ze leeg laat, staat in alt-teksten schrijven.
Bestandsnamen van afbeeldingen die al geïndexeerd zijn, hernoemen we niet massaal. Dat levert weinig op en breekt makkelijk links. Pas het toe op nieuwe uploads en op beelden die je toch vervangt.
Een bestaande site opruimen: in deze volgorde
Heb je al honderden afbeeldingen, begin dan niet bij de oudste upload. Begin waar de bezoeker binnenkomt.
- Meet je drie belangrijkste pagina's (homepage, best bezochte dienst- of productpagina, pagina met de meeste aanvragen) en noteer het LCP-element.
- Vervang handmatig de afbeeldingen bovenaan die te groot zijn of lazy laden. Hier zit bijna altijd de grootste winst per minuut werk.
- Laat je optimalisatieplugin één keer op de hele bibliotheek los, zodat ook oude uploads WebP-versies krijgen.
- Vervang PNG-logo's door SVG en haal sliders weg die niemand doorklikt. Eén sterke foto doet meestal meer.
- Leg de beslisregels vast voor iedereen die iets uploadt, en meet na een maand opnieuw. Anders ben je over een half jaar terug bij af.
Voor het bredere snelheidsplaatje, zoals caching, scripts en hosting, lees je website sneller maken. Wil je dit soort controles niet zelf bijhouden, dan hoort het bij WordPress-onderhoud uitbesteden.
Veelgestelde vragen
Hebben geoptimaliseerde afbeeldingen echt invloed op je positie in Google?
Indirect. Lichtere afbeeldingen maken je pagina sneller en stabieler, en dat telt mee in hoe Google de gebruikservaring beoordeelt. Bestandsnaam en alt-tekst helpen in Google Afbeeldingen. Een zwakke pagina til je er niet mee naar boven, maar een trage hero-afbeelding kan een goede pagina wel tegenhouden, en kost je vooral bezoekers die afhaken voordat ze contact opnemen.
Hoe groot mag een afbeelding zijn op een website?
Houd als vuistregel maximaal twee keer de breedte aan waarop de afbeelding getoond wordt. Een foto in een kolom van 600 pixels hoeft dus niet breder te zijn dan 1.200 pixels. Voor een afbeelding over de volle breedte kom je zelden boven de 2.000 pixels uit. Daarna comprimeer je tot je op een normaal scherm geen verschil meer ziet.
Moet ik al mijn afbeeldingen omzetten naar WebP?
Niet handmatig. Een goede optimalisatieplugin maakt WebP-versies automatisch aan en serveert die, terwijl je originelen bewaard blijven. Nieuwe uploads lever je wel meteen in de juiste afmeting aan, want een plugin verkleint niet altijd. Logo's en iconen zet je om naar SVG, mits het bestand uit een betrouwbare bron komt.
Moet ik lazy loading aan of uit zetten?
Aan voor alles onder de vouw, uit voor de afbeelding die bij het openen van de pagina direct in beeld staat. Dat beeld is vaak je LCP-element, en lazy laden vertraagt het juist. Controleer met PageSpeed Insights welk element als LCP wordt aangewezen; pagina-bouwers en sliders zetten lazy loading regelmatig op de verkeerde afbeelding.
Wil je weten welke afbeeldingen op jouw site de eerste indruk vertragen, en wat er daarnaast nog lekt? Vraag een gratis websitescan aan. We kijken naar snelheid, techniek en conversie, en vertellen je welke drie dingen het eerst aangepakt moeten worden. Die doorlichting is ook het startpunt van onze SEO-aanpak.
