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.
Inhoud
- 1. Waarom afbeeldingen optimaliseren?
- 2. De juiste afbeelding kiezen
- 3. De afbeelding optimaliseren, hoe doe je dat?
- 4. Meten hoe je afbeeldingen presteren
- 5. EXIF data: wat je nog niet wist over je foto’s
- 6. In het kort: een afbeelding optimaliseren
“Te grote afbeeldingen vertragen je pagina’s en dat wil je niet”
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.
Wil je weten hoe goed Google jouw afbeelding begrijpt? Test je afbeeldingen dan met deze Cloud Vision API tool
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.
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.
Unieke afbeeldingen
Niet alleen is de kwaliteit van een afbeelding belangrijk, het is ook belangrijk dat je unieke afbeeldingen gebruikt op je website/webshop. De afbeeldingen op stockphoto sites kunnen door iedereen worden gedownload, zeker de gratis afbeeldingen. Wanneer jij dus een foto van een site als deze gebruikt, is de kans groot dat deze ook door enkele (of vele) andere sites gebruikt wordt. Google zal dit dan zien als ‘duplicate content’, oftewel dubbele content. Het lijkt dan alsof de één het van de ander heeft overgenomen en dat wordt door Google afgestraft (met een lagere positie in de zoekresultaten). Het beste is dus om zelf content te creëren. Ben je zelf niet zo goed in foto’s maken en ben je bang dat je daarmee je website minder mooi maakt? Huur dan een professionele fotograaf in om foto’s te maken. Zo ben je verzekerd van unieke content.
Kun je echt niet aan kwalitatieve unieke content komen, dan is het overigens niet zo erg om af en toe een afbeelding van een stock photo site te halen. Ze zijn er immers niet voor niks.
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.
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.
De hoeveelheid afbeeldingen op je website kunnen ook de laadtijd van de website of webshop beïnvloeden. Wanneer jij heel veel afbeeldingen op je website hebt toegevoegd, dan is het logisch dat je website wat trager is. Om dit te voorkomen wordt er steeds meer gebruik gemaakt van lazy loading. Lazy loading wil zeggen dat bepaalde gedeeltes (afbeeldingen) van je website pas worden geladen wanneer je er al naartoe scrollt. Wanneer lazy loading op de juiste manier wordt gedaan, merk jij hier weinig van. Het stuk website waar je naartoe scrollt is dan namelijk geladen op het moment dat jij daar aan komt.
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.
Structured data toevoegen
Structured data, oftewel Schema Markup, is een stukje code dat je toevoegt wanneer je een afbeelding op de website plaatst. Met dit stukje code maak je de gegevens op je website of webshop beter te begrijpen voor de zoekmachines. Doordat de zoekmachines je content beter begrijpen, kunnen ze je ook beter schalen in de zoekresultaten (SERP) en soms zelfs een speciaal plekje geven. Zo kan het bijvoorbeeld zijn dat je een rich snippet krijgt of een rich card. Beide zorgen ervoor dat je meer opvalt in de zoekresultaten doordat er meer informatie wordt toegevoegd. Denk aan breadcrumbs, producten, reviews, video’s en afbeeldingen die worden getoond aan jouw website of webshop in de zoekresultaten. Structured data wordt tegenwoordig door bijna iedere website gebruikt, waardoor je de code niet meer zelf hoeft toe te voegen. Wil je wel zelf aan de slag met structured data, dan kun je gebruik maken van JSON-LD, Microdata en RFDa.
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.
Voeg je afbeeldingen toe aan de XML sitemap
Een XML sitemap is een textbestand waarin alle URL’s van je pagina’s en de inhoud die daarop staat samengevoegd worden. Je kunt het zien als een soort adresboek voor de zoekmachines, zodat zij bepaalde informatie makkelijker kunnen vinden. Wanneer je afbeeldingen op je website of webshop hebt staan die belangrijk zijn voor de vindbaarheid, dan is het belangrijk dat deze ook worden opgenomen in de XML sitemap. Zorg dat je zoveel mogelijk informatie meegeeft in de sitemap, zodat je het makkelijker maakt voor de zoekmachines om je website of webshop te lezen.
Weten hoe je hiermee zelf aan de slag gaat? Google heeft een uitgebreide uitleg over hoe je een image sitemap opbouwt.
De omringende alinea
Niet alleen de afbeelding zelf optimaliseren kan ervoor zorgen dat je afbeelding beter gevonden wordt, ook de alinea eromheen. Door het zoekwoord in die alinea te verwerken laat je aan Google zien dat de afbeelding ook daadwerkelijk bij dat stuk tekst hoort. Google kan hierdoor makkelijker de verbinding maken tussen de afbeelding en het stuk tekst. Je content zal kwalitatief hoger worden geschaald, wat voordelig is voor je positie in de zoekresultaten.
Meten hoe je afbeeldingen presteren
Wanneer je je best hebt gedaan om je afbeeldingen te optimaliseren, dan wil je natuurlijk ook resultaten zien. De prestaties van je afbeeldingen kun je in Google Search Console vinden (eerder kon dit ook in Google Analytics, maar vanwege een wijziging kan dit niet meer). Door in Google Search Console op prestaties te klikken en vervolgens op zoektype ‘afbeelding’ of ‘video bestanden’ vind je de prestaties van de afbeeldingen. Je ziet hier niet direct om welke afbeelding het precies gaat, maar wel op welke pagina de afbeelding staat. Wanneer je vervolgens op Google de juiste zoekopdracht invoert, kun je precies zien om welke afbeelding het gaat. De resultaten die je kunt inzien zijn de vertoningen en het aantal keer dat erop geklikt is.
EXIF data: wat je nog niet wist over je foto’s
Wanneer een foto online geplaatst wordt, denken mensen vaak alleen aan dat wat op de geplaatste foto te zien is. Wat veel mensen niet weten is dat er nog zoveel meer bij komt kijken dan alleen de foto. Digitale foto’s bevatten namelijk nog veel meer informatie, welke worden opgeslagen in de zogenaamde EXIF-database (EXchangeable Image File format). Deze extra informatie bestaat onder andere uit de datum en tijd waarop de foto genomen is, maar ook uit gegevens over de camera waarmee de foto genomen is. Deze gegevens zijn handig omdat je zo op een later moment kunt nagaan met welke instellingen een foto gemaakt is. Hierdoor kun je een volgende foto bijvoorbeeld met dezelfde instellingen schieten of juist hele andere instellingen gebruiken als de foto niet goed was.
Een nadeel van deze informatie is dat vrijwel iedereen dit kan achterhalen. Hierdoor is de informatie gevoelig als het aankomt op privacy. Wanneer iemand namelijk weet met welk serienummer de foto is geschoten die jij geplaatst hebt, kan diegene ook sneller bij jou uitkomen.
Hoe je deze gegevens nu kunt inzien? Heel simpel! Je vindt de gegevens namelijk eenvoudig terug bij de eigenschappen van een foto. Gewoon even met de rechtermuisknop klikken op de foto, vervolgens op eigenschappen en dan op details klikken. Zo zie je maar dat er een stuk meer ‘verborgen’ zit achter die prachtige foto’s.
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
- Maak gebruik van unieke afbeeldingen
- Verander de bestandsnaam naar een toepasselijke naam
- Pas de bestandsgrootte en het formaat aan
- Voeg een title en alt tag toe aan de afbeelding
- Voeg structured data toe aan je website of webshop
- Maak de afbeelding responsive zodat deze meegaat met de grootte van de pagina
- Voeg je afbeeldingen toe aan de XML sitemap
- Verwerk het zoekwoord in de omringende alinea
Meten hoe je afbeeldingen het doen kan via Google Search Console. Hier kun je de vertoningen en het aantal klikken vrij eenvoudig inzien, waardoor je precies weet waar je op moet letten als je de volgende afbeelding gaat optimaliseren.
Digitale foto’s bevatten meer informatie dan je misschien in eerste instantie denkt, deze informatie wordt EXIF data genoemd en kan door vrijwel iedereen worden ingezien. Handig als je later wilt inzien met welke instellingen een foto gemaakt is.