Afbeelding optimalisatie: wat is het en waarom doe je het?

’Een foto zegt meer dan duizend woorden’, die uitspraak heb je vast vaak genoeg gehoord. Wanneer je een website aan het bouwen bent is het dan ook erg belangrijk om hier afbeeldingen op te plaatsen. Hiermee verhoog je de leesbaarheid en gebruiksvriendelijkheid van de website. Daarnaast kan een afbeelding ook bijdragen aan het optimaliseren van de pagina, mits je ervoor zorgt dat de afbeelding optimalisatie ook in orde is. Hierdoor wordt je pagina namelijk beter gevonden en laadt deze ook nog eens sneller dan dat je er klakkeloos een afbeelding op zet. Van een trage pagina wordt niemand blij en hier zullen je bezoekers dan ook snel van afhaken. Hierdoor loop je het risico dat deze bezoeker zijn antwoord ergens anders gaat zoeken en jouw pagina verlaat.

Waarom afbeeldingen optimaliseren?

De afbeeldingen op je website optimaliseren doe je om verschillende redenen. De eerste reden is dat wanneer je een afbeelding optimaliseert, je deze ook in het juiste formaat maakt voor de website. Te grote afbeeldingen zorgen ervoor dat je website langzamer wordt, terwijl het helemaal niet nodig is om zulke grote afbeeldingen op je website te plaatsen. Plaats je meerdere te grote afbeeldingen, dan kan de laadtijd van je website bezoekers laten afhaken nog voor ze het doel van je website bereikt hebben. Een andere reden voor het optimaliseren van je afbeeldingen is om hoger te scoren in Google. Tijdens het optimaliseren kun je namelijk informatie toevoegen aan de afbeeldingen waardoor duidelijk wordt waar de afbeelding over gaat. Hierdoor is het voor Google duidelijk wat deze afbeelding inhoudt en daar zullen ze je voor belonen. Afbeeldingen optimaliseren neemt vaak maar weinig tijd in beslag, maar kan wel net die extra conversie opleveren.

Een afbeelding optimaliseren voorkomt dat je website trager wordt en draagt bij aan de conversie van je website.

De juiste afbeelding kiezen

Ben jij voor je website op zoek naar een flink aantal afbeeldingen? Dan zijn er twee manieren om aan die afbeeldingen te komen. De eerste is om afbeeldingen te gebruiken die je zelf in je bestand hebt of zelf gaat maken. De tweede optie is om gebruik te maken van andermans afbeeldingen (met toestemming natuurlijk). Heb je zelf geen eigen beeldmateriaal? Dan zijn er online een aantal beeldbanken waar je gratis of tegen betaling afbeeldingen vanaf kunt downloaden. Denk hierbij aan Pexels, Pixabay en Shutterstock. Wanneer je deze afbeeldingen download, dan mag je deze gebruiken voor jouw eigen content. Bekijk wel goed van tevoren waar je de afbeeldingen vandaan haalt en of je deze ook daadwerkelijk mag gebruiken op jouw eigen website. Wanneer een afbeelding copyright heeft, mag je deze namelijk niet zomaar zonder toestemming gebruiken.

Er zijn verschillende websites waar je gratis afbeeldingen kunt vinden

Zoek afbeeldingen die aansluiten bij hetgeen je op de website vertelt. Heb je het bijvoorbeeld over een grasmaaier in je tekst, zorg er dan voor dat op de afbeelding een grasmaaier te zien is. Heb je wel eigen beeldmateriaal of de mogelijkheid om zelf beeldmateriaal te maken? Dan heeft dat altijd de voorkeur. Hierdoor kun je zelf bepalen wat er op de foto te zien is en heb je unieke afbeeldingen die bij jouw diensten/producten passen. Zorg dat je de kwaliteit van de foto’s goed houdt en dat deze scherp zijn.

De afbeelding optimaliseren, hoe doe je dat?

Nu je weet waarom het optimaliseren van een afbeelding belangrijk is, wil je natuurlijk ook weten hoe je dat doet. Voor het optimaliseren van een afbeelding hoef je slechts een aantal stappen te doorlopen. Hieronder worden die stappen uitvoerig beschreven.

Opslaan als .jpg, .png of .gif

Wanneer je de juiste afbeelding gevonden hebt is het belangrijk om deze op de juiste manier op te slaan.

  • jpg of jpeg: Dit is de meest gebruikte manier van een afbeelding opslaan. Wanneer je een afbeelding opslaat, dan gebeurt dit veelal al in .jpg. Als je deze afbeeldingen wilt gebruiken voor op jouw website, dan is het van belang dat je een goede balans zoekt tussen de kwaliteit en de bestandsgrootte.
  • png: Dit zijn afbeeldingen met een hogere kwaliteit en grotere bestandsgrootte. Daarnaast is .png ook erg geschikt voor afbeeldingen met een transparante achtergrond. Dit zorgt er namelijk voor dat de afbeelding mooier overvloeit in de pagina. Doordat de kwaliteit hoger is, zullen de kleuren ook beter tot hun recht komen.
  • gif: Jpg en png ondersteunen geen bewegende afbeeldingen. Mocht je dus te maken hebben met een bewegende afbeelding of animatie, dan kun je voor .gif kiezen. Let wel op dat dit niet overal ondersteund wordt. Gif is dan ook minder geschikt voor het gebruik van foto’s.

Door de juiste manier van opslaan te gebruiken haal je het optimale uit je afbeelding en zorg je dat deze op zijn mooist wordt weergegeven.

Bestandsnaam veranderen

Als je een afbeelding opslaat, dan heeft deze vaak al een standaardnaam, zoals ‘IMG1592.jpg’. Deze naam heeft vaak weinig te maken met wat er op de afbeelding te zien is. Een onderdeel van afbeelding optimalisatie is dan ook om de naam te veranderen in een naam die wel bij de afbeelding past. Hierdoor kan Google namelijk ook inschatten wat er op de afbeelding te zien is, waardoor de afbeelding ook bij de juiste zoekopdrachten naar boven kan komen. Neem bijvoorbeeld een afbeelding van een Labrador puppy voor op je website van een hondenkennel in Aalsmeer. Wanneer je deze afbeelding bijvoorbeeld ‘labrador-puppy-aalsmeer.jpg’ noemt en iemand zoekt in Google afbeeldingen op Labrador puppies, dan zal jouw afbeelding (en dus jouw website) sneller te zien zijn.

Het veranderen van de bestandsnaam is een belangrijk onderdeel van de optimalisatie.

Bestandsgrootte en formaat aanpassen

De bestandsgrootte van de afbeeldingen op je website kan een grote invloed uitoefenen op de laadtijd van je pagina’s. Wanneer de afbeeldingen te groot zijn, dan heeft je pagina meer tijd nodig om te laden. Tegenwoordig willen mensen steeds sneller resultaten. Wanneer jouw pagina dus iets trager laadt door te grote afbeeldingen, dan loop je de kans dat sommige bezoekers eerder zullen afhaken. Hierdoor loop je potentiële klanten mis, alleen maar omdat jouw afbeeldingen te groot zijn. Om dit te voorkomen kun je heel eenvoudig je afbeeldingen verkleinen. Dit kun je doen in Photoshop of een vergelijkbare tool. Hou hiervoor voor de afbeeldingen bij een tekst een maximale bestandsgrootte van 100 kb aan. Gaat het om een header foto of andere afbeelding die het hele scherm in beslag neemt, dan mag hij best iets groter zijn (tussen de 300 en 500 kb). Daarnaast kun je de afbeelding nu ook bijsnijden naar de gewenste vorm en formaat. Probeer hierbij op heel je website zo consistent mogelijk te zijn. Consistentie houdt het overzichtelijk en dat zorgt voor een betere gebruikerservaring. Wanneer je een afbeelding groter wilt maken dan de officiële formaten, dan kan het zijn dat de afbeelding kwaliteit verliest. Dit wil je dan ook eigenlijk liever niet.

Title en alt tags toevoegen

Nadat je de bestandsnaam en bestandsgrootte van je afbeelding hebt aangepast wordt het tijd om de afbeelding te plaatsen via het CMS van je website. Deze kun je meestal vrij eenvoudig uploaden op de voor jou gewenste plek. Wanneer je dit hebt gedaan dan heb je in de code van de afbeelding de mogelijkheid om een title tag en alt tag toe te voegen. De title tag is de tekst die verschijnt als je met je muis over de afbeelding heen gaat. De alt tag voeg je toe voor als je afbeelding niet goed geladen kan worden. Beide kunnen een korte beschrijving van de afbeelding zijn. Niet alleen is dit handig voor gebruikers om te begrijpen waar de afbeelding over gaat, maar het is ook handig voor Google. Google kan hierdoor namelijk ook ‘lezen’ waar de afbeelding over gaat.

Maak je afbeeldingen mobile responsive

Tegenwoordig wordt er steeds meer gebruik gemaakt van mobiele telefoons om dingen op te zoeken. Het is dan ook niet gek om je pagina in te richten met de gedachte dat deze op de telefoon bekeken wordt (mobile responsiveness). Een telefoonscherm is natuurlijk een stuk smaller en kleiner dan een desktop scherm. Hier wil je dan ook rekening mee houden wanneer je een afbeelding op je pagina zet. Wanneer je dit niet zou doen, dan wordt de pagina op je mobiele telefoon in dezelfde verhouding weergegeven dan deze op de desktop wordt weergegeven. Hierdoor zal de gebruiker veel moeten scrollen en slepen over het beeldscherm. Door een afbeelding responsive te maken, zorg je ervoor dat deze op de telefoon anders weer wordt gegeven dan op je desktop scherm. Zo kun je de afbeelding op je desktop bijvoorbeeld naast de tekst zetten, maar op je mobiele versie onder de tekst. Dit kun je in de code van de afbeelding aangeven met een speciale tag.

Door een afbeelding responsive te maken, zorg je ervoor dat deze in de juiste verhoudingen wordt weergegeven op iedere device.

In het kort: een afbeelding optimaliseren

Wanneer je ervoor wilt zorgen dat je pagina sneller laadt en je een hogere positie wilt bereiken in Google met je pagina, dan is het van belang om ook je afbeeldingen te optimaliseren. Hiermee help je Google de afbeelding makkelijker te indexeren, waardoor je beloont zult worden met betere resultaten.

Een afbeelding optimaliseren doe je als volgt:

  • Kies de juiste afbeelding en sla deze op als .jpg, .png of .gif
  • Verander de bestandsnaam naar een toepasselijke naam
  • Pas de bestandsgrootte en het formaat aan
  • Voeg een title en alt tag toe aan de afbeelding
  • Maak de afbeelding responsive zodat deze meegaat met de grootte van de pagina