Afbeeldingen optimaliseren: 8 tips voor je website (2024)

Leer alles over optimalisatietechnieken voor afbeeldingen om de laadtijd van je pagina’s te verkorten en meer SEO-verkeer naar je online winkel te leiden.

In een wereld waarin klanten onmiddellijke bevrediging verwachten, is een e-commerce website die snel laadt van groot belang. Geoptimaliseerde afbeeldingen kunnen helpen om laadtijden te verkorten en conversies te verhogen.

Hoewel de kwaliteit van afbeeldingen belangrijk is voor het waarborgen van hoge conversiepercentages, is beeldoptimalisatie cruciaal voor de gebruikerservaring en SEO van je online winkel. Leren hoe je afbeeldingen kan optimaliseren heeft grote voordelen, van het versterken van je merk tot het aantrekken van shoppers die door Google Afbeeldingen bladeren.

Wat is beeldoptimalisatie?

Beeldoptimalisatie betekent dat je ervoor zorgt dat jouw afbeeldingen er perfect uitzien, zonder de prestaties van je site te belemmeren. Dit houdt in dat het afbeeldingsformaat, de afmetingen en de resolutie voor een apparaat worden aangepast, terwijl de kwaliteit behouden blijft.

Drie belangrijke elementen spelen hierbij een rol:

1. De bestandsgrootte van afbeeldingen
2. De afmetingen van afbeeldingen (hoogte en breedte)
3. De resolutie van afbeeldingen

Waarom zou je afbeeldingen optimaliseren?

Afbeeldingen zijn essentieel voor een goede online winkelervaring. Klanten kopen je producten niet als ze deze niet goed kunnen zien. Gegevens van de HTTP Archive (EN) tonen aan dat ongeoptimaliseerde afbeeldingen gemiddeld ongeveer 38% van de totale grootte van een mobiele website uitmaken.

Beeldoptimalisatie helpt de grootte (en dus de laadtijd) van je website te verlagen en is een kernprincipe van goed e-commerce webdesign. Dit levert de volgende voordelen op:

Evenwicht tussen snelheid en kwaliteit

Beeldoptimalisatie voor web en mobiel is bedoeld om snelheid en kwaliteit in balans te brengen. Het presenteren van afbeeldingen die er goed uitzien is belangrijk in e-commerce, omdat dit een betere ervaring voor shoppers creëert.

Google heeft gesuggereerd dat sitesnelheid een van de signalen (EN) is die door hun algoritme wordt gebruikt om pagina's te rangschikken. Een trage pagina betekent dat zoekmachines minder pagina's crawlen, wat de indexering van je site negatief kan beïnvloeden.

Verbeterde zoekprestaties

Geoptimaliseerde afbeeldingen helpen zowel lezers als zoekmachines om je website beter te begrijpen en je content online zichtbaar te maken. Recente gegevens tonen aan dat afbeeldingen worden weergegeven voor 18% van de zoekopdrachten (EN) op Google.

Beeldoptimalisatie kan helpen om je afbeeldingen te rangschikken in Google Afbeeldingen, wat meer verkeer naar je website kan brengen en je merk kan versterken.

Hoe optimaliseer je afbeeldingen voor het web?

1. Gebruik beknopte en directe bestandsnamen

Het is heel eenvoudig om afbeeldingen naar je website te uploaden en de standaard bestandsnamen te behouden die je camera toekent. Maar als het gaat om het optimaliseren van afbeeldingen, is het belangrijk om relevante zoekwoorden te gebruiken om je website te laten ranken in zoekmachines.

Het creëren van beschrijvende, zoekwoordrijke bestandsnamen is dus cruciaal voor beeldoptimalisatie. Zoekmachines crawlen namelijk niet alleen de tekst op je website, maar ook de bestandsnamen van afbeeldingen.

Je zou de generieke naam kunnen gebruiken die je camera aan de afbeelding heeft gegeven (bijv. ‘DCMIMAGE10.jpg’). Het is alleen veel beter om het bestand ‘2012-Ford-Mustang-LX-Rood.jpg’ te noemen.

Denk na over hoe je klanten naar producten op je website zoeken. Welke woorden en zinnen gebruiken ze bij hun zoekopdrachten? In het bovenstaande voorbeeld kunnen autokopers zoektermen gebruiken zoals:

• 2012 Rode Ford Mustang LX
• Ford Mustang LX Rood 2012
• Rode Ford Mustang LX 2012

Bekijk je website-analyse om te zien welke zoekwoorden je klanten gebruiken om je te vinden. Bepaal de meest voorkomende zoekwoorden die ze gebruiken en gebruik deze in je bestandsnamen.

Als je minder data-gedreven wilt zijn, zorg er dan voor dat je in ieder geval relevante, nuttige zoekwoorden gebruikt bij het benoemen van je afbeeldingen (probeer beschrijvend te zijn).

Je kan deze Q&A (EN) van Moz bekijken om het belang van het strategisch benoemen van bestanden op je site te begrijpen. Dit kan je on-page SEO alleen maar verbeteren! Het kan ook helpen om je pagina's en afbeeldingen hoger te ranken op resultatenpagina's van zoekmachines (SERP's).

2. Optimaliseer je alt-attributen 

Alt-attributen zijn de tekstalternatieven voor afbeeldingen wanneer een browser ze niet correct kan weergeven. Ze worden ook gebruikt voor webtoegankelijkheid. Zelfs wanneer de afbeelding wordt weergegeven, kun je de alt-tekst bekijken als je je cursor eroverheen beweegt (afhankelijk van je browserinstellingen).

Het alt-attribuut voegt ook SEO-waarde toe aan je website. Het toevoegen van geschikte alt-attributen die relevante zoekwoorden bevatten kan je helpen om beter te ranken in zoekmachines. Het optimaliseren van afbeeldingen en alt-attributen zijn dan ook erg belangrijk voor je on-page SEO. 

De hoogste prioriteit bij het optimaliseren van afbeeldingen is om het alt-attribuut voor elke productafbeelding op je site in te vullen.

Hieronder vind je enkele eenvoudige regels voor alt-attributen:

• Beschrijf je afbeeldingen in eenvoudige taal, zoals je ook doet voor de bestandsnamen van je afbeeldingen.
• Als je producten verkoopt met modelnummers of serienummers, gebruik deze dan in je alt-attributen.
• Stop je alt-attributen niet vol met zoekwoorden (bijv. "ford mustang muscle car koop nu goedkoop beste prijs in de aanbieding").
• Gebruik geen alt-attributen voor decoratieve afbeeldingen. Zoekmachines kunnen je bestraffen voor over-optimalisatie.

Controleer ten slotte van tijd tot tijd of alles in orde is. Bekijk de bron van je websites en controleer of je alt-attributen aanwezig zijn en nog steeds relevant zijn. Je kan versteld staan van de dingen die je mist als je het optimaliseren van je afbeeldingen negeert!

3. Kies je afmetingen en beeldhoeken verstandig

Het is gebruikelijk om meerdere hoeken van je product te tonen in je productfotografie. Terugkomend op het voorbeeld van de Ford Mustang, zou je niet slechts één afbeelding van de auto willen tonen, vooral niet als je probeert deze te verkopen. Het is een goed idee om afbeeldingen te laten zien van:

• Het interieur
• De achterkant (vooral die spoiler)
• De velgen
• De motor (het is tenslotte een Mustang!)

De beste manier om deze afbeeldingen te optimaliseren voor SEO is door je alt-attributen in te vullen. De beste manier om dit te doen is door unieke alt-attributen voor iedere productfoto te schrijven. Bijvoorbeeld:

• 2012-Ford-Mustang-LX-Rood-Lederen-Interieur-Afwerking.jpg: gebruik het alt-attribuut: alt="2012 Ford Mustang LX Rood Lederen Interieur Afwerking"
• 2012-Ford-Mustang-LX-Rood-Achteraanzicht-Luchtspoiler.jpg: gebruik het alt-attribuut: alt="2012 Ford Mustang LX Rood Achteraanzicht Luchtspoiler"

Het belangrijkste is om beschrijvingen aan je basis alt-attribuut toe te voegen, zodat zoekmachines sneller naar jouw website verwijzen. Dit extra werk wordt uiteindelijk door Google beloond!

4. Wijzig de grootte van je afbeeldingen

Je wilt afbeeldingen op je website beheren om ervoor te zorgen dat ze er goed uitzien op alle apparaten, vooral op mobiel en op schermen met hoge resolutie.

Voor HD-displays, die meer pixels weergeven dan gewone displays, heb je minstens een 2x afbeelding nodig om ervoor te zorgen dat afbeeldingen scherp en niet korrelig zijn. Ter vergelijking: als je website een afbeelding heeft van 200 x 200 pixels, heb je een afbeelding van 400 x 400 pixels nodig om scherpte te behouden op een HD-display. Bijna alle mobiele telefoons hebben tegenwoordig schermresoluties van 2x of hoger.

De makkelijkste manier om dit te bereiken is door een content delivery network te gebruiken, ook wel een CDN genoemd. Een CDN wijzigt de groottes van afbeeldingen automatisch en past deze ook aan voor het apparaat van de gebruiker. Ook verbetert een CDN de laadsnelheid van het afbeeldingsbestand zelf, omdat ze server-locaties hebben die dichter bij de eindgebruiker zijn.

💡Opmerking: Als je een Shopify-verkoper bent, gebruikt je Shopify-thema al een ingebouwde afbeeldings-CDN. Benieuwd hoe het werkt? Upload je eigen afbeelding en probeer Shopify's CDN. Als je een thema-ontwikkelaar bent, leer dan hoe je (EN) responsieve afbeeldingscode in Liquid schrijft.

5. Kies het juiste bestandstype

Het bestandstype van je afbeeldingen is een van de belangrijkste dingen die je kan optimaliseren op je website. Sommige bestandstypes zijn van hogere kwaliteit en sommige types nemen ook meer ruimte in beslag, wat weer invloed heeft op de laadtijd van je site.

Om te beginnen zijn er twee soorten afbeeldingstypes: raster- en vectorafbeeldingen.

Vectorafbeeldingen zijn opgebouwd uit wiskundige formules. Wanneer je bestanden nodig hebt die naar verschillende formaten kunnen worden geschaald zonder kwaliteitsverlies, gebruik je vectorafbeeldingen. Het meest voorkomende vectortype is het Scalable Vector Graphics (SVG) bestand. Dit is een ideale keuze voor logo's, iconen en andere eenvoudige graphics waarbij je helderheid en scherpte nodig hebt, ongeacht de schaal.

Rasterafbeeldingen bestaan uit pixels die zeer gedetailleerde afbeeldingen kunnen vormen, zoals foto's. Hoe meer pixels een afbeelding bevat, hoe groter en hoger de resolutie zal zijn.

In de loop der tijd zijn er nieuwere en verbeterde codecs geschreven voor rasterafbeeldingen. GIF was bijvoorbeeld een vroege versie van een codec voor webafbeeldingen, maar de kwaliteit was slecht omdat de compressietechniek gemiddelde waarden van naburige pixels gebruikte. Nieuwere technieken proberen te coderen en te comprimeren op manieren die moeilijker voor het menselijk oog te detecteren zijn. Dit betekent dat je afbeeldingen van hogere kwaliteit met kleinere bestandsgroottes kan uploaden wanneer je nieuwere afbeeldingstypes gebruikt. 

Dit zijn een paar van de meest gebruikte online bestandstypes:

• JPG: Een veelgebruikt bestandstype voor foto's. Het gebruikt compressie om de bestandsgrootte te verkleinen, maar offert hiermee wat kwaliteit op.
• PNG: Een populair type bestanden voor webontwerpers omdat het afbeeldingen met transparante achtergronden aankan. Het bestandstype behoudt al zijn oorspronkelijke gegevens bij compressie, wat het goed maakt voor afbeeldingen en diagrammen op een website.
• WEBP: Een modern bestandstype dat voor het web is ontwikkeld. Het ondersteunt zowel verliesgevende als verliesloze compressie en het levert kleinere bestandsgroottes dan JPG of PNG terwijl het een vergelijkbare of betere kwaliteit behoudt.
• AVIF: Het nieuwste afbeeldingsformaat, AVIF, comprimeert afbeeldingen met nog minder vervorming.

Niet alle browsers ondersteunen alle versies. Dit is waar een afbeeldings-CDN opnieuw van pas kan komen, omdat het automatisch het beste type voor een bepaalde browser kan selecteren en je originele afbeelding kan converteren. Als je geen CDN met deze mogelijkheid gebruikt, moet je de <picture> tag (EN) in je HTML gebruiken.

💡Opmerking: Het CDN van Shopify detecteert welke bestandstypes door een browser worden ondersteund en verzendt automatisch de beste optie. Het kan bijvoorbeeld afbeeldingen converteren naar WebP of AVIF waar deze ondersteund worden en het gebruikt PNG- of JPEG-afbeeldingen als back-up voor oudere browsers.

6. Gebruik sitemaps

Als je site gebruikmaakt van Javascript-galerijen, afbeelding pop-ups of andere "flitsende" manieren om de winkelervaring te verbeteren, helpen sitemaps om je afbeeldingen op te laten vallen bij Google.

Webcrawlers kunnen geen afbeeldingen crawlen die niet specifiek in de broncode van de website zijn genoemd. Om crawlers dus nieuwe afbeeldingen te laten herkennen, moet je de locatie van deze afbeeldingen in een sitemap vermelden.

Je kan bijvoorbeeld de volgende regel in je robots.txt-bestand invoegen, die het pad naar je sitemap toont: Sitemap: http://example.com/sitemap_location.xml

Of je kan de sitemap indienen bij Google (EN) via de zoekconsole. Google heeft veel richtlijnen voor het publiceren van afbeeldingen (EN) die je website kunnen helpen om hoger te ranken op SERP's. Bovendien kun je Google-sitemaps gebruiken om Google meer informatie te geven over de afbeeldingen op je website, wat Google helpt om meer van je afbeeldingen te vinden dan het normaal gesproken zou doen.

Als Shopify-verkoper krijg je een automatisch gegenereerde sitemap die je productafbeeldingen bevat. Dit betekent dat afbeeldingen op je productpagina's (en andere belangrijke afbeeldingen die in je collecties worden gebruikt) ontdekt kunnen worden door zoekmachines via je sitemap. Dit vergroot de kans dat je afbeeldingen in zoekresultaten verschijnen en meer verkeer naar je website genereren.

Shopify werkt de sitemap automatisch bij wanneer nieuwe pagina's of producten worden toegevoegd, of bestaande pagina’s worden verwijderd. Zo hoef je dus nooit handmatig je sitemap te maken of bij te werken.

7. Gebruik een goed content delivery network (CDN)

Gespecialiseerde afbeeldings-CDN's bieden automatische optimalisatie voor afbeeldingen, zodat je maar één hoogwaardige afbeelding hoeft te uploaden, waarna het CDN de afbeeldingen kan wijzigen, opnieuw formatteren en kan cachen op basis van elke aanvraag. Met het afbeeldings-CDN van Shopify wordt de bestandsgrootte automatisch geoptimaliseerd wanneer je je afbeelding uploadt. 

De verandering in bestandskwaliteit is niet merkbaar voor het menselijk oog, maar verbetert de laadtijd van de pagina aanzienlijk. De CDN detecteert ook automatisch welke bestandsformaten aan de klantzijde worden ondersteund en biedt dynamische bewerking, waarmee je de afbeelding kunt bijsnijden en transformeren zonder het originele bestand te verliezen.

8. Test je afbeeldingen

Het hele doel van het optimaliseren van afbeeldingen is om de resultaten op je website te verbeteren. Je hebt al geleerd over het verminderen van bestandsgroottes en het laten indexeren van je afbeeldingen door zoekmachines, maar wat dacht je van het testen van afbeeldingen om te zien wat meer conversies oplevert?

• Test het aantal productafbeeldingen per pagina. Aangezien laadtijden vaak een probleem zijn voor sommige niet-gehoste e-commerce websites, kan het verminderen van het aantal afbeeldingen op een pagina de doorklikpercentages en verkopen verhogen. Het is ook mogelijk dat een productpagina met veel afbeeldingen de gebruikerservaring juist verbetert en leidt tot meer verkopen. De enige manier om dit te ontdekken is door het te testen!
• Test welke hoeken je klanten het liefst zien. Je kan een toename in klantloyaliteit zien door de weergaven te bieden die je klanten willen zien. Een geweldige manier om dit uit te zoeken is door je klanten te vragen wat ze het leukst vonden bij het bekijken van je productafbeeldingen. Klantonderzoeken en praten met je klanten zijn altijd goede gewoonten. Maar verifieer dit soort zaken altijd door ze te testen!
• Test hoeveel productvermeldingen je op categoriepagina's moet hebben. Zijn het 10, 20 of 100 producten? Test het aantal producten dat je op categoriepagina's vermeldt om te zien wat het beste werkt voor je klanten.

Tools voor beeldoptimalisatie

Nu je wat meer geleerd hebt over afbeeldingen optimaliseren, kun je aan de slag met  een aantal tools en plug-ins die je direct kunt gebruiken voor je website.

Let op dat wanneer je Shopify of een gespecialiseerde afbeeldings-CDN gebruikt, je deze tools niet nodig hebt. De enige uitzondering is de SVGOMG-tool, aangezien de meeste CDN's geen optimalisaties voor SVG's bieden.

Squoosh

Squoosh (EN) is een gebruiksvriendelijke webapp voor afbeeldingscompressie. Sleep simpelweg je afbeelding in de tool en kies uit geoptimaliseerde afbeeldingstypes zoals JPEG XL, WEBP, PNG en meer.

TinyPNG

TinyPNG (EN) is een andere populaire tool voor het optimaliseren van afbeeldingen op het web. Het gebruikt slimme compressietechnieken om de bestandsgrootte van je website (WEBP), JPEG- en PNG-bestanden te verkleinen.

Je kan afbeeldingen verkleinen voor je apps of je online winkel, maar ook geanimeerde afbeeldingen verkleinen. Het richt zich niet alleen op afbeeldingscompressie, maar biedt ook API-integratie en ontwikkelaarstools om TinyPNG in aangepaste software te integreren.

De API van TinyPNG past automatisch de grootte van afbeeldingen voor miniaturen aan, verwijdert onnodige delen en voegt meer achtergrond toe. Als je je website op WordPress draait, is het beschikbaar als een plug-in.

SVGOMG

SVGOMG (EN) is een andere eenvoudige tool om afbeeldingen te optimaliseren. Het biedt verschillende opties om je SVG-bestanden op te schonen en te minimaliseren. Upload je SVG of kopieer de bron om te beginnen. Je kan met de verschillende instellingen spelen en een identieke afbeelding creëren met een kleinere bestandsgrootte dan het origineel.

Houd foto's functioneel door afbeeldingen te optimaliseren

Het optimaliseren van je afbeeldingen is essentieel voor het runnen van een succesvolle online onderneming. Het verbetert niet alleen de uitstraling van je producten, maar het helpt ook om een soepele winkelervaring te creëren en om online gevonden te worden.

Een e-commerce platform zoals Shopify past je afbeeldingen automatisch aan naar het beste formaat voor je bezoekers, zodat jij je verkoopcijfers kan verhogen en je online bedrijf kan laten groeien.