Afbeeldingen optimaliseren voor SEO en snelheid

Afbeeldingen zijn op veel websites verantwoordelijk voor het grootste deel van de laadtijd. Een foto rechtstreeks uit de camera of telefoon kan meerdere megabytes groot zijn, terwijl hij op de website maar een paar honderd pixels breed wordt getoond. Met een paar vaste werkwijzen maak je pagina's sneller én beter vindbaar, ook in Google Afbeeldingen.

Afbeeldingen zijn één onderdeel van technische SEO. Wil je de hele website laten doorlichten en verbeteren, lees dan hoe wij SEO uitbesteden aanpakken.

1. Gebruik de juiste afmeting

Sla een afbeelding op in ongeveer de breedte waarin hij maximaal wordt getoond. Voor een volle-breedte-afbeelding is dat vaak rond de 1.600 tot 2.000 pixels; voor een afbeelding in een kolom veel minder. Een foto van 6.000 pixels breed die op 800 pixels wordt getoond, laat de bezoeker onnodig veel downloaden.

Webflow, Shopify en recente WordPress-versies maken automatisch kleinere varianten voor verschillende schermen (responsive images). Upload daarom één goede, niet overdreven grote versie, en laat het systeem de rest doen.

2. Kies een modern bestandsformaat

• WebP — Gebruik: Standaardkeuze voor foto's en illustraties; veel kleiner dan JPEG bij vergelijkbare kwaliteit
• AVIF — Gebruik: Nog kleiner, maar het omzetten kost meer rekenkracht; goed als je platform het ondersteunt
• SVG — Gebruik: Logo's, iconen en eenvoudige illustraties; scherp op elk formaat
• PNG — Gebruik: Alleen als transparantie nodig is en WebP geen optie is
• JPEG — Gebruik: Terugvaloptie voor foto's

In Webflow kun je bestaande afbeeldingen in het Assets-paneel naar WebP of AVIF converteren. Shopify levert afbeeldingen automatisch in een modern formaat uit. In WordPress regel je dit met een optimalisatieplugin of via je hostingpartij.

3. Comprimeer zonder zichtbaar kwaliteitsverlies

Ook in een modern formaat is compressie nodig. Gratis hulpmiddelen zoals Squoosh (in de browser) laten het verschil direct zien. Voor de meeste foto's is een kwaliteitsinstelling tussen 70 en 85 procent op het oog niet van het origineel te onderscheiden.

4. Geef een beschrijvende bestandsnaam

IMG_4821.jpg zegt niets. elektrische-bakfiets-zwart-zijaanzicht.webp wel. Gebruik kleine letters en koppeltekens, net als bij URL's. Hernoem de afbeelding vóór het uploaden; achteraf wijzigen is in de meeste systemen omslachtig.

5. Schrijf een alt-tekst

De alt-tekst beschrijft wat er op de afbeelding staat, voor mensen die de afbeelding niet kunnen zien en voor zoekmachines. Decoratieve afbeeldingen krijgen een lege alt-tekst. Uitgebreid in Alt-tekst schrijven.

6. Laad afbeeldingen slim

• Lazy loading voor afbeeldingen lager op de pagina: ze laden pas als de bezoeker in de buurt scrolt. In HTML is dat het attribuut loading="lazy"; Webflow en WordPress zetten dit vaak standaard aan.
• Niet lazy voor de hoofdafbeelding bovenaan (de hero). Die bepaalt vaak de Largest Contentful Paint, een van de Core Web Vitals. Zet die afbeelding in Webflow op "Eager" en houd hem licht.
• Afmetingen opgeven (breedte en hoogte), zodat de pagina niet verspringt tijdens het laden.

Snelle controle

Open PageSpeed Insights, voer je URL in en kijk onder de diagnose naar meldingen als "Afbeeldingen in de juiste grootte" en "Afbeeldingen weergeven in moderne indelingen". Daar zie je per afbeelding hoeveel winst mogelijk is. Bij een algemeen trage website helpt ook Website traag: eerste controles.

Voorbeeld

Stel: een restaurantwebsite toont bovenaan een sfeerfoto van 4 MB als JPEG. Na verkleinen tot 1.920 pixels breed en omzetten naar WebP is dezelfde foto enkele honderden kilobytes. Op mobiel verschijnt de pagina daardoor merkbaar sneller, zonder dat de foto er minder mooi uitziet.

Veelgestelde vragen

Helpen geoptimaliseerde afbeeldingen echt bij SEO?

Ja, op twee manieren: snellere pagina's zijn beter voor gebruikers en Core Web Vitals, en goede bestandsnamen, alt-teksten en omringende tekst helpen je afbeeldingen te laten verschijnen in Google Afbeeldingen.

Moet ik al mijn oude afbeeldingen opnieuw uploaden?

Begin bij de pagina's met de meeste bezoekers en de grootste afbeeldingen. Veel platformen kunnen bestaande afbeeldingen ook in bulk omzetten.

Wordt mijn afbeelding onscherp op grote schermen?

Niet als je de juiste maximale breedte kiest. Responsive images zorgen ervoor dat grote schermen een grotere variant krijgen dan mobiele telefoons.

Is een CDN nodig voor afbeeldingen?

Webflow en Shopify gebruiken standaard een CDN. Bij WordPress kan een CDN de laadtijd verder verbeteren, vooral bij bezoekers verder weg.

Wat doe ik met afbeeldingen die tekst bevatten?

Zet belangrijke tekst als echte tekst op de pagina. Tekst in afbeeldingen is slecht leesbaar op mobiel, voor schermlezers en voor zoekmachines.

Hulp nodig?

Is je website traag en weet je niet waar het aan ligt? Een technische SEO-analyse laat precies zien welke afbeeldingen en scripts de vertraging veroorzaken.

Zet lazy loading niet op de grootste afbeelding bovenaan de pagina. Die moet juist zo snel mogelijk laden.