Afbeeldingen maken een website aantrekkelijk en interessant voor de bezoeker:

in een mum van tijd grijpen ze de aandacht van de lezer en brengen ze de boodschap over.

Helaas heeft verkeerd gebruik van afbeeldingen een negatieve invloed op gebruikersvriendelijkheid en zoekmachine optimalisatie (SEO).

In deze post geef ik je 7 mogelijke valkuilen en hoe je deze kunt vermijden.

Valkuil 1: het bestand is te groot

Afbeeldingen zijn vaak grote bestanden. Een nadeel hiervan is dat je website langzaam laadt. Volgens Jakob Nielsen (2009) accepteren bezoekers slechts een laadtijd van 1 seconde, zonder dat dit hun gedachtestroom onderbreekt. Langere laadtijden geven bezoekers het gevoel dat niet zij niet langer invloed hebben op wat er gebeurt. Hierdoor raken zij ongeduldig en kunnen, in het ergste geval, de website verlaten.

De oplossing? Optimaliseer je afbeeldingen: maak ze kleiner (niet groter dan 200 kB) en sla ze op in het juiste bestandstype, zodat de kwaliteit van de afbeelding nagenoeg gelijk blijft.

Ik wil toch grote afbeeldingen gebruiken

Wil je toch grote afbeeldingen gebruiken? Maak dan gebruik van klikbare “thumbnails” op je website. Een thumbnail is een kleine weergave van het origineel. Klikt de bezoeker op een thumbnail, dan krijgt hij de grote afbeelding te zien.

Een mooi voorbeeld van een thumbnail in actie, zie je in mijn blogpost “Kopjes geven”.

Valkuil 2: verkeerd gebruik van JPG, PNG en GIF

Bij het opslaan van afbeeldingen heb je de keuze uit drie mogelijkheden: GIF, JPG en PNG. Hier gaat het vaak mis, want wanneer kies je nou welk bestandstype? Ik adviseer het volgende:

JPG
Gebruik dit type voor foto’s en realistische afbeeldingen. Nadeel van dit bestandstype is dat het informatie weggooit bij hoge compressie.

Daarnaast kun je een afbeelding of achtergrond
van een JPG niet
transparant maken. Dat kan alleen als je de afbeelding eerst opslaat als een bestand dat dit wel kan, zoals PNG.

PNG
Gebruik dit type voor afbeeldingen met lijnen,
veel tekst en weinig kleuren.
In tegenstelling tot JPG gooit PNG geen informatie weg en ondersteunt het transparantie.
Zo kun je de achtergrond of afbeelding wel transparant maken en de afbeelding dus ook laten overlappen met andere afbeeldingen.

GIF
Gebruik dit bestandstype als je een klein bestand hebt met weinig kleuren. GIF ondersteunt transparantie en animatie.

Valkuil 3: de bestandsnaam is niet beschrijvend genoeg

Je staat er niet bij stil, maar zoekmachines kijken naar de bestandsnaam om af te leiden waar de afbeelding over gaat. Geef de afbeelding daarom een beschrijvende naam en voeg er zoekwoorden aan toe.

Voorbeeld:
Heb je een afbeelding van een rode Ford Fiësta? Dan zou je het bestand “auto-ford.jpg” kunnen noemen of “rode-auto-ford.jpg”.
Nog beter is de volgende naam: “2014-ford-fiesta-rood.jpg”.

Het is duidelijk dat het laatste voorbeeld de beste beschrijving geeft. Daarnaast bevat het relevante zoekwoorden, zoals “Ford Fiësta” (merk), “rood” (kleur) en “2014” (bouwjaar).

Valkuil 4: het alt-attribuut is niet beschrijvend genoeg

Dat je het alt-attribuut moet invullen is inmiddels bij iedereen duidelijk. Doe je dit namelijk niet, dan hebben bezoekers die de weergave van plaatjes uitzetten of mensen met een visuele handicap geen idee wat er op het plaatje staat.

Wat hier echter regelmatig fout gaat, is dat de alt-tekst vaak te weinig zegt over wat er op de afbeelding staat.

Voorbeeld:
Heb je een plaatje van rode appels in een rieten mand, gebruik dan niet de omschrijving “Appels”, maar gebruik “Rode appels in een rieten mand.”

Kortom, geef een zo duidelijk mogelijke omschrijving van de afbeelding. Gebruik hiervoor maximaal 10 woorden. Voeg ook zoekwoorden toe.

Heb je meerdere afbeeldingen van hetzelfde product? Bijvoorbeeld horloges? Maak dan het onderscheid tussen de verschillende horloges duidelijk: voeg een merknaam toe of een andere specificatie waarin de horloges van elkaar te onderscheiden zijn.

Valkuil 5: Keyword stuffing

Het opnemen van zoektermen in bestandsnamen, alt-teksten,
title-teksten en bijschriften is belangrijk. Ze zorgen ervoor dat de bezoeker het juiste plaatje vindt.

Probeer echter te vermijden dat je dezelfde zoektermen herhaaldelijk gebruikt. Deze methode heet “keyword stuffing” en komt onnatuurlijk over op de lezer. Bovendien leidt dit tot een lagere ranking door zoekmachines!

Het vermijden van “keyword stuffing” is makkelijk: gebruik verschillende omschrijvingen voor het bijschrift, de alt-tekst en de title-tekst.

Valkuil 6: de afbeeldingen voegen niks toe aan de inhoud

Uit onderzoek van Jakob Nielsen (2010) blijkt dat bezoekers de voorkeur geven aan informatie dragende afbeeldingen. Decoratieve afbeeldingen werden genegeerd.

Kortom, gebruik afbeeldingen die:

• de tekst ondersteunen/samenvatten
• het tekstdoel duidelijk maken
• de lezer informeren

Valkuil 7: het ontbreken van de "height" en "width" attributen

Als je veel afbeeldingen hebt op je site, dan duurt het even voordat deze geladen zijn. Soms komt het voor dat je in deze laadperiode afbeeldingen en andere content op je scherm ziet verspringen.

Dit is te voorkomen door de “height” en “width” attributen van het img (image) element in te stellen. De browser kent dan de afmetingen van de afbeeldingen en reserveert hier alvast ruimte voor.

Ken jij nog meer valkuilen? Laat je reactie achter!