10 dingen die je moet weten over afbeeldingsoptimalisatie

Als je een webwinkel beheert dan is afbeeldingsoptimalistie een kunst die je moet beheersen. Van het aantrekken van het winkelend publiek dat door Google afbeeldingen aan het bladeren is tot het verminderen van de laadtijden van je website. Afbeeldingsoptimalisatie kan een belangrijk onderdeel zijn van een succesvolle webshop.

Heb je jezelf ooit weleens afgevraagd:

  • Waarom komen mijn productafbeeldingen nooit naar voren als ik bij Google afbeeldingen aan het zoeken ben?
  • Moet ik “alt text” toevoegen aan mijn foto’s?
  • Wat is het verschil tussen een JPG, GIF en PNG en gebruik ik deze goed?

In deze blog krijg je antwoord op al deze vragen en meer. Bereid je voor op een diepe duik in 10 “must know” beeldoptimalisatie tips:

1. Geef een afbeelding een basale, bondige en beschrijvende naam

Het is makkelijk om al je afbeeldingen in je site te zetten met de standaardnaam die je camera er aan geeft. Is dat een goed idee? NEEN!

Met het oog op SEO is het belangrijk om termen te gebruiken waarop ook daadwerkelijk gezocht wordt. Het creëren van beschrijvende, trefwoord-rijke bestandsnamen is een cruciaal onderdeel van het optimaliseren van je afbeeldingen. Zoekmachines indexeren niet uitsluitend de teksten op je site, maar ze ook zoeken ook naar trefwoorden in de gebruikte bestandsnamen van je afbeeldingen.

Laten we de volgende afbeelding als voorbeeld nemen:

Hierbij kan gebruik worden van de standaardnaam die de camera er aan heeft gegeven, bijvoorbeeld DSMIMAGE10.jpg. Toch zou het veel beter zijn om de bestandsnaam te veranderen naar: 2012-Ford-Mustang-LX-rood.jpg

Denk er ook over na hoe je klanten zoeken naar producten op je site. Welke termen en volgordes worden gebruikt om te zoeken? In het bovenstaande voorbeeld kunnen gebruikers zoeken door gebruik te maken van de volgende zoektermen:

  • 2012 Ford Mustang LX rood
  • Ford Mustang LX rood 2012
  • Ford Mustang LX 2012 rood

Een goede gewoonte is om te kijken naar Google Analytics en te kijken welke zoektermen jouw bezoekers gebruiken. Wat voor een woordvolgorde wordt het meest gebruikt bij het zoeken binnen je site? Bepaal welke dit is en pas dit patroon toe op hoe je je afbeeldings-bestandsnamen formuleert.

Als je er niet zo gedetailleerd op in wilt gaan, zorg er dan op zijn minst voor dat je goede zoekwoorden gebruikt voor je afbeeldingen (en probeer hierbij beschrijvend te zijn!).

2. Opitmaliseer je “alt text”

Een alt text is de alternatieve tekst van een afbeelding, dit is relevant voor Google, voorleessoftware en als noodoplossing mocht de afbeelding niet correct geladen worden. Zelfs als de afbeelding wel wordt weergegeven dan wordt deze tag nog weergegeven als je met je muisaanwijzer boven de afbeelding gaat staan.

Het alt attribuut voegt ook SEO waarde toe aan je website. Het toevoegen van de juiste alt text bij de afbeeldingen kan je helpen om een betere ranking te verkrijgen bij zoekmachines, omdat Google in staat is om de zoekwoorden te associëren met de beelden. In feite is het gebruik van alt text waarschijnlijk de beste manier om je webshop-producten naar voren te laten komen bij de Google zoekresultaten en ook bij de afbeeldingen.

Laten we eens kijken naar de broncode van een alt text:

De topprioriteit als het gaat om beeldoptimalisatie is om voor iedere productafbeelding een alt text in te vullen.

Hier zijn een aantal eenvoudige regels als het gaat om alt text:

  • Beschrijf je afbeeldingen simpelweg in de taal van je doelgroep, net zoals bij de bestandsnamen.
  • Als je producten een bepaald model nummer of een barcode hebben, dan is het een goed idee deze te noemen in je alt text.
  • Gebruik geen niet-beschrijvende trefwoorden (bijvoorbeeld: alt=”ford mustang muscle car koop nu goedkoop beste prijs afgeprijsd sale”).
  • Gebruik geen alt text voor decoratieve afbeeldingen. Zoekmachines kunnen je straffen voor “over-optimalisatie”.

Tot slot, controleer je website regelmatig. Bekijk de broncode om er zeker van te zijn dat de relevante alt text gevuld zijn.

3. Denk na over beeldhoeken en afmetingen

Iets dat we steeds meer zien is dat een product vanaf verschillende hoeken wordt weergegeven. Als je terugkijkt naar het voorbeeld van de Ford Mustang, dan zou je niet slechts één foto van de auto weergeven – al helemaal niet als je deze probeert te verkopen. Het is in je eigen belang om ook foto te tonen van:

  • Het interieur
  • De achterkant, met name de spoiler
  • Close-ups van de velgen
  • Het motorblok, het is tenslotte een Mustang

De beste manier om te profiteren van deze aanvullende foto’s is door je alt text en bestandsnaam aan te vullen. Voor iedere productfoto maak je dus een unieke alt text, bijvoorbeeld:

  • 2012-Ford-Mustang-LX-Red-leder-Interior-Trim.jpg -> met de alt text: alt = “2012 Ford Mustang LX rood lederen interieur Trim”
  • 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> met de alt text: alt = “2012 Ford Mustang LX Red Rear View Air Spoiler”

De truc is hier om beschrijvingen toe te voegen aan je basis alt text zodat potentiële klanten landen op je website. Als je dit extra werk verricht, zal Google je belonen met gretige zoekers.

Een waarschuwing voor het gebruik van grotere afbeeldingen

Je wilt waarschijnlijk ook dat de bezoekers een vergrote versie van de afbeelding kunnen zien, iets dat goed is voor de gebruikerservaring – wees wel voorzichtig.

Wat je ook doet, plaats niet simpelweg de grootste versie van de afbeelding op je site en maak hem kleiner door middel code. Dit zorgt er namelijk voor dat de laadtijd van de pagina langer wordt, omdat een grotere afbeelding zorgt voor een grotere bestandsgrootte.

In plaats daarvan, zorg ervoor dat er een kleinere afbeelding standaard wordt weergegeven en een grotere afbeelding beschikbaar is in een pop-up of op een aparte pagina te bekijken is.

4. Verklein de bestandsgrootte van je afbeeldingen

Een aantal feitjes:

  • De gemiddelde consument wacht op desktop of tablet niet langer dan 3 seconden op het laden van een website.
  • … en ongeveer 5 seconden op mobiel.
  • Google gebruikt laadtijd als een factor in hun ranking algoritme.

Als je foto’s hebt die langzaam op het scherm tevoorschijn komen en er 15 seconden over doen om te laden – dan kun je afscheid nemen van een potentiële klant!

Dus wat doe je dan?

Wanneer een klant naar je site komt, kan het even duren afhankelijk van de grootte van de bestanden voordat deze zijn geladen. Al helemaal als het gaat om afbeeldingen, des te groter de bestandsgrootte des te langer het duurt voordat de pagina volledig is geladen.

Als je erin slaagt om de grootte van de afbeelding te verminderen op je site en de laadsnelheid van je site weet te versnellen, dan klikken bezoekers minder snel weg.

Eén van de manieren waarop je afbeeldingen kan verkleinen is door gebruik te maken van de “Save for Web” functionaliteit in Adobe Photoshop. Door hier gebruik van te maken, kan je de afbeelding zo klein mogelijk maken terwijl je de kwaliteit acceptabel houdt.

Wat als je geen Photoshop hebt?

Als je geen Adobe Photoshop hebt dan zijn er verscheidene online hulpmiddelen die je kan gebruiken voor beeldbewerking. Adobe heeft zelfs een online beeldbewerkingsprogramma op photoshop.com. Dit online hulpmiddel bevat niet alle mogelijkheden van de complete versie van Adobe Photoshop, maar het bevat alle basis onderdelen voor beeldbewerking en kost geen rib uit je lijf.

Andere indrukwekkende online beeldbewerkingsprogramma’s zijn:

  • PicMonkey – door deskundigen beschreven als een “verbluffend goede fotobewerkingsprogramma”.
  • Pixlr – is super gebruiksvriendelijk, en komt ook met een 100% gratis app voor je smartphone, zodat je ook onderweg kunt bewerken.
  • FotoFlexer – is een ander vrij geavanceerde online foto-editor. FotoFlexer stelt je zelfs in staat om te werken met lagen!

Tot slot heb je GIMP. GIMP is een open-soure en gratis beeldbewerkingsprogramma die draait op Windows, Mac en Linux. Je kan er alles mee doen wat dat je met Photoshop kunt, maar het is vaak net iets minder gebruiksvriendelijk. Voor een gratis beeldbewerkingsprogramma is er echter niks beters te vinden.

Hoe groot zouden mijn afbeeldingen moeten zijn?

Een goede maatstaf voor webshop-afbeeldingen is om te proberen de afbeeldingen kleiner dan 70 kb te maken. Dit kan soms lastig zijn, helemaal voor grotere afbeeldingen, maar daar kom ik dadelijk op terug…

5. Weet welk bestandstype je wanneer moet gebruiken

Er zijn drie veelgebruikte bestandstypen die gebruikt voor afbeeldingen op het internet. Dit zijn JPG, GIF en PNG.

Laten we deze drie bestandstypen eens bekijken en welke invloed zij hebben op een afbeelding.

JPG (of JPEG) is een redelijk oud bestandstype dat is uitgegroeid tot dé standaard voor afbeeldingen op het internet. JPG-afbeeldingen zijn in staat om behoorlijk gecomprimeerd te worden, dit zorgt voor afbeeldingen met een goede kwaliteit en een kleine bestandsgrootte. In de bovenstaande afbeelding is te zien hoe het JPG-formaat resulteert in een klein bestand en een behoorlijk goede kwaliteit weet te behouden.

GIF-bestanden hebben een lagere beeldkwaliteit dan JPG’s en worden gebruikt voor eenvoudigere afbeeldingen zoals decoratieve beelden en pictogrammen. GIF’s ondersteunen in tegenstelling tot JPG animaties. Met betrekking tot beeldoptimalisatie is een GIF-afbeelding geweldig voor de simpele afbeeldingen (met slechts een paar kleuren) op een webpagina, maar deze zijn minder geschikt voor complexe afbeeldingen en foto’s. Vooral bij grotere en foto-achtige afbeeldingen is een GIF niet erg geschikt.

De bovenstaande GIF-afbeelding is een geval waar we nog weg kunnen komen met het gebruik van GIF. Dit komt doordat de foto klein genoeg is waarbij GIF goed werkt.


PNG-afbeeldingen worden steeds populairder als alternatief voor GIF. PNG’s ondersteunen veel meer kleuren dan GIF’s. Daarnaast gaat de kwaliteit ook niet achteruit als deze vaker opgeslagen wordt, wat bij JPG wel het geval is door de compressie. Hoewel PNG steeds populairder aan het worden is kan de bestandsgrootte veel groter zijn dan die van een JPG-afbeelding.

Je kan zien dat de PNG-24 afbeelding meer dan drie keer zo groot is als de PNG-8 afbeelding. Dit is iets om op te letten.

Hieronder staat een extreem voorbeeld waarbij het afbeeldingsformaat voor alle drie de formaten is vastgezet op 24 kb:

Zoals je kunt zien is de JPG-afbeelding de duidelijke winnaar. GIF’s en PNG’s leveren in op kleurruimte, en daarmee kwaliteit, om een kleine bestandsgrootte te houden.

Hier zijn een aantal tips om te onthouden wanneer je welk bestandsformaat moet kiezen.

  • Voor de meeste webshopafbeeldingen – is JPG je beste keus. Ze behouden relatief veel detail ten opzichte van de bestandgrootte.
  • Gebruik nooit GIF’s voor grote productafbeeldingen. Het bestand zal te groot zijn en er is geen goede manier om dit terug te brengen. Maak gebruik van GIF’s voor pictogrammen, miniaturen/thumbnails en decoratieve afbeeldingen.
  • PNG’s kunnen een goed alternatief zijn voor zowel JPG’s als GIF’s. Als je je productafbeeldingen uitsluitend kan krijgen in het PNG formaat, probeer dan PNG-8 te gebruiken in plaats van PNG-24. PNG’s blinken uit in het gebruik van eenvoudige decoratieve afbeeldingen vanwege de extreem kleine bestandsgrootte.

Met de meeste beeldbewerkingsprogramma’s kun je afbeeldingen opslaan als één van de bovenstaande bestandstypen.

6. Weet hoe je miniaturen/thumbnails moet gebruiken

Veel webshops maken gebruik van miniaturen (ook wel bekend als thumbnails). Deze afbeeldingen zorgen ervoor dat het erg makkelijk is om snel categoriepagina’s door te nemen zonder dat de afbeeldingen al te veel schermruimte in beslag nemen.

Thumbnails zijn geweldig, maar wees voorzichtig – ze kunnen een stille moordenaar voor je pagina laadtijden zijn. Ze worden meestal gepresenteerd in een belangrijke stap tijdens het
winkelproces, en als ze ervoor zorgen dat categoriepagina’s niet worden geladen – dan kan je zomaar een klant verliezen.

  • Maak je thumbnail bestandsgrootte zo klein mogelijk. Soms is het slim om de kwaliteit een iets lagere prioriteit te geven ten goede van een lagere bestandsgrootte. Vergeet niet het stapelende effect van de bestandsgrootte van de thumbnails en dat deze een enorme invloed zullen hebben op de laadtijden van je pagina.
  • Zorg ervoor dat je gebruik maakt van een afwijkende alt text ten opzichte van de grotere afbeeldingen. Het laatste wat je wilt is dat de verkleinde afbeelding wordt geïndexeerd in plaats van de grote afbeelding. Je zou eventueel kunnen besluiten om bij miniaturen helemaal geen gebruik te maken van een alt text.

7. Maak gebruik van Sitemaps voor afbeeldingen

Als je website gebruikmaakt van javascript fotoalbums, pop-ups of andere “hippe” manieren om de website ervaring te verbeteren, dan helpt Google image sitemaps om je afbeeldingen op te laten vallen bij Google.

Web crawlers kunnen geen afbeeldingen vinden die niet direct in de code zijn opgenomen. Dus om ervoor te zorgen dat bekend is dat deze afbeeldingen bestaan moet je hun locaties opnemen in een afbeeldingen sitemap.

Google heeft veel richtlijnen met betrekking tot het plaatsen van afbeeldingen om je website hoog te laten ranken in hun zoekmachine, deze richtlijnen kun je hier bekijken. Aanvullend kan je gebruik maken van hun extensie voor afbeeldingen op Google sitemaps om Google van meer informatie te voorzien als het gaat om de afbeeldingen op je site. Door dit te doen kan het zijn dat Google meer afbeeldingen op je site kan vinden dan dat het normaal gesproken op je site zou vinden.

Hoewel het gebruik van een sitemap niet garandeert dat je afbeeldingen geïndexeerd worden door Google, kun je hiermee absoluut de optimalisatie van je website verhogen, met name die van de vindbaarheid van de afbeeldingen.

Op Google sitemaps is het van belang om specifieke tags aan iedere afbeelding toe te voegen. Je kan ook een aparte sitemap maken om je afbeeldingen in een lijstweergave te zetten. Het belangrijkste waar je op moet letten is dat je alle benodigde informatie toevoegt, met specifieke tags, aan iedere sitemap die je maakt. Maak gebruik van deze richtlijnen van Google voor het maken van een sitemap met afbeeldingsinformatie.

8. Let op je decoratieve afbeeldingen

Websites hebben vaak een heel scala aan decoratieve afbeeldingen, zoals achtergrondafbeeldingen, knoppen en lijntjes. Alles het geen productafbeelding is, behoort deze hier waarschijnlijk toe.

Hoewel decoratieve afbeeldingen vaak van grote invloed zijn op esthetische aantrekkingskracht voor een website, zorgen ze er vaak voor dat het bij elkaar een grote bestandsgrootte heeft en dit leidt weer tot tragere laadtijden. Daarom is het wellicht handig om deze afbeeldingen eens nader te bekijken om er zeker van te zijn dat ze niet hinderlijk zijn voor je potentiële klanten.

Allereerst wil je de bestandsgroottes van alle decoratieve afbeeldingen nagaan. Gebruik vervolgens een template dat de bestandsgroottes van alle of de meeste pagina’s op je site verkleint.

Hier zijn een aantal tips om de bestandsgroottes van je decoratieve afbeeldingen te minimaliseren.

  • Afbeeldingen die uit simpele lijnen of patronen bestaan moeten worden omgezet naar PNG-8 of GIF’s. Je kan een goede afbeelding hebben van slechts een paar honderd bytes!
  • Indien mogelijk is het aangeraden om CSS-code te gebruiken om gekleurde gebieden te maken in tegenstelling tot afbeeldingen. Gebruik zoveel mogelijk CSS-code om decoratieve afbeeldingen te vervangen.
  • Neem je bureaubladachtige achtergrondafbeelding onder de loep. Dit zijn vaak enorme bestanden. Probeer deze zoveel mogelijk te comprimeren zonder de beeldkwaliteit te verpesten.

Een truc waarmee je het formaat van de afbeelding verder kunt verkleinen, is door het midden van de afbeelding weg te snijden en wit of transparant te maken. Het formaat kan hiermee drastisch verkleind worden.

9. Wees op je hoede bij het gebruik van Content Delivery Networks

Content Delivery Networks (CDN) zijn hard op weg de go-to plek te worden waar afbeeldingen en andere mediabestanden gehost worden. Ze kunnen bijdragen aan het verbeteren van je pagina laadtijden en kunnen zelfs helpen bij het oplossen van bandbreedte problemen.

Het enige nadeel is als het gaat om backlinks. Zoals je wellicht weet zijn backlinks van cruciaal belang voor SEO. Hoe meer backlinks je hebt, hoe beter je site het doet in de ranking bij zoekmachines.

Door je foto’s op een content delivery network te plaatsen, verwijder je waarschijnlijk de afbeelding van je eigen domein en plaats je het uitsluitend op het domein van het content delivery network. Dus als iemand een link deelt naar een van je afbeeldingen dan worden ze gelinkt naar de website van het content delivery network.

Daarom hebben we de volgende vuistregels:

  • Niet blind de trend volgen, bepaal eerst of het daadwerkelijk de beste zet is voor je bedrijf.
  • Als je veel verkeer hebt, dan is een CDN waarschijnlijk een goed idee, omdat het kan helpen bij het oplossen van bandbreedte problemen.
  • Als je site slechts “duizenden” bezoekers per dag krijgt, dan is de kans groot dat je huidige hosting het prima aan kan.

Er zijn manieren om de SEO problemen die ontstaan bij het gebruik van CDN’s te omzeilen. Schakel hiervoor de hulp in van een professional.

10. Test je afbeeldingen

We hebben het gehad over het verkleinen van de bestandsgrootte en hoe je ervoor kan zorgen dat je afbeeldingen door zoekmachines geïndexeerd worden – maar hoe zit het met het testen van beelden om te zien wat leidt tot meer verkopen?

  • Test het aantal productafbeeldingen per pagina: Aangezien laadtijden een probleem zijn voor niet extern gehoste webshops, kan het helpen om minder productafbeeldingen op een pagina te tonen waarmee de laadsnelheid, doorklikpercentages en verkopen kunnen stijgen. Maar het is ook mogelijk dat het tonen van veel afbeeldingen per pagina (zoals verschillende aanzichten) kan helpen om de gebruikerservaring te verbeteren en kan ook leiden tot meer verkopen. De enige manier om erachter te komen wat bij jou werkt is door te testen.
  • Test voor welke aanzichten je klanten voorkeur hebben: Een goede manier om erachter te komen welke aanzichten ze het liefst zien is om een enquête te houden waarin je vraagt welk aanzicht ze het liefst bekijken bij het winkelen. Enquêteren is over het algemeen een goede gewoonte om jezelf aan te leren.
  • Test hoeveel producten moet je tonen op een categoriepagina?: 10, 20, 100 producten? Test het aantal producten dat je toont op categoriepagina’s om te zien wat het beste werkt voor je klanten en hun winkelervaring.

We hopen dat deze 10 tips helpen bij een snellere website die beter wordt gevonden en waarvan de gebruikerservaring top is! Wil je meer lezen over het vindbaar maken van je website of webshop? Neem dan eens een kijkje naar onze selectie e-books. Succes!