Je kent het vast: je scrolt door een webshop en binnen een paar seconden heb je een gevoel bij wat je ziet. Yeah of blèh. Yeah: wat leuk / mooi / goed en je blijft hangen. Blèh: niet voor mij en je klikt snel weg.
Afbeeldingen nemen in dat proces een belangrijke plaats in. Een plaatje zegt namelijk meer dan 100 woorden. Daarom zijn afbeeldingen op webshops superbelangrijk. Overigens zijn ze niet alleen belangrijk om klanten te overtuigen om iets te kopen, maar ook om door zoekmachines zoals Google gevonden te worden. In deze gastblog van WordPress webdesigner Margriet Ravensbergen lees je alles over afbeeldingen op webshops.
Merkbeleving
Afbeeldingen zijn vaak het eerste wat bezoekers bewust of onbewust registreren. Ze bepalen niet alleen of iemand blijft hangen, maar ook hoe jouw webshop aanvoelt. Rommelig of rustig. Betaalbaar of premium. Betrouwbaar of twijfelachtig.
Een consistente stijl in je productfoto’s is daarbij onmisbaar. Denk aan een gelijke achtergrond, belichting, standpunt en uitsnede. Het zorgt voor rust en samenhang, en laat je webshop verzorgd en professioneler ogen.
Ook kleur en sfeer spelen hierin een belangrijke rol. Sluiten je afbeeldingen aan bij je merk en je doelgroep? Dan versterken ze elkaar. Kloppen ze niet, dan voelt een webshop al snel ‘net niet’.
Afbeeldingen zijn bovendien een krachtig middel om je USP’s visueel te maken. Duurzaam, lokaal geproduceerd of handgemaakt? Laat het zien in plaats van het alleen te vertellen.
Tip: voor tijdelijke campagnes of seizoensgebonden producten kun je bewust afwijken met een andere kleurstelling of sfeer. Zo trek je aandacht, zonder je basisstijl los te laten.
Detailshots
Ik had deze week nieuwe pedalen voor mijn racefiets nodig. Ik wilde er zeker van zijn dat ik een bepaalde uitvoering ging bestellen. Ik was daarom ook superblij dat ik in kon zoomen op de foto’s en kon zien dat het inderdaad om de pedalen ging waar ik naar op zoek was.
Wat voor mij het verschil maakte, kan voor jouw klant het zetje zijn om bij jou te bestellen
Wil je je product in de praktijk laten zien om zo vertrouwen te wekken, zorg er dan wel voor dat er echte mensen op de foto staan. Dat wekt een stuk meer vertrouwen dan een door AI gemaakte afbeelding.
Techniek en laadsnelheid
Hoe mooi en duidelijk je foto’s ook zijn — ze moeten wel snel laden.
We leven in een tijd waarin iedereen haast lijkt te hebben. Duurt het iets te lang voordat jouw webshop op een scherm verschijnt, dan is jouw potentiële klant al afgehaakt en op weg naar de website van jouw concurrent.
Snelle laadtijd = minder afhakers = hogere conversie.
En niet alleen jouw potentiële klant haakt af. Ook Google haakt af. Of eigenlijk, Google plaatst langzame websites met een vergelijkbaar aanbod lager in zoekresultaten dan een vergelijkbare website die sneller is.
Testen van laadsnelheid
Je kunt de snelheid van je website op verschillende manieren testen. Onderaan deze blog staat een lijst met mijn favoriete tools en plugins. En test ook altijd de mobiele versie van je website. Daar hecht Google meer waarde aan dan aan de laadtijd van de desktop versie.
Welk formaat moeten je afbeeldingen zijn?
Een van de meest gestelde vragen van mijn klanten “welk formaat moeten de afbeeldingen zijn?”. Helaas heb ik geen eenduidig antwoord. Dat is namelijk afhankelijk van het gebruikte thema van de website. Zoek daarom uit hoe groot het door jouw gebruikte thema afbeeldingen laat zien. Voor WooCommerce productfoto’s kun je het vierkante formaat van 1000 x 1000 pixels gebruiken.
Optimaliseren voor web
Voordat je de foto’s die het juiste formaat hebben op je website plaatst, zul je ze willen optimaliseren voor websites. Deze compressie maakt de bestanden flink wat kleiner – hoeveel, dat hangt af van de hoeveel details in de foto – zonder dat er kwaliteit verloren gaat.
Was het voorheen .jp(e)g en .png wat de klok sloeg, tegenwoordig is er ook WebP als afbeeldingsformaat. Dit formaat zorgt voor nog kleinere bestanden. Werk je met WordPress, dan kun je hiervoor een plugin aan je website toevoegen.
Maar in ieder geval nooit zomaar een foto vanaf je telefoon direct op je website plaatsen.
Cache en lazy loading
Natuurlijk zorg je ervoor dat jouw website vanuit cache geladen kan worden, ofwel niet bij iedere bezoeker helemaal opnieuw opgebouwd hoeft te worden, maar supersnel uit het (cache) geheugen gevist kan worden. Lazy loading, afbeeldingen pas laden als ze in beeld komen, zorgt ook voor een snellere website.
SEO, ofwel gevonden worden door klanten
Ik vergelijk zoekmachines regelmatig met mensen. Net zoals mensen kijken namelijk niet alleen naar teksten, maar ook naar afbeeldingen. Het mooie hieraan is dat je dus ook via je afbeeldingen gevonden kan worden. Je zult daarvoor:
- in de bestandsnamen van afbeeldingen de zoekterm van de afbeeldingen moeten gebruiken. Plaats geen spaties tussen de woorden maar kleine streepjes: –
Gebruik ook geen accenten of bijzondere tekens. - al je afbeeldingen een alt-teksten moeten geven. Deze moet beschrijvend zijn en de zoekterm bevatten. De alt-tekst is overigens niet alleen belangrijk voor zoekmachines, maar ook belangrijk voor de toegankelijkheid van je website. Hij wordt namelijk voorgelezen door bezoekers met een visuele beperking die met hulp van een schermlezer de inhoud van de website voorgelezen krijgen.
- de titel-tekst en het bijschrift (caption) alleen invullen wanneer deze toegevoegde waarde hebben. De titel-tekst is de tekst die in sommige browsers verschijnt wanneer je met je muis over een afbeelding gaat.
Het mooie is: veel SEO-winst met afbeeldingen kost geen extra werk, alleen een beetje aandacht.
Beheer en onderhoud
Uit ervaring weet ik dat er veel tijd gaat zitten in het beheer en onderhoud van afbeeldingen op je webshop. Tijd die je liever aan andere zaken zou besteden. Daarom ook daarvoor wat tips.
Wanneer je afbeeldingen moet vervangen, gebruik dan een plugin om afbeeldingen te vervangen zonder URL-wijziging.
Regelmatig opruiming houden in de mediabibliotheek zorgt ervoor dat je website niet onnodig veel serverruimte gaat innemen. Hier bestaan media-clean-up plugins voor. Maak wel altijd eerst een back-up van je website. Mocht je per ongeluk een nog in gebruik zijnde afbeelding verwijderen, dan kun je deze terugzetten.
Het is natuurlijk fijn wanneer je afbeeldingen kan terugvinden. Geef je afbeeldingen daarom logische bestandsnamen. Dit is geen extra werk, want vanwege SEO gaf je je fotobestanden sowieso al logische bestandsnamen 😉
Duurzaamheid
Ik sluit dit blog af met duurzaamheid, terwijl dat bij mij eigenlijk op de eerste plaats staat. Het mooie is, dat wanneer je de tips van mijn blog opvolgt, je ook op het gebied van duurzaamheid goed bezig bent. Want kleinere bestanden zorgen voor minder dataverkeer en dus lagere CO₂-uitstoot. Dit kan door het optimaliseren van bestaande mediabibliotheek, maar ook door afbeeldingen alleen te gebruiken waar ze waarde toevoegen.
In mijn Frankwatching blog Quick tips om jouw website eenvoudig te verduurzamen vind je nog meer tips voor een duurzame webshop.
Mijn favoriete tools en plugins
Voor wie het praktisch wil aanpakken, dit zijn de tools die ik zelf gebruik.
- GTmetrix en PageSpeed Insights voor het testen van website snelheid.
- Mijn favoriete gratis tool voor het optimaliseren van foto’s is TinyPNG. Je kunt de afbeeldingen op WordPress websites ook door de TinyPNG plugin laten optimaliseren. Voordeel: het gebeurt automatisch. Nadeel: de afbeeldingen worden wel op het grote formaat geupload en nemen dus (veel) meer serverruimte in, dan wanneer je ze al geoptimaliseerd upload.
- Afbeeldingen automatisch converteren naar WebP formaat doe ik via de gratis WebP Express plugin.
- Voor het vervangen van afbeeldingen gebruik ik de Enable Media Replace plugin.
Webdesigner & consument
Niet alleen als webdesigner, maar ook al consument, zie ik veel webshops en zie ik hoeveel verschil afbeeldingen maken — niet alleen in uitstraling, maar ook in snelheid en conversie.
Hopelijk helpt dit blog je om met diezelfde blik eens naar je eigen webshop te kijken en te ontdekken waar nog winst te behalen valt.
Wil je weten of er op jouw webshop nog wat te schaven valt aan afbeeldingen of andere aspecten? Vraag dan een webshop scan aan.
