Afbeeldingen Optimaliseren voor SEO: Complete Gids

Afbeeldingen maken je website visueel aantrekkelijk en helpen bezoekers je content beter te begrijpen. Maar ongeoptimaliseerde afbeeldingen zijn ook een van de meest voorkomende oorzaken van trage websites. Grote bestanden vertragen je laadtijd, ontbrekende alt-teksten missen SEO-kansen en verkeerde bestandsformaten verspillen bandbreedte.

Google Images is bovendien een significante verkeersbron. Goed geoptimaliseerde afbeeldingen verschijnen in de Google Afbeeldingen-resultaten, in reguliere zoekresultaten via afbeeldingencarrousels en in Google Discover. Door je afbeeldingen te optimaliseren, verbeter je zowel je paginasnelheid als je zichtbaarheid in meerdere zoekkanalen.

Alt-tekst, ook bekend als alternatieve tekst of alt-attribuut, is een beschrijving van een afbeelding die wordt weergegeven als de afbeelding niet kan worden geladen en die wordt voorgelezen door schermlezers voor slechtziende gebruikers. Voor zoekmachines is alt-tekst de primaire manier om te begrijpen wat een afbeelding voorstelt.

Een goede alt-tekst is beschrijvend, specifiek en natuurlijk. In plaats van 'afbeelding' of 'foto' schrijf je 'Belgisch chocoladegebak met frambozen op een wit bord'. Vermijd keyword stuffing: 'chocolade Belgie kopen goedkoop online chocolade Belgisch' is spam en schaadt je rankings.

Elke informatieve afbeelding op je website verdient een unieke, beschrijvende alt-tekst. Decoratieve afbeeldingen die geen inhoudelijke waarde toevoegen, zoals achtergrondpatronen of scheidingslijnen, mogen een leeg alt-attribuut krijgen. Dit vertelt schermlezers en zoekmachines dat de afbeelding decoratief is en kan worden genegeerd.

De bestandsnaam van je afbeelding is een extra signaal voor zoekmachines. Gebruik beschrijvende, leesbare bestandsnamen met koppeltekens als woordscheiding. 'rode-velvet-taart-bakkerij-gent.jpg' is veel beter dan 'IMG_20240315_142356.jpg' of 'afbeelding1.jpg'.

Houd je bestandsnamen bondig maar informatief. Beperk je tot drie tot vijf beschrijvende woorden die de inhoud van de afbeelding samenvatten. Gebruik kleine letters en vermijd spaties, underscores of speciale tekens. Dit maakt de URL's van je afbeeldingen schoner en beter leesbaar.

Organiseer je afbeeldingen in een logische mappenstructuur op je server. In plaats van alles in een enkele map te gooien, gebruik je submappen per categorie of pagina. Bijvoorbeeld '/images/producten/taarten/' of '/images/blog/seo-tips/'. Dit helpt bij het beheer en kan zoekmachines extra context geven over de inhoud.

Het keuze van het juiste bestandsformaat maakt een groot verschil in bestandsgrootte en kwaliteit. WebP is het aanbevolen formaat voor de meeste webafbeeldingen. Het biedt een 25 tot 35 procent kleinere bestandsgrootte dan JPEG bij vergelijkbare kwaliteit en ondersteunt zowel lossy als lossless compressie, plus transparantie.

AVIF is een nog nieuwer formaat dat nog betere compressie biedt, maar de browserondersteuning is minder breed dan WebP. Een toekomstbestendige aanpak is om AVIF als eerste keuze aan te bieden, WebP als fallback en JPEG als laatste optie. Met het HTML picture-element kun je meerdere formaten specificeren en de browser het best ondersteunde formaat laten kiezen.

Voor foto's en complexe afbeeldingen is WebP of JPEG het beste formaat. Voor afbeeldingen met tekst, scherpe lijnen of transparantie kies je WebP of PNG. SVG is ideaal voor logo's, iconen en illustraties omdat het schaalbaar is zonder kwaliteitsverlies. GIF gebruik je alleen voor eenvoudige animaties, en zelfs dan is geanimeerd WebP een betere optie.

Compressie vermindert de bestandsgrootte van je afbeeldingen zonder significant kwaliteitsverlies. Tools als TinyPNG, Squoosh, ShortPixel en Imagify comprimeren je afbeeldingen automatisch. Voor WordPress bestaan plugins zoals Smush en EWWW Image Optimizer die afbeeldingen bij het uploaden automatisch optimaliseren.

Daarnaast is het belangrijk om afbeeldingen in de juiste afmetingen aan te bieden. Laad geen afbeelding van 4000 bij 3000 pixels als die op je website wordt weergegeven op 800 bij 600 pixels. Schaal afbeeldingen vooraf naar de maximale weergavegrootte. Gebruik het srcset-attribuut om verschillende afmetingen aan te bieden voor verschillende schermgroottes, zodat mobiele gebruikers geen desktopformaat hoeven te laden.

Een goede vuistregel is dat geen enkele afbeelding op je website groter zou moeten zijn dan 200 kilobyte, tenzij het een achtergrondafbeelding op volledig scherm betreft. Hero-afbeeldingen kun je beperken tot 300 tot 500 kilobyte. Meet je resultaten met Google PageSpeed Insights, dat specifieke aanbevelingen geeft per afbeelding.

Lazy loading is een techniek waarbij afbeeldingen pas worden geladen wanneer ze in het zichtbare gedeelte van het scherm komen. Afbeeldingen die onderaan de pagina staan, worden dus niet meteen geladen bij het openen van de pagina. Dit verbetert de initiële laadsnelheid aanzienlijk, vooral op pagina's met veel afbeeldingen.

De eenvoudigste implementatie is het native loading-attribuut in HTML. Voeg loading='lazy' toe aan je img-tags en de browser regelt de rest. Dit wordt ondersteund door alle moderne browsers. Voor de eerste afbeelding die zichtbaar is bij het laden van de pagina, ook wel above the fold genoemd, gebruik je loading='eager' of laat je het attribuut weg om te voorkomen dat de LCP-metriek verslechtert.

Voor meer controle kun je JavaScript-bibliotheken als lazysizes of lozad gebruiken. Deze bieden extra functionaliteit zoals het tonen van een blur-up placeholder terwijl de afbeelding laadt. WordPress-sites hebben lazy loading standaard ingebouwd sinds versie 5.5. Controleer wel of het correct is geconfigureerd en of je hero-afbeelding niet onbedoeld lazy wordt geladen.

Een image sitemap helpt Google om alle afbeeldingen op je website te ontdekken, ook afbeeldingen die via CSS of JavaScript worden geladen en die een gewone crawl mogelijk zou missen. Je kunt afbeeldingsinformatie toevoegen aan je bestaande XML-sitemap of een aparte image sitemap aanmaken.

Voeg voor elke afbeelding de URL toe, plus optioneel een titel, bijschrift, licentie-informatie en geografische locatie. Populaire CMS-platforms en SEO-plugins genereren image sitemaps meestal automatisch. Controleer of de afbeeldingen in je sitemap daadwerkelijk bereikbaar zijn en niet worden geblokkeerd door je robots.txt.

Structured data versterkt je afbeelding-SEO verder. Product schema markup met een afbeeldingsveld zorgt ervoor dat je productafbeeldingen verschijnen in rich results. Recipe schema toont kookfoto's direct in de zoekresultaten. ImageObject schema geeft extra context over individuele afbeeldingen. Hoe meer informatie je Google geeft, hoe beter je afbeeldingen kunnen presteren in de zoekresultaten.

Een Content Delivery Network (CDN) distribueert je afbeeldingen over servers wereldwijd, zodat bezoekers ze laden vanaf de dichtstbijzijnde server. Dit verlaagt de laadtijd aanzienlijk, vooral voor bezoekers die geografisch ver van je hostingserver zitten. Populaire CDN-diensten als Cloudflare, BunnyCDN en AWS CloudFront bieden bovendien automatische beeldoptimalisatie.

Moderne CDN's en beeldoptimalisatieservices kunnen afbeeldingen on-the-fly converteren naar het optimale formaat, schalen naar de juiste afmetingen en comprimeren op basis van het apparaat van de bezoeker. Diensten als Cloudinary, imgix en Fastly Image Optimizer nemen je het handmatige optimalisatiewerk grotendeels uit handen.

Vergeet ook de cache-instellingen niet. Stel lange cache-headers in voor afbeeldingen die zelden veranderen, zodat terugkerende bezoekers ze niet opnieuw hoeven te laden. Een cache-duur van een jaar is gebruikelijk voor statische afbeeldingen. Gebruik versienummers of hashes in bestandsnamen wanneer je een afbeelding toch moet bijwerken. Bij Hazier adviseren we de optimale beeldstrategie voor elke website die we bouwen of optimaliseren.