Hoe optimaliseer je afbeeldingen op je website voor zoekmachines om je vindbaarheid te verbeteren (SEO)? In deze blogpost leer je alle basics om afbeeldingen zoals foto’s te optimaliseren voor je website, webshop, blog of andere soort website (werkt zelfs voor social media).

1: Optimaliseer de juiste HTML-tags

Dit klinkt vaak meteen eng voor mensen, maar eigenlijk is het heel simpel. Bij het uploaden van je afbeeldingen naar je website heb je de mogelijkheid om een aantal tags mee te geven. Doorgaans zijn dit simpelweg velden die je moet invullen, en dan gaat de rest van de HTML-code vanzelf, afhankelijk van je CMS (CMS = Content Management Systeem, zoals WordPress, Magento, Wix, Shopify of SquareSpace).

 

1.1: Geef een titel mee aan je afbeelding (Engels: title)

Dit is hoe je bestand heet. Doorgaans neemt je CMS de bestandsnaam over van het bestand zoals deze was opgeslagen. Als je er voor zorgt dat dit al omschrijvend is, zit je goed. Anders kun je dit vaak ook achteraf, in je CMS, nog aanpassen. Heet je foto “IMG_12632.jpg” dan is dat dus niet goed. Beter noem je je foto “Eindhoven-Centrum-Media-Markt.jpg” als dat is wat je op de foto hebt staan. De URL waar de afbeelding op de server is opgeslagen heeft hier ook mee te maken. Met mijn CMS (WordPress) wordt dit dan automatisch “https://epsilonstudios.nl/wp-content/uploads/2020/05/afbeeldingen-optimaliseren-seo-scaled.jpg” – wederom omschrijvend en dus begrijpelijk en goed indexeerbaar voor zoekmachines als Google.

1.2: Geef een ALT-tekst mee aan je afbeelding (Engels: ALT-tag)

Deze geeft een samenvatting weer van de afbeelding en is voor zoekmachines – samen met de titel – de belangrijkste factor om te bepalen wat er op de foto te zien is. Voor mensen met een visuele beperking is dit ook handig, en in sommige gevallen zelfs verplicht om in te vullen (overheidswebsites bijvoorbeeld). Met speciale software kan worden uitgelezen wat de ALT-tag worden voorgelezen aan mensen met een visuele beperking.

1.3: Geef een onderschrift mee aan je afbeelding (Engels: caption)

De ALT-tag en de titel zijn doorgaans niet zomaar zichtbaar. Als je bij een foto een onderschrift meegeeft, dan zal deze meteen onder de afbeeldingen zichtbaar zijn voor zowel mensen die de “front end” zien en lezen als bots van zoekmachines die naast de front- ook de “back-end” van de website analyseren.

1.4: Geef een omschrijving mee aan je afbeelding (Engels: description)

Tenslotte bestaat er ook nog zo iets als een omschrijving. Dit is vaak verwarrend, want je zou kunnen stellen dat de titel, alt-tekst én onderschrift eigenlijk al omschrijvend zijn. En dat is ook zo. Mijn advies is altijd om dit dan ook maar in te vullen met iets dat relevant en – uiteraard – omschrijvend is, ook al lijkt het heel veel op de eerder genoemde elementen.

afbeeldingen optimaliseren voor zoekmachines

2: Beperk de grootte van de afbeeldingen

Snelheid is een door Google daadwerkelijk bevestigde “ranking factor”. Oftewel: we weten zeker dat Google de snelheid van je website serieus neemt. Ook niet gek: als de consumentenbond (Google in dit geval) een onderzoek zou starten naar de beste supermarkt van Nederland, dan zullen zij niet alleen kijken naar hoe goed je wordt geholpen aan de kassa of servicebalie, maar ook naar de snelheid hiervan.

 

2.1: Kies de juiste bestandsformat

Regelmatig zie ik websites die afbeeldingen uploaden in PNG. Dat is echt niet verstandig om je website snel te laten laden. JPG of JPEG (beiden zijn hetzelfde) zijn veel kleiner doordat deze veel meer compressie hebben. Dat wil zeggen dat de kwaliteit van de afbeelding iets achteruit gaat (vaak amper of zelfs helemaal niet merkbaar), maar daarvoor krijg je wel een afbeelding dat al snel 3 tot 10x zo klein is in bestandsgrootte (aantal mega- of kilobites). Wat eigenlijk nog beter is – en waarschijnlijk de toekomst – dan JPG of JPEG is HEIF of HEIC. Dit is eigenlijk wederom een soort JPEG maar die met behoud van dezelfde kwaliteit als JPG of JPEG nóg kleiner is. Het nieuwe format dat staat voor “High Efficiency Image File Format” heeft nog een aantal meer voordelen, waaronder een grotere bit-diepte (meer kleuren). Echter kent dit format nu nog te veel nadelen m.b.t. comptabiliteit waardoor ik adviseer om gewoon JPG of JPEG te blijven gebruiken.

2.2: Voeg meer compressie toe

Als je afbeeldingen zoals foto’s exporteert in bijvoorbeeld Photoshop of Lightroom dien je voor web-gebruik waardig wat compressie toe te voegen. Hoeveel precies hangt af van hoeveel je bereid bent in te leveren op de kwaliteit. Ga daar maar eens mee experimenteren. Meestal is de “Quality-slider” zo tussen de 50% en 60% ideaal. Bij Epsilon Studios hebben wij speciale presets voor websites en webshops die hier al rekening mee houden. Je ontvangt van ons in feite de foto’s in 2 versies: Hoge Res. met weinig compressie (rond 5 mb per foto) en Lage Res met veel compressie (rond de 250 kb per foto).

2.3: Kies voor een lagere resolutie

Een veelgemaakte fout die ik vaak zie: foto’s die in een veel te hoge resolutie worden gepubliceerd. Dit gaat meteen ten koste van de bestandsgrootte. Een hoge resolutie voor web-gebruik kent eigenlijk geen voordelen. Ik adviseer altijd om foto’s te uploaden in 4K-resolutie. Dat is doorgaans iets te hoog, maar liever dat dan alles in te lage resolutie en over een paar jaar je daar weer aan te moeten storen. De trend is uiteraard dat schermen steeds groter worden, hetgeen samen gaat met de resoluties hiervan. 4K is voor mij een mooie middenweg voor foto’s. Met de juiste compressie instellingen kun je nog steeds uit komen tussen de 200-400kb per foto. Heb je een webshop met heel veel foto’s en weet je al dat men vooral op mobiele apparaten kijkt naar je foto’s? Dan kun je ook prima wegkomen met een veel lagere resolutie.

2.4: Achteraf extra compressie toevoegen is mogelijk

Als je op je server al honderden foto’s hebt staan in te hoge resolutie met te weinig compressie en je hebt geen tijd of zin om hier wat aan te doen (kan makkelijk uren of zelfs dagen aan werk kosten): er bestaan ook mogelijkheden om dit te automatiseren. Voor WordPress zijn er bijvoorbeeld betaalde plug-in’s beschikbaar die achteraf compressie toepassen, en ook met terugwerkende kracht,. Een voorbeeld hiervan is “Smush” van WPMU DEV.

3: Handige links