Efficiënte websites voor vakantiehuizen, B&B’s en hotels

Hoe je met het optimaliseren van afbeeldingen meer boekingen krijgt

Een direct toepasbare handleiding in 10 stappen!

Wanneer je een afbeelding aan je website toevoegt is het verstandig deze afbeelding altijd te optimaliseren voor de zoekmachines. Een goede optimalisatie van een afbeelding helpt voor een betere vindbaarheid in Google. Trek extra bezoekers naar je website en ga direct aan de slag met het optimaliseren van afbeeldingen.

Meer bezoekers = meer boekingen.

Hoe werkt optimaliseren van afbeeldingen dan?

Zoekmachines helpen jou met het vinden van de juiste content. Maar hun computers (zoals de Google bots) zijn niet in staat om afbeeldingen te lezen.

Door het optimaliseren van de afbeeldingen die je gebruikt kan Google de afbeeldingen indexeren. Geef je afbeelding altijd de juiste naam en zoektermen mee.

Als je daarnaast je afbeeldingen vooraf in het juiste formaat maakt, zorg je ervoor dat je pagina snel laadt wat zowel je lezers als de zoekmachines erg waarderen.

Afbeeldingen optimaliseren: hoe doe je dat?

Hieronder leg ik jou in 10 stappen uit hoe jij je afbeeldingen optimaliseert:

Bereid je afbeeldingen goed voor vóórdat je ze in je website gebruikt:

Wat je vervolgens doet als je de afbeelding in je website laadt:

Door deze stappen op de genoemde volgorde te verwerken haal je het beste resultaat. Succes ermee en als je vragen hebt, laat het mij dan weten!

Bereid je afbeeldingen goed voor vóórdat je ze in je website gebruikt

1 - Geef afbeeldingen de juiste naam

Zoekmachines kijken naar de bestandsnaam van de afbeelding. Een goed geoptimaliseerde afbeelding begint dus met de juiste naam. Zorg dat die naam niet te lang is. En aansluit bij het onderwerp van de pagina.

Voorbeeld

Je schrijft een blog over de heerlijke tuin van je accommodatie, bijvoorbeeld Vakantiehuis De Vlinder. En dat je gasten als het weer het toestaat het ontbijt op het terras kunnen gebruiken. Je plaatst daar een afbeelding bij van dat ontbijt in de tuin.

Dan moet die afbeelding niet IMG_2759.jpg heten, maar ontbijt-heerlijke-tuin-Vakantiehuis-De-Vlinder.jpg. Een naam als IMG_2759.jpg zegt de zoekmachines helemaal niets. Maar ontbijt-heerlijke-tuin-Vakantiehuis-De-Vlinder.jpg zegt iets over de afbeelding dat begrijpelijk is voor de zoekmachines.

afbeeldingen optimaliseren - voorbeeld juiste naam
Afbeelding die ik heb gebruikt als voorbeeld voor dit artikel.

TIP

  • Hou de bestandsnaam kort en krachtig. Het advies is 3 tot 8 woorden.
  • Het is niet nodig om stopwoorden (een, de, in, van en dergelijke) te gebruiken.
  • Gebruik zogenaamde dashes (dit-zijn-dashes) tussen de woorden in je bestandsnaam en geen underscores (dit_zijn_underscores). Als je underscores gebruikt wordt dat door Google als één woord gelezen: ditzijnunderscores.jpg. Het woord ditzijnunderscores bestaat niet en zegt niets. Met dashes wordt ieder woord apart gelezen en geïndexeerd.

2 - Kies het juiste bestandstype

Je kan verschillende bestandstypes gebruiken voor de afbeeldingen op je website. Ieder bestandstype heeft zijn eigen extensie. Dat is de vermelding na de punt, bijvoorbeeld .jpg, .png, .gif en .tiff.

De twee meest gebruikte bestandstypes op websites

Ik geef je de twee belangrijkste bestandstypes met een korte uitleg waarvoor je beter de één of beter de andere kan gebruiken:
  • JPG is vooral geschikt voor grote, kleurrijke afbeeldingen met veel details. Bijvoorbeeld zo’n afbeelding als van het ontbijt in de tuin. Als je foto’s met je camera maakt en deze verkleint en opslaat als .jpg afbeelding, dan wordt deze veel kleiner. De foto wordt gecomprimeerd, dat betekent samengeperst. Er gaat dan helaas wel wat kwaliteit verloren. Maar op een beeldscherm valt dat vaak niet zo op.
  • PNG is ook een manier om te verkleinen. Hierbij wordt de afbeelding ook samengeperst, maar dan zonder kwaliteitsverschil. Het verschil met JPG is dat PNG niet zoveel kleuren kan bevatten. Daarom is PNG vooral geschikt voor logo’s, iconen en eenvoudige afbeeldingen met grote vlakken met weinig kleurverschillen. Maar bijvoorbeeld ook als je een afbeelding gebruikt die een transparante achtergrond moet hebben.
voorbeeld png afbeelding vogelhuis
Voorbeeld van een png afbeelding van een vogelhuisje met een transparante achtergrond.

3 - Verklein de afbeeldingen qua afmeting

Een originele afbeelding is al snel 3000 px of meer breed. Dat hangt af van de instellingen van je camera. Nou zijn er tegenwoordig weliswaar grote beeldschermen, maar de meeste beeldschermen zijn veel kleiner dan 3000 px. Mijn eigen beeldscherm op kantoor is 1680 px breed. Een tablet heeft vaak een beeldscherm van 768 px. En een mobieltje is vaak nog veel kleiner.

Het is dus niet nodig om zulke grote afbeeldingen te gebruiken.

Hoe groot is jouw afbeelding nou eigenlijk?

Dat kan je terugvinden in de eigenschappen van de afbeelding. Er zijn verschillende mogelijkheden om de eigenschappen van een afbeelding terug te vinden. Hoe dat voor jou is hangt ervan af of je een Windows of Mac pc hebt en de programma’s die jij er op hebt staan.

Voorbeeld

Bij mij werkt het als volgt. Ik heb een Windows pc en gebruik hiervoor de verkenner. Als voorbeeld neem ik weer de afbeelding van het ontbijt in de tuin. Ik heb mijn verkenner zo ingesteld dat ik rechts het detailvenster open heb staan. Daar zie ik direct dat deze afbeelding een afmeting heeft van 3553 x 2000 px en 3,08 MB groot is. Dat is echt veel te groot voor op een website, zowel qua afmeting als qua grootte.

afbeeldingen optimaliseren voorbeeld afmeting en grootte afbeelding
Voorbeeld hoe je kan zien wat de afmeting en grootte van een afbeelding is.

Wil je dat ik even met je meekijk op jouw pc hoe jij deze informatie kan terugvinden? Neem dan contact met mij op.

Voordeel van verkleinen

Het voordeel van het verkleinen van de afmeting van de afbeelding is dat deze direct ook kleiner van grootte (KB) wordt. Ik heb de afbeelding van het ontbijt in de tuin genomen en deze verkleind naar verschillende afmetingen en dit zijn de resultaten:

  • 2000 x 1126 px: van 3,08 naar 2,35 MB
  • 1600 x 901 px: van 3,08 naar 1,64 MB
  • 1000 x 563 px: van 3,08 naar 770 KB


Dat is een forse verkleining.

Welke afmetingen voor jou gelden

Jouw webbouwer kan je aangeven welke afmeting jij op jouw website moet gebruiken voor afbeeldingen. Dat hangt vaak samen met de lay-out van je website en de theme die je gebruikt.

Zorg er samen met jouw webbouwer ook voor dat de afbeeldingen op je site responsive zijn. Dat betekent dat zij zich qua formaat automatisch aanpassen aan het beeldscherm waar je bezoeker gebruik van maakt.

4 - Optimaliseer de afbeeldingen qua grootte

Tegenwoordig gebruiken steeds meer mensen een mobiel apparaat om websites te bezoeken. De verbinding voor mobiel is vaak minder goed en snel dan thuis of op kantoor waar je een vaste kabel gebruikt. Omdat de snelheid van je website daardoor nog belangrijker is geworden, geven de zoekmachines hogere scores aan snellere websites. Zo kom je hoger in de zoekresultaten.

Impact van afbeeldingen op snelheid

Afbeeldingen hebben een enorme impact op de snelheid van je webpagina. Een originele afbeelding van je camera of mobieltje is al snel enkele MB’s groot. Stel dat je twee originele afbeeldingen op je pagina gebruikt en deze zijn beiden 4MB groot, dan is je pagina alleen door die twee afbeeldingen al meer dan 8MB. Dat duurt een eeuwigheid om te laden en vinden zowel je bezoekers als je zoekmachines niet leuk.

Daarom is het belangrijk om je afbeeldingen te verkleinen qua afmeting (zie stap 3) maar ook qua grootte. Tegelijkertijd is het belangrijk dat de afbeelding wel mooi en scherp blijft zodat je website aantrekkelijk is voor je bezoekers.

Test optimalisatie

Ik heb de verkleinde afbeelding in afmeting 1000 x 563 px (770 KB) van het voorbeeld bij stap 3 geoptimaliseerd met een paar verschillende gratis online programma’s en dit zijn de resultaten:

  • Jpeg.io: van 770 KB naar 340 KB
  • TinyPNG: van 770 KB naar 370 KB
  • Pixlr X: van 770 KB naar 325 KB bij hoge kwaliteit en 161 KB bij medium kwaliteit

Ik heb best goede ogen waarmee ik veel details kan zien (volgens mijn opticien “heb ik veel pixels in mijn ogen”) en op mijn beeldscherm zie ik geen verschil in de verschillende resultaten.

Nog betere resultaten mogelijk?

Ja, de eerlijkheid gebiedt mij te zeggen dat er nog betere optimalisatie resultaten mogelijk zijn. Vaak gaat het dan echter om een betaald programma of een programma dat je op je pc moet installeren.

Een aanrader is het (gratis) programma Riot, dat je op je pc installeert. Daarmee kun je de stappen 3 en 4 ook ineens doen. Als ik dan dezelfde afbeelding vanuit het origineel van 3553 x 2000 px en 3,08 MB verklein naar 1000 x 563 px en optimaliseer naar 70% kwaliteit, houd ik een bestand over van slechts 140 KB. Riot werkt alleen met Windows.

Verder hoor ik goede geluiden over ImageOptim, dat te downloaden is als Mac app. Deze werkt dus alleen op een Mac. Aangezien ik geen MAC heb kan ik deze niet zelf testen.

Wat houdt dat nou allemaal in: KB, MB, GB?
Wil je er meer over weten, kijk dan op de website van De rekenmachine.

Wat je vervolgens doet als je de afbeelding in je website laadt

5 - Geef afbeeldingen een goede alternatieve tekst

Er zijn drie belangrijke redenen om de alt tekst te gebruiken:

  • Voor mensen met een fysieke beperking. Het oorspronkelijke doel van de alt tekst was om afbeeldingen te beschrijven voor bezoekers die deze afbeeldingen niet kunnen zien. Zoals mensen die blind of slechtziend zijn en die screen readers of brailleleesmachines gebruiken om je website te ‘bekijken’. Deze apparaten gebruiken de alt tekst om aan de lezer aan te geven waar de afbeelding over gaat. Het is dus goed voor de toegankelijkheid van je website.
  • Voor alle bezoekers. Mocht de afbeelding om wat voor reden dan ook niet zichtbaar zijn, dan kunnen alle bezoekers aan de hand van de alt tekst zien waar de afbeelding over gaat. Dat is dus positief voor de functionaliteit van je website.
  • Voor de zoekmachines. Hoewel de zoekmachines de afgelopen jaren steeds slimmer zijn geworden, zijn zij nog steeds niet in staat om afbeeldingen te ‘lezen’ zoals tekst. Zij zijn tegenwoordig wel in staat om zich een algemeen beeld van een afbeelding te vormen, maar er is geen garantie dat zij de afbeelding helemaal correct interpreteren. Zij gebruiken de alt tekst om beter te begrijpen waar de afbeelding over gaat. Deze tekst wordt zelfs in de broncode van de website opgenomen. Een goede alt tekst is dus goed voor je score in de zoekmachines.


Voldoende redenen dus om ervoor te zorgen dat alle afbeeldingen die je gebruikt een alt tekst krijgen!

Omschrijf waar het over gaat

Omschrijf in de alt tekst steeds zo goed mogelijk waar de afbeelding over gaat. Het moet wel kort en bondig zijn. De meest populaire screenreaders kappen de alt tekst af bij ongeveer 125 karakters. Dus is het raadzaam dat als maximale lengte aan te houden. Gebruik de zoekwoorden die belangrijk zijn voor de pagina of het artikel, maar stop de alt tekst niet vol met een lijst met alleen maar zoekwoorden. Want dat beschouwt Google als spam, waardoor je minpunten krijgt.

Voorbeeld

  • Dus niet: “ontbijt terras tuin huis huisjes vakantiehuis vakantiehuisje vlinder gras planten struiken bomen”.
  • Ok is: “ontbijt tuin”.
  • Beter is: “ontbijt in de tuin van ons vakantiehuis”.
  • Nog beter is: “Als het mooi weer is kan je het ontbijt buiten op het terras van ons Vakantiehuis Vlinder gebruiken.”
afbeeldingen optimaliseren voorbeeld alternatieve tekst
Voorbeeld van een alternatieve tekst van een afbeelding.

Maar wat nou als je een plaatje gebruikt dat alleen maar voor decoratie is bedoeld? In dat geval is het beter om geen alt tekst te gebruiken en de alt tekst leeg te laten.

Voorbeeld

Gaat de tekst over het ontbijt in de mooie tuin van je accommodatie, maar plaats je daar puur voor decoratie een afbeelding bij van bijvoorbeeld een bloemetje, laat dan de alt tekst leeg. De bots van de zoekmachines en de screenreaders slaan dit plaatje dan over omdat het niet relevant is voor de inhoud van je tekst. En dat is ook precies de bedoeling.

Heb je interesse om meer te lezen over de alt tekst en wil je nog beter weten wanneer je precies wat doet, bekijk dan de zogenaamde Decision Tree op de website van W3.org.

6 - Pas de WordPress titel aan

Als je een afbeelding in je website laadt, gebruikt WordPress automatisch de bestandsnaam als titel. De WordPress titel (of bestandsnaam) moet je niet verwarren met het zogenaamde “title attribuut” (zie stap 7).

WordPress gebruikt deze titel wel binnen de mediabibliotheek, maar je vindt hem meestal niet terug op je website. Soms zie je dat de titel in fotogalerijen gebruikt wordt.

Handig voor de mediabibliotheek

Een goede titel is dus niet zo relevant voor de zoekmachine optimalisatie (SEO) van je website, maar vooral handig als je een afbeelding in je media bibliotheek moet opzoeken. Het is een stuk gemakkelijker om een afbeelding te zoeken als die “Ontbijt in de heerlijke tuin van ons Vakantiehuis De Vlinder” heet. Dan zoek je bijvoorbeeld op ‘ontbijt’ en ‘tuin’ en geeft WordPress de juiste afbeelding(en) weer. Heet de afbeelding IMG_2759.jpg, dan heeft deze naam totaal geen relatie met ontbijt en tuin en vind je hem niet terug.

Mocht je dus per ongeluk toch een afbeelding hebben geüpload met als naam bijvoorbeeld IMG_2759.jpg, dan kan je die in WordPress hernoemen.

afbeeldingen optimaliseren voorbeeld WordPress titel
Voorbeeld van een WordPress titel van een afbeelding.

7 - Wat is het title attribuut precies en is het zinvol om deze te gebruiken?

Omdat ik bij stap 6 heb uitgelegd wat de WordPress titel van een afbeelding is en wat je ermee kan, wil ik ook graag nog even iets kwijt over het title attribuut. Daar is namelijk soms wat spraakverwarring over. Maar het zijn toch echt twee verschillende dingen.

Het title attribuut is een HTML attribuut en is bedoeld om meer aanvullende informatie te geven over een bepaald element in je website, zoals voor een afbeelding. In sommige browsers zie je de title tekst als tooltip wanneer je met je muis over de afbeelding beweegt. Als je nu met je muis over deze afbeelding gaat zie je wat ik bedoel.

afbeeldingen optimaliseren voorbeeld tooltip
Voorbeeld van een tooltip voor een afbeelding

Niet zo zinvol? Of wel?

Web ontwikkelaars geven aan dat het gebruik van het title attribuut momenteel in de meeste gevallen niet echt zinvol is. Veel browsers, screen readers en mobiele apparaten verwerken het op verschillende manieren. Voor afbeeldingen wordt het tegenwoordig nauwelijks meer gebruikt. Sinds versie 5 heeft WordPress de optie om een title attribuut toe te voegen voor een afbeelding verwijderd. Je moet dan echt in de code duiken om een title attribuut toe te voegen en dan wordt het voor veel mensen te complex. Overigens wordt er bij WordPress nog steeds over gediscussieerd of ze het opnieuw beschikbaar moeten stellen.

En wat de zoekmachines betreft. Wat Google precies doet is niet helemaal duidelijk en daar zullen zij ook nooit helemaal open over zijn. Zelfs de geleerden zijn het er niet over eens. Sommige web ontwikkelaars zijn van mening dat het title attribuut niet gebruikt wordt bij zoekopdrachten. Een simpel testje in 2016 wees uit dat het title attribuut bij die test wel door Google werd opgepikt.

Echt belangrijke informatie!

Hoe dan ook, sowieso is het altijd beter om echt belangrijke aanvullende informatie gewoon in de hoofdtekst van je pagina of bericht te plaatsen. Want dan is het voor iedereen duidelijk, leesbaar en vindbaar.

8 - Voeg een onderschrift (caption) toe

Waar je de alt tekst gebruikt om de afbeelding te beschrijven voor zoekmachines en screen readers, gebruik je de caption of het onderschrift om de afbeelding voor alle bezoekers te beschrijven. De caption is (meestal) zichtbaar onder je afbeelding. Ik zeg meestal, want of de caption wel of niet zichtbaar is, hangt af van je website instellingen en/of theme. Ondervind je daar een probleem mee, vraag het dan even aan je webbouwer.

De alt tekst is echt cruciaal voor SEO. De caption mag je gebruiken maar hoeft niet per se. Je gebruikt hem alleen als je aanvullende informatie over de afbeelding wilt geven die direct voor de bezoeker te zien is. Als je in de bijbehorende tekst al uitlegt waar de afbeelding over gaat, hoef je niet ook nog eens exact hetzelfde te zeggen in een caption.

Zoekmachines

De zoekmachines lezen en indexeren ook het onderschrift. Heb je dus nog aanvullende informatie die je nog niet in de alt tekst of de hoofdtekst vermeld hebt, dan is het zinvol de caption daarvoor te gebruiken.

Caption valt op

Daarnaast is het zo dat de bezoekers van je website teksten scannend lezen. Daarbij trekken ook captions extra aandacht waardoor het vooral voor je bezoekers raadzaam is om deze te gebruiken.

Zoekwoorden verwerken

En, gebruik je inderdaad een onderschrift, dan kan het nooit kwaad om daar je zoekwoorden in te verwerken. Als het maar een logische tekst is voor die afbeeldingen en binnen dat artikel.

afbeeldingen optimaliseren voorbeeld onderschrift
Voorbeeld van een onderschrift van een afbeelding.

9 - Voeg - indien nodig - een omschrijving (description) toe

De omschrijving of description is de uitgebreide beschrijvende tekst die wordt weergegeven op de bijlagepagina van de afbeelding. Op de meeste websites is dat niet het geval. Er zijn enkele gevallen waarin het interessant is om zo’n bijlagepagina te gebruiken. Bijvoorbeeld voor websites waarbij vooral op basis van afbeeldingen een verhaal verteld wordt, zoals fotografen.

Niet bij alle themes

In dat geval moet je een theme gebruiken waarbij het mogelijk is om deze bijlagepagina te tonen, want niet alle thema’s ondersteunen de pagina voor mediabijlagen. Als je dit gebruikt, dan kan je een heel verhaal kwijt over die afbeelding. Hele uitgebreide informatie kan je hier dan plaatsen. Zelfs linkjes. En een copyright verklaring – voor fotografen ook interessant.

Let erop als je wel bijlagepagina’s gebruikt, dat je dan ook echt unieke omschrijvingen maakt. Want als je alleen maar de alt tekst naar de omschrijving kopieert, dan ziet Google dit als dubbele content en komt je pagina of bericht lager in de zoekresultaten.

Als je geen bijlagepagina's gebruikt

Als je geen bijlagepagina’s gebruikt voegt de omschrijving SEO-technisch gezien niets toe. Daarom is het in dat geval niet erg zinvol om de omschrijving te gebruiken. Overbodige tijd en moeite zeg maar. Overleg even met jouw webbouwer wat in jouw situatie het beste is en om te weten of je hier tijd en moeite in moet steken.

Voorbeeld

Ik gebruik de foto die ik al eerder als voorbeeld heb gebruikt van het ontbijt op het terras. De alt tekst hier was: “Als het mooi weer is kan je het ontbijt buiten op het terras van ons Vakantiehuis Vlinder gebruiken. ” Een voorbeeld van de omschrijving: “Het ontbijt staat klaar op ons gezellige terras. Op de tafel vind je koffie, thee, vruchtensap, boter, eieren, fruit en beleg. De broodjes brengen wij vers gebakken als je aan tafel zit. Om het terras de borders waarin allerlei mooie struiken en bloeiende planten staan. Het is hier heerlijk om hier je dag te beginnen. Copyright © Vakantiehuis Vlinder. Zie vakantiehuisvlinder.nl.”

afbeeldingen optimaliseren voorbeeld omschrijving
Voorbeeld van een onderschrift (caption) van een afbeelding

10 - Optimaliseer de bijbehorende tekst

Het is belangrijk dat de tekst, de afbeelding, de bestandsnaam, de alt tekst en de omschrijving bij elkaar aansluiten. Het is dus belangrijk dat de omliggende tekst over hetzelfde onderwerp gaat.

Slimme zoekmachines

De zoekmachines zijn slim genoeg om te beoordelen of het een pagina is die gaat over de mooie tuin van je vakantiehuis gaat of dat het om een webshop voor tuinplanten gaat. Technisch gezien kunnen zij je pagina beter beoordelen als tekst en afbeelding op elkaar aansluiten. Hierdoor krijg je een betere score van Google en andere zoekmachines voor je website en kom je hoger in de zoekresultaten. Waardoor je meer bezoekers aantrekt.

Wil jij meer boekingen?

Wil je jouw website ook beter vindbaar maken? Wanneer er meer mensen op je website komen krijg je ook meer boekingen.

Laten we samen eens kijken naar de mogelijkheden!

succesvolle boekingen met Bij Websites
Accommodatie-eigenaren die blij zijn met de nieuwe boekingen die binnen komen.

Fijn als je dit deelt

Share on facebook
Share on linkedin
Share on pinterest
Share on twitter
Share on email

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

11 superbelangrijke elementen van jouw website

10 + 1 superbelangrijke elementen van jouw website!

En bijbehorende tips wat je er allemaal mee kan doen.

Dit vind je vast ook interessant

11 superbelangrijke elementen van jouw website

Download helemaal gratis en voor niets

10 + 1 superbelangrijke elementen van jouw website!

en bijbehorende tips wat je er allemaal mee kan doen

Na het downloaden van mijn e-book ontvang je regelmatig meer tips van mij om jouw online zichtbaarheid te verbeteren en meer boekingen voor jouw vakantiehuis, B&B of hotel te krijgen!

Volgens de regels van de AVG moet je akkoord gaan met mijn privacyverklaring als je je gegevens bij mij achter laat. Ik zal jouw gegevens niet verspreiden noch verkopen. Ik hou net zo min van spam als jij!

11 superbelangrijke elementen van jouw website

Download helemaal gratis en voor niets

10 + 1 superbelangrijke elementen van jouw website!

en bijbehorende tips wat je er allemaal mee kan doen

Na het downloaden van mijn e-book ontvang je regelmatig meer tips van mij om jouw online zichtbaarheid te verbeteren en meer boekingen voor jouw vakantiehuis, B&B of hotel te krijgen!

Volgens de regels van de AVG moet je akkoord gaan met mijn privacyverklaring als je je gegevens bij mij achter laat. Ik zal jouw gegevens niet verspreiden noch verkopen. Ik hou net zo min van spam als jij!