Afbeeldingen optimaliseren voor SEO

Afbeeldingen kunnen één van de grootste onderdelen, qua data, van je website zijn. Afbeeldingen worden vaak geüpload zonder ze te verkleinen of te comprimeren. Hierdoor worden ze veel groter dan nodig is. Hierdoor kan je website erg groot en traag worden om te downloaden. Vooral met een slechte internet verbinding (bijvoorbeeld in kantoor panden of nieuwbouw wijken). Ze kunnen ook een formaat hebben dat niet optimaal is. Daarnaast worden bestandsnamen vaak niet aangepast voordat ze worden gebruikt.

Het optimaliseren van afbeeldingen voor je website is zeer belangrijk. Dit voor zowel performance als vindbaarheid. Hieronder geven wij de tips om dit te optimaliseren. We raden het aan om deze stappen uit te voeren voordat je ze upload naar je CMS.

1. Gebruik het correcte bestandstype

Het juiste bestandstype gebruiken voor je afbeelding kan een groot verschil maken in de grootte van de afbeelding. Het bestandstype WebP wordt nu in de meeste browsers ondersteund. Dit is een relatief nieuw bestandstype dat betere prestaties levert dan PNG en JPEG. Dit resulteert vaak in bestanden die ~25% kleiner zijn dan JPG/PNG. Als je WebP niet kunt gebruiken, gebruik dan JPEG. Gebruik PNG alleen als je een transparante achtergrond nodig hebt (wordt niet ondersteund door JPEG). JPEG’s hebben vaak minder gegevens nodig wat resulteert in kleinere bestanden.

Tools: TinyPNG (gratis)

2. Optimaliseer het formaat van je afbeelding

Voordat je afbeeldingen uploadt, moet je altijd de vereiste grootte van de afbeelding controleren. Wordt de afbeelding alleen getoond in een resolutie van 500×500 op je website? Dan hoef je geen resolutie van 2000×2000 te gebruiken. Dit scheelt enorm in het aantal bytes (data) dat nodig is om je afbeelding in te laden.

Tools: Voorvertoning (Mac) of ImageResizer

3. Comprimeren je afbeelding

Je afbeelding kan worden gecomprimeerd met online tools of plugins. Deze compressie kan vaak de helft of zelfs meer aan MB’s besparen. Afhankelijk van de afbeelding. Deze compressietools verwijderen gegevens die niet nodig zijn of pixels die niet zichtbaar zijn voor het menselijk oog.

Tools: TinyPNG (gratis)

4. Lazyload je afbeelding

Niet alle afbeeldingen hoeven direct ingeladen te worden wanneer je een website opent. Alleen de afbeeldingen welke je gelijk ziet moeten direct ingeladen worden. De overige kunnen op een later moment, wanneer deze bijna in zicht zijn, worden ingeladen. Omdat afbeeldingen 1 van de grootste onderdelen zijn qua data scheelt dit enorm. Het later inladen van afbeeldingen heet ‘lazyloading’. Dit wordt door de meeste browsers tegenwoordig zelf al ondersteund. Veel CMS systemen, zoals WordPress, bieden hier ook plugins voor om dit te ondersteunen.

Tools: standaard HTML instelling of W3 Total Cache (WordPress)

Voorbeeld:
<img src=”bruine-leren-lakschoenen-van-bommel.jpg” alt=”Bruine leren lakschoenen van Van Bommel voor heren” loading=”lazy”>

5. Geef een goede benaming aan je afbeelding

De naam van een afbeelding is 1 van de manieren om Google de content beter te laten begrijpen. Gebruik hiervoor omschrijvende bestandsnamen waar eventueel de juiste keywords ook in verwerkt zijn. Zoals “bruine-leren-lakschoenen-van-bommel.jpg”. Dit helpt zowel om je pagina te optimaliseren voor jouw keywords maar geeft je ook betere zichtbaarheid in Google Afbeeldingen. Dit kan voor extra verkeer zorgen naar je website.

Voorbeeld:
<img src=”bruine-leren-lakschoenen-van-bommel.jpg” alt=”Bruine leren lakschoenen van Van Bommel voor heren” loading=”lazy”>

6. Geef alt-teksten mee aan je afbeelding

Middels de alt-tekst kan je, net als bij de bestandsnamen, meer content meegeven aan Google om de afbeeldingen beter te begrijpen. Het betreft een korte beschrijvende tekst van wat er gezien wordt op de afbeelding. Dit zorgt voor een betere kans om goed te ranken in Google. Deze tekst wordt tevens meegegeven aan screenreaders voor mensen met een visuele beperking.

Voorbeeld:
<img src=”bruine-leren-lakschoenen-van-bommel.jpg” alt=”Bruine leren lakschoenen van Van Bommel voor heren” loading=”lazy”>

7. Verwerk de afbeelding in een Sitemap

Sitemaps worden ingezet om aan o.a. Google mee te geven welke pagina’s er allemaal bestaan op je website. Een afbeeldingsitemap vertelt welke afbeeldingen op je website beschikbaar zijn, waar ze zich bevinden, en extra details over deze afbeeldingen. Dit helpt zoekmachines bij het sneller vinden en indexeren van je afbeeldingen, wat de kans vergroot dat ze worden weergegeven in zoekresultaten, inclusief Google Afbeeldingen.