Afbeeldingen en SEO

Het gebruik van afbeeldingen in webdesign is een essentieel onderdeel om de visuele aantrekkingskracht en de gebruikerservaring van een website te verbeteren.

Afbeeldingen kunnen verhalen vertellen, emoties overbrengen en complexe informatie begrijpelijk maken. Het gezegde is niks voor niks 'één beeld zegt meer dan duizend woorden'.

Echter, het correct integreren van afbeeldingen vereist meer dan alleen het toevoegen van mooie plaatjes. In dit artikel bespreken we hoe je afbeeldingen effectief kunt gebruiken.

Hoe kies je de juiste afbeelding?

Wanneer je afbeeldingen kiest voor je website, is het belangrijk om te focussen op kwaliteit boven kwantiteit. Hoge resolutie en professioneel ogende afbeeldingen maken een betere indruk dan een overvloed aan lage kwaliteit beelden.

Zorg er wel voor dat je de juiste resoluties kiest. Als je kleine afbeelding hebt die niet groter dan 500 bij 500 pixels wordt, heb je geen 3.000 bij 3.000 pixels afbeelding nodig.

Kies daarnaast het juiste bestandsformaat. Waar je vroeger JPEG en PNG afbeelding gebruikte. Is het tegenwoordig aangeraden om WEBP of AVIF afbeeldingen te gebruiken.

Voeg je juiste afbeeldings attribute toe

De img tag in HTML kent verschillende attributen. Het wordt aangeraden deze te gebruiken waar mogelijk.

Alt & title

De alt en title attribute geven een omschrijving wat er op de afbeelding is te zien. Dit is goed voor SEO maar ook voor de gebruikerservaring en screenreaders.

De alt wordt gebruikt voor als de afbeelding niet geladen kan worden of voor screenreaders. De title is bedoeld voor als men met een muis op de afbeelding staat er een tooltip komt met informatie.

Srcset

Bij het gebruik van afbeelding wordt het aangeraden om het juiste formaat in te laden waar mogelijk. Met de srcset kun je aangeven welke afbeelding met welk formaat moet worden ingeladen. Zo kan je dus een kleine afbeelding op een mobiel inladen, maar de grotere variant op desktop.

Een uitgebreide uitleg kun je op mdn web docs vinden.

Loading

Standaard wordt een afbeelding eager in geladen. Dit betekend dat het zo snel mogelijk als kan wordt ingeladen. Dit heeft echter als nadeel dat als de afbeelding helemaal onder aan de pagina staat het misschien niet nodig is om het direct te doen.

Om aan te geven dat een afbeelding pas hoeft geladen te worden als deze (bijna) zichtbaar wordt gebruik je het loading attribute. Als je het attribute met de waarde 'lazy' toevoegd wordt de afbeelding pas geladen als het nodig is.

Let wel op het is nodig om de hoogte en breedte van de afbeelding reeds op te geven op de afbeelding. Hierbij geldt het dan om de afmeting van de afbeelding niet om de afmeting welke je wilt hebben. Hiermee zou je dan de volgende img tag krijgen