5 tips voor betere afbeeldingen in je webshop

Het verbeteren van afbeeldingen moet absoluut een prioriteit zijn als je een webshop hebt, elke seconde die het langer duurt om je webshop te laden kost je namelijk bezoekers. Dat is natuurlijk zonde, en ook helemaal niet nodig.

5 tips voor betere afbeeldingen in je webshop

Het verbeteren van afbeeldingen moet absoluut een prioriteit zijn als je een webshop hebt, elke seconde die het langer duurt om je webshop te laden kost je namelijk bezoekers. Dat is natuurlijk zonde, en ook helemaal niet nodig.

Inhoudsopgave

  1. Webshop afbeeldingen verbeteren
  2. Kies het juiste bestandstype
    2.1 Hoe maak je van jpg/png bestanden een WebP bestand?
  3. Bestandsgrootte en afbeeldingsformaat
    3.1 Bestandsgrootte
    3.2 Afbeeldingsformaat
  4. Compressie
  5. Bestandsnaam
    5.1 Hoe geef ik een afbeelding een naam die waarde heeft?
  6. Alt-tags
  7. Conclusie

Webshop afbeeldingen verbeteren

Het verbeteren van afbeeldingen in je webshop is echt zo’n onderwerp wat niet echt sexy is. Niemand begint een webshop om eens lekker een hele avond afbeeldingen te gaan zitten verbeteren. En toch zou webshop afbeeldingen verbeteren wel een prioriteit moeten zijn, afbeeldingen bepalen namelijk voor een groot deel hoe snel je webshop is. En hoe sneller je webshop hoe prettiger bezoekers dat vinden (en dat is weer goed voor de verkoop).

Naast de snelheid van je webshop kunnen afbeeldingen die goed geoptimaliseerd zijn ook nog bijdragen aan de vindbaarheid in Google. Heb je bijvoorbeeld de titels aangepast, of heb je ze zo uit je camera de bibliotheek in gesleept? Hieronder gaan we met 5 punten aan de slag om je webshop van de afbeeldingen te voorzien die helemaal perfect zijn!

Kies het juiste bestandstype

Jarenlang was er weinig spannends te vermelden over het bestandstype. Je gebruikte jpg voor normale afbeeldingen en png als je een afbeelding had met een transparante achtergrond. Maar ook de ontwikkelingen voor bestandstypen staan niet stil en er is een nieuwe speler op de markt, namelijk WebP. En wat is er nou zo bijzonder aan dit nieuwe bestandstype zul je je afvragen? WebP combineert eigenlijk het beste van 3 werelden:

  • WebP gebruikt dezelfde compressie als jpg.
  • WebP ondersteund net als png transparante achtergronden
  • WebP is zo’n 25 tot 35% kleiner in bestandsgrootte dan jpg of png.

Als je er vanuit gaat dat het grootste deel van je webshop bestaat uit afbeeldingen dan begrijp je dat je afbeeldingen tot wel 35% kleiner maken een aanzienlijke snelheidswinst gaat opleveren. Vanaf versie 5.8 van WordPress wordt WebP standaard ondersteund. Nog niet up-to-date? Lees dan hier waarom je vandaag nog moet updaten.

Hoe maak je van jpg/png bestanden een WebP bestand?

Dit kan op 2 manieren. Je kan er voor kiezen alle afbeeldingen zelf te converteren met bijvoorbeeld een gratis online converter. Het nadeel hiervan is dat het vooral veel meer werk is dan de volgende optie. Je kan namelijk ook een plugin gebruiken zoals Imagify. Deze plugin kan volledig automatisch je afbeeldingen omzetten naar WebP, en daarnaast meteen ook compressie uitvoeren. Dat zijn 2 vliegen in 1 klap. Zo wordt je webshop afbeeldingen verbeteren wel heel makkelijk. Het mooiste van deze plugin is dat je je afbeeldingen alleen maar naar de mediabibliotheek hoeft te uploaden, en Imagify doet automatisch de rest.  

Pro tip: gebruik je WPRocket als caching plug-in? Dan krijg je 20% korting op Imagify.

Bestandsgrootte en afbeeldingsformaat

Deze 2 termen lijken veel op elkaar maar er wordt iets heel anders mee bedoeld. Bestandsgrootte gaat om het aantal kilobyte of megabyte dat een afbeelding groot is. Hoe groter de bestandsgrootte is hoe langer het duurt om een afbeelding te laden. Het afbeeldingsformaat gaat juist over het formaat van de afbeelding in pixels.

  • Bestandsgrootte word aangegeven in Kb of Mb, groter duurt langer om te laden
  • Bestandsformaat wordt aangegeven in pixels, het formaat bepaald voor een groot deel de grootte.

Bestandsgrootte

Zoals ik al eerder aangaf, de grootte van het bestand zal bepalen hoe lang het duurt voordat deze is geladen. Eerder in de blog kon je ook al lezen dat WebP het meest ideale type is om te gebruiken, omdat deze de kleinste bestandsgrootte kan zijn in verhouding (snap je het nog 😉). Bestandstype en afbeeldingsformaat spelen beide een grote rol in de bestandsgrootte. Om je webshop snel te houden adviseer ik om afbeeldingen tussen de 70 en 100kb groot te houden. Op bijvoorbeeld de overzichtspagina moeten veel afbeeldingen geladen worden en deze kan dan ook erg traag worden.

Afbeeldingsformaat

Het formaat van de afbeelding bepaalt voor een groot deel de bestandsgrootte. Een grotere afbeelding heeft logischerwijs meer data om op te slaan. Door het verkleinen van je afbeeldingen kun je veel overtollige data lozen. Zie het voorbeeld hieronder maar. Door webshop afbeeldingen te verbeteren door slim te verkleinen kan er een hoop bespaard worden, zonder af te doen aan de kwaliteit van de foto.

Originele afbeelding is 1920 x 2880 pixels en 1.59mb groot.
webshop afbeeldingen verbeteren
Weergave in de shop is 508 x 762 en zou maar 356kb hoeven zijn.

Wat is dan een goed formaat hoor ik je vragen? Dat ligt eraan hoe je webshop is ontworpen, maak je gebruik van grote afbeeldingen dan moet je ze groter houden en andersom natuurlijk ook. Gebruik je kleine afbeeldingen dan heb je niet zoveel aan afbeeldingen waarmee je een flat zou kunnen behangen. Als vuistregel kun je aanhouden dat je voor de desktopweergave 1920×1080 aanhoud en voor de mobiele weergave 414×896 gebruikt. Waarom precies dit? Dit zijn namelijk de meest gebruikte resoluties voor desktop en mobiele weergave.

Pro tip: wil je echt voor afbeeldingen op maat gaan, vraag dan aan je webdesigner welk formaat je afbeeldingen moeten zijn.

Compressie

Zoals je hierboven al kon lezen is het formaat van een afbeelding in pixels van groot belang voor de bestandsgrootte. Maar, er is nog 1 aspect veel belangrijker, en dat is compressie. Door een goede compressie toe te passen op een afbeelding kun je deze, zonder het formaat te wijzigen, toch kleiner maken in bestandsgrootte.

Nu vraag je je misschien direct af, gaat dat dan niet ten koste van de kwaliteit van de afbeelding. Het antwoord daarop is nee, en ook een beetje ja. Er zijn veel verschillende manieren om compressie toe te passen, maar als je goede compressie gebruikt zal deze er niet voor zorgen dat veel kwaliteit verloren gaat. Gebruik je bijvoorbeeld TinyPNG om compressie toe te passen dan is het zelfs zo goed als onzichtbaar.

Geen Compressie – 69kb
webshop afbeeldingen verbeteren met compressie
Zware compressie – 21kb

Wanneer heb je dan wel kwaliteitsverlies bij compressie? Pas je bijvoorbeeld 2x compressie toe dan kan het zijn dat de kwaliteit van je afbeelding achteruit gaat. Of, als je afbeelding al van slechte kwaliteit is om mee te beginnen. Soms kun je ook kiezen hoeveel compressie er toegepast moet worden, kies je voor zeer zware compressie dan kan de kwaliteit van je afbeelding ook achteruit gaan.

Wil je van al deze voordelen gebruik maken zonder al het extra werk? Dan raad ik je aan om een plug-in als Imagify te gebruiken, heb je niet zoveel afbeeldingen op je website dan kun je waarschijnlijk al goed uit de voeten met de gratis versie.

Pro tip: zorg ervoor dat je afbeelding al de juiste naam en het juiste formaat heeft voordat je de compressie toepast. Je afbeelding is daarna direct klaar voor gebruik.

Meer dan 59% besparing door het juiste bestandsformaat ( WebP ) en compressie te kiezen in Imagify.

Bestandsnaam

Oke het technische deel is nu achter de rug! Yes, als je nu nog leest heb je het moeilijkste deel gehad! Belangrijk bij webshop afbeeldingen verbeteren is natuurlijk ook de bestandsnaam. Misschien heb je er nooit over nagedacht maar wanneer Google-Bots je website bekijken dan zien ze geen afbeeldingen, maar alleen de code waaruit jouw website is opgebouwd. Geef jij je afbeeldingen geen duidelijke naam, dan is het voor Google moeilijker om te begrijpen waar de afbeelding over gaat, en dus zul je minder goed gevonden worden in de zoekresultaten, jouw webshop kan namelijk minder makkelijk gekoppeld worden aan de zoekterm van mensen.

Hier een voorbeeld van hoe bots die je website bekijken de code zien (vereenvoudigde weergave):

 <img src="IMG_548562145.jpg" alt="">

Het deel tussen de aanhalingstekens is de bestandsnaam van je afbeelding. Zoals je ziet geeft de naam op deze manier niet weer waar de afbeelding over gaat.

 <img src="nike-dames-sportschoen-roze.jpg" alt="">

Door je bestand een goede naam te geven begrijpen bots beter waar je website over gaat.

Geef je afbeeldingen de juiste naam voordat je ze upload naar de mediabibliotheek, als ze namelijk eenmaal zijn geüpload kun je de bestandsnaam niet meer veranderen. De titel van je afbeelding zal na het uploaden hetzelfde zijn als de bestandsnaam, deze kun je later nog wel aanpassen in de mediabibliotheek maar heeft geen effect op de SEO waarde van je afbeelding, omdat alleen de bestandsnaam word gezien in de code van je website.

Hoe geef ik een afbeelding een naam die waarde heeft?

Het belangrijkste aan een goede naam voor je afbeelding is dat het duidelijk beschrijft wat er te zien is. Houdt dit kort en bondig, voor een meer uitgebreide omschrijving kun je de alt-tags gebruiken waar we straks nog even op komen. Wil je een paar schoenen benoemen, dan kun je deze beter duidelijk omschrijven als bijvoorbeeld nike-dames-sportschoen-roze.jpg dan sportschoen.jpg. Bij de eerste omschrijving krijg je direct een duidelijker beeld van het product, maar ook de Google-Bots kunnen deze omschrijving beter linken aan een zoekopdracht.

Specifiek zijn loont bij het verzinnen van een goede titel, maar te specifiek werkt juist weer averechts, het zoekvolume voor een dames-sportschoen-roze-met-een-groen-streepje-en-veters.jpg zal duidelijk minder zijn dan het voorheen genoemde voorbeeld.

Pro tip: heb je meerdere foto’s van bijvoorbeeld de voorkant, zijkant en bovenkant, verwerk dit dan in de naam, bijvoorbeeld nike-dames-sportschoen-roze-voorkant.jpg, nike-dames-sportschoen-roze-bovenkant.jpg etc.

Alt-tags

Alt-tags worden in de WordPress mediabibliotheek ook wel alternatieve tekst genoemd. Deze tekst is behoorlijk belangrijk voor je webshop, en niet in eerste instantie voor de SEO waarde hiervan. Slechtziende mensen kunnen een scherm-lezer gebruiken om toch online te kunnen browsen. Een screen reader leest de tekst op een website voor, en hier komen de alt-tags in beeld. Hoe kun je aan een slechtziend iemand een afbeelding beschrijven? Juist, door de alt-tags zo goed mogelijk te gebruiken en een duidelijke omschrijving van het product op de foto te geven.

Nadat je alternatieve tekst hebt toegevoegd ziet de code van je website er zo uit:

 <img src="nike-dames-sportschoen-roze.jpg" alt="hier komt de alternatieve tekst te staan die je invoert in de WordPress Mediabibliotheek">

Daarnaast is de alt-tag ook belangrijk voor de SEO waarde van je afbeelding, de alt-tag wordt namelijk getoond in de code van je website en wordt gelezen door Google-Bots. Om hier de meeste waarde uit te krijgen kun je bovenstaande stukje in gedachten houden. Hoe omschrijf je de afbeelding aan iemand die hem niet zou kunnen zien? Hou er rekening mee dat het overmatig gebruiken van bepaalde “keywords” absoluut af te raden is, gebruik dus niet 5 synoniemen voor schoen, hiermee wordt de SEO waarde namelijk compleet teniet gedaan en het is ook nog eens heel vervelend voor bezoekers die een screen reader gebruiken.

Ook hoef je niet te beginnen met “afbeelding van”, omdat screenreaders en de Google-Bots namelijk kunnen zien dat het om een afbeelding gaat.

Conclusie

Dat was een behoorlijk stuk tekst over webshop afbeeldingen verbeteren, maar als je alles hebt gelezen ben je klaar om je webshop een boost te geven en nog meer klanten te gaan bereiken. Wil je wel de voordelen, maar niet het extra werk? Dan raad ik je aan om bijvoorbeeld WP Rocket en Imagify te installeren, als je deze combineert met een SEO plug-in zoals Yoast of Rankmath hou je meer tijd over voor het runnen van je webshop!

Deel deze post!

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

Download ons
gratis ebook...

…en kom erachter hoe je met deze 16 tips meer omzet zal gaan maken, zonder ook maar 1 euro te investeren! Too good to be true? Echt niet!

Meer om te lezen

Woocommerce Tutorials

Simpel product toevoegen aan Woocommerce

Het toevoegen van producten is de basis voor je webshop. In deze tutorial leg ik je uit hoe je een simpel product kan toevoegen, en lopen we alle opties en mogelijkheden stap voor stap door.

Over Ons

Wij zijn een Full-Service bedrijf, dat betekent dat we je helpen van begin tot eind, en we daarna ook altijd nog voor je klaar staan of maandelijks onderhoud doen.

Download ons
gratis ebook...

…en kom erachter hoe je met deze 16 tips meer omzet zal gaan maken, zonder ook maar 1 euro te investeren! Too good to be true? Echt niet!

Cookie erbij?

Onze website gebruikt cookies voor verschillende functionaliteiten en het uitlezen van statistieken. Op geen enkele manier verzamelen we gepersonaliseerde informatie of slaan we privacygevoelige informatie op zonder vooraf uitdrukkelijk toestemming te vragen.