10 tips voor image optimization

Image optimization is een van de vele onderdelen om een succesvolle e-commerce business op te bouwen. Denk bijvoorbeeld aan het aantrekken van klanten door middel van Google Images tot het terugbrengen van uw laadtijd door gebruik van geschikt beeldmateriaal.

Shopify.com geeft tien tips op het gebied van image optimization. Hieronder staan de tips uitgewerkt.

1. Hernoem uw afbeeldingen
Het is gemakkelijk om de bestandsnamen voor afbeeldingen aan te houden zoals de camera deze verschaft, maar op het gebied van search engine optimization (SEO) is dit niet heel handig. Als gaat om SEO is het immers belangrijk om acceptabele zoekwoorden te gebruiken om zo de kans dat u hoger rankt binnen zoekmachines te vergroten. Beschrijvende, zoekwoordrijke bestandsnamen zijn dan ook absoluut cruciaal bij image optimization. Zoekmachines doorzoeken namelijk niet alleen de teksten op uw website, maar ze kijken ook naar zoekwoorden in de bestandsnamen van uw afbeeldingen.

Een voorbeeld:

U kunt bij dit voorbeeld gebruikmaken van de generieke naam die u camera aan de afbeelding geeft, bijvoorbeeld DCMIMAGE10.jpg. Maar het zou beter zijn om de bestandsnaam te wijzigen naar: 2012-Ford-Mustang-LX-Red.jpg. Denk na over hoe consumenten zoeken naar producten die u verkoopt. Welke zoekwoorden gebruiken zij hierbij? In dit voorbeeld zoeken consumenten mogelijk met de volgende zoektermen:
- 2012 Red Ford Mustang LX
- Ford Mustang LX Red 2012
- Red Ford Mustang LX 2012

Bekijk uw website-analytics om te achterhalen welke formuleringen uw klanten gebruiken bij het uitvoeren van zoekopdrachten. Bepaal de meestvoorkomende zoektermen en pas die toe in de formulering van uw afbeeldingen.

2. Optimaliseer uw alt tags
Een alt tag is een toevoeging in de html aan een image tag, de verwijzing naar een afbeelding op een webpagina. Als de bezoeker van de pagina met de muis over de afbeelding gaat, zal er een vlakje verschijnen met daarin de in de alt tag ingevulde tekst. Het is dus een soort onderschrift en geeft vaak een beschrijving van de afbeelding. Het alt attribuut voegt ook SEO-waarde toe aan uw website. Het toevoegen van geschikte alt tags aan de afbeeldingen op uw website kan ervoor zorgen dat uw site een betere ranking realiseert in zoekmachines. Hieronder een kijkje in de broncode van een alt tag:

Hierbij een aantal eenvoudige regels wat betreft alt tags:

• beschrijf uw afbeeldingen in normaal Nederlands, zoals u ook doet bij de bestandsnamen van de afbeeldingen
• als u producten verkoopt met model- of serienummers, gebruik deze dan in de alt tags
• pas geen keyword stuffing toe in uw alt tags (bijvoorbeeld: alt=“ford mustang muscle car buy now cheap best price on sale”)
• maak geen gebruik van alt tags bij decoratieve afbeeldingen; zoekmachines zouden u kunnen benadelen in verband met ‘overoptimalisatie’
• Tot slot, controleer van tijd tot tijd uw website om te zien of alle alt tags zijn ingevuld.

3. Zet een strategie op wat betreft afmetingen en invalshoeken van foto’s
Tegenwoordig presenteren steeds meer webwinkels hun producten met foto's die zijn genomen vanuit verschillende hoeken. Bij bijvoorbeeld de eerder besproken Ford Mustang wilt u als verkoper immers niet maar één shot van de auto tonen. Het kan namelijk in uw eigen belang werken om ook foto’s te presenteren van het interieur, de achterzijde, close-ups van de velgen en dergelijke. De beste manier om te profiteren van deze extra foto’s is door het invullen van de alt tags. Creëer hierbij unieke alt tags voor elke productfoto:

4. Reduceer de bestandsgrootte van uw afbeeldingen

• de meeste consumenten wachten zo’n drie seconden op het laden van een website via een desktop of laptop
• … en ongeveer vijf seconden via een mobiel apparaat
• Amazon berekende dat als hun pagina’s een vertraging van één seconde zouden hebben, dat ze 1,6 miljard dollar per jaar mis zouden lopen
• Google gebruikt de laadtijd van een website als factor in zijn rankingalgoritme

Als u afbeeldingen heeft die zo’n vijftien seconden nodig hebben om te laden, dan kunt u er dus wel op rekenen dat u uw potentiële klant kwijt bent. Hoe groter de bestandsgrootte van een afbeelding, hoe langer de laadtijd meestal is van een site. Dus als u de beeldbestanden op uw webpagina kunt verkleinen en de laadtijd kunt versnellen, kunt u de kans dat bezoekers uw site wegklikken inperken.

Een methode waarmee u de bestandsgroottes van afbeeldingen kunt verkleinen is door gebruik te maken van de optie ‘Save for Web’ in Adobe Photoshop. Met deze optie kunt u het beeld aanpassen tot de laagste, acceptabele bestandsgrootte met behoud van beeldkwaliteit.

Als u niet beschikt over Adobe Photoshop dan zijn er tal van andere online tools die u hiervoor kunt gebruiken, zo heeft Adobe bijvoorbeeld ook een online beeldbewerkingsprogramma op Photoshop.com. Deze tool bevat niet alle mogelijkheden van de desktopversie van Adobe Photoshop, maar het omvat wel alle basics voor beeldbewerking. Andere online bewerkingstools zijn: PicMonkey, Pixlr, FotoFlexer en GIMP.

Een goede vuistregel voor e-commerce afbeeldingen is om te proberen de bestandsgrootte lager te houden van 70 kb. Dat kan soms moeilijk zijn, vooral bij grotere afbeeldingen. Verderop in dit artikel meer daarover.

5. Weet welk bestandstype u moet gebruiken in welke situatie
Er zijn drie veelvoorkomende bestandstypen die worden gebruikt als het gaat om afbeeldingen. Dit zijn JPEG, GIF en PNG. Hieronder worden de drie typen bekeken:

JPEG (of .jpg) is een ietwat oud bestandstype en is uitgegroeid tot het standaardbeeld voor internet. JPEG-afbeeldingen kunnen aanzienlijk worden gecomprimeerd, wat resulteert in hoogwaardige beelden van kleine bestandsgroottes. De afbeelding hierboven, een JPEG-formaat, biedt een goede kwaliteit en een kleine bestandsgrootte.


GIF's (.gif) zijn afbeeldingen van een lagere kwaliteit dan JPEG's en worden vaak gebruikt bij simpelere afbeeldingen zoals pictogrammen en decoratieve beelden. GIF's ondersteunen ook animatie. Met betrekking tot image optimization is het goed om GIF's te gebruiken voor de simpele afbeeldingen op een webpagina. Voor complexere afbeeldingen zijn GIF's niet altijd aantrekkelijk genoeg - dit geldt met name voor grotere en meer photoesque afbeeldingen. De afbeelding hierboven is een voorbeeld waarbij u wel weg komt met het gebruik van GIF. Dit komt doordat de foto klein genoeg is, waarbij GIF prima werkt.


PNG-afbeeldingen worden steeds populairder als alternatief voor GIF's. PNG ondersteunt namelijk veel meer kleuren dan GIF en deze bestanden worden niet minder na verloop van tijd door ‘re-saves’ zoals wel het geval is bij JPEG's. Hoewel het PNG-bestandstype steeds meer wordt gebruikt, kan de bestandsgrootte een heel stuk groter zijn dan bij een JPEG-afbeelding. U ziet hierboven dat de PNG-24 afbeelding meer dan drie keer zo groot is qua bestandsgrootte dan de PNG-8 versie. Dit is de reden waarom u voorzichtig moet zijn met het gebruik van PNG's.

Hieronder een voorbeeld waarbij de bestandsgrootte constant wordt gehouden op 24 kb voor alle drie de bestandsformaten. Zoals u kunt zien is JPEG de duidelijke winnaar. Bij de GIF- en PNG- afbeeldingen neemt de kwaliteit af bij een lagere bestandsgrootte.

6. Weet hoe u met thumbnails om moet gaan
Veel e-commerce sites maken gebruik van thumbnail images (miniatuurafbeeldingen). Deze afbeeldingen zijn handig om categoriepagina’s snel te kunnen scannen.


Thumbnails zijn geweldig, maar wees voorzichtig: ze kunnen een ‘sluipmoordenaar’ zijn voor uw paginalaadtijden. Ze worden immers meestal getoond in een kritieke stap tijdens het shopproces en als ze ervoor zorgen dat uw categoriepagina’s niet (snel genoeg) laden, dan is de kans groot dat u de klant verliest. Dus:

• Maak uw thumbnail bestandsgroottes zo klein mogelijk. Het kan de moeite waard zijn om de kwaliteit iets op te offeren ten behoeve van een kleinere bestandsgrootte. Vergeet niet, het cumulatieve effect van thumbnails heeft een enorme invloed op de laadtijd van uw pagina.
• Varieer in uw alt tag-teksten, dus maak geen gebruik van identieke tekst bij een grotere versie van hetzelfde plaatje. Maak al uw alt tag-teksten verschillend. Het laatste wat u wilt is dat de thumbnail wordt geïndexeerd in plaats van de grote afbeelding. U zou daarom kunnen overwegen om de alt tag-teksten bij de thumnails helemaal weg te laten.

7. Gebruik image sitemaps
Als uw site gebruikmaakt van JavaScript galleries, image pop-ups of andere ‘flashy’ manieren om de algehele winkelervaring te verbeteren, kan Google Image Sitemaps u helpen zodat uw afbeeldingen worden opgemerkt door Google. Web crawlers kunnen afbeeldingen die niet zijn genoemd in de broncode van de webpagina niet doorzoeken. Dus om zoekmachines te laten weten dat deze afbeeldingen er zijn, moet u de locatie ervan in een image site map opnemen.

Google heeft vele richtlijnen voor image publishing, die u hier kunt bekijken.

Hoewel het gebruik van Sitemaps niet garandeert dat uw foto’s worden geïndexeerd door Google, kunt u er absoluut uw website mee optimaliseren en met name de afbeeldingen. Het Webmasterhulpprogramma van Google heeft veel suggesties voor het correct opmaken van uw Sitemaps en de afbeeldingen. Bij Google Sitemaps is het belangrijk om specifieke tags toe te voegen aan alle foto’s en om alle benodigde informatie - bij het gebruik van specifieke tags - aan elke Sitemap die u heeft of gaat maken toe te voegen. Volg deze richtlijnen die Google stelt bij het maken van een Image Sitemap.

8. Pas op voor uw decoratieve afbeeldingen
Websites hebben vaak een verzameling aan decoratieve afbeeldingen, denk aan achtergrondbeelden, buttons en randen. Alle afbeeldingen die niet productgerelateerd zijn, kunnen worden beschouwd als een decoratieve afbeelding.

Hoewel decoratieve afbeeldingen een esthetische uitstraling aan een website kunnen geven, kunnen ze ook vaak leiden tot een grote, gecombineerde bestandsgrootte en een lange laadtijd. Daarom is het wellicht handig om uw decoratieve beelden eens onder de loep te nemen, om zo te voorkomen dat deze afbeeldingen een nadelige invloed hebben op het vermogen van uw website om bezoekers om te zetten tot klanten.

Check allereerst de bestandsgrootte van alle decoratieve afbeeldingen op uw webpagina’s en maak gebruik van een template die de bestandgroottes voor alle of in ieder geval de meeste pagina’s van uw website minimaliseert. Hieronder enkele tips om de bestandsgroottes van uw decoratieve afbeeldingen te verkleinen:

• Maak van afbeeldingen die deel uitmaken van randen of eenvoudige patronen een PNG-8 of GIF-bestand. U kunt zo prima uitziende beelden creëren die slechts een paar honderd bytes groot zijn.
• Maak, indien mogelijk, gebruik van CSS om gekleurde vlakken te creëren in plaats van het gebruik van afbeeldingen. Gebruik CSS vormgeving zo veel mogelijk voor het vervangen van decoratieve afbeeldingen.
• Bekijk uw wallpaper-style background image nog eens goed. Dit kunnen namelijk grote bestanden zijn. Verklein deze zo veel mogelijk, zonder dat het de beeldkwaliteit aantast.
• Een trucje die u kunt gebruiken om het achtergrondbeeldformaat te verkleinen is door het midden van de achtergrondafbeelding weg te snijden en dit een egale kleur te geven of transparant te maken.

9. Wees voorzichtig met het gebruik van Content Delivery Networks
Content Delivery Networks (CDN’s) zijn hard op weg de place to be te worden voor het hosten van afbeeldingen en andere mediabestanden. Ze kunnen immers helpen om paginalaadtijden te verbeteren en problemen met bandbreedte op te lossen. Er is alleen een nadeel op het gebied van backlinks. Zoals u wellicht weet zijn backlinks van cruciaal belang voor SEO en hoe meer backlinks u heeft, hoe beter uw site het doet in zoekmachines. Door het plaatsen van uw foto’s bij een Content Delivery Network verwijdert u de afbeeldingen waarschijnlijk van uw domein en plaatst u ze op het domein van het Content Delivery Network. Dus als iemand linkt naar uw afbeeldingen, linken ze eigenlijk naar het Content Delivery Network. Hieronder wat vuistregels op dit gebied:

• Volg niet alleen maar iets omdat het een ‘trend’ is. Bepaal eerst of het echt een goede zet is voor uw business.
• Als uw website tonnen per maand omzet, dan is een Content Delivery Network waarschijnlijk wel een uitkomst omdat het (ook) kan helpen bij het oplossen van bandbreedteproblemen.
• Als uw site enkele duizenden bezoekers per dag ontvangt, dan is de kans groot dat uw huidige hostingsituatie kan omgaan met het verkeer dat u op dit moment verwerkt.

10. Test
Om te achterhalen of bepaalde methodes voor uw site werken, is het – vanzelfsprekend - van groot belang om te testen:

• Test het aantal productafbeeldingen per pagina. Aangezien een te lange laadtijd een probleem kan vormen, kunt u testen of het verminderen van het aantal productafbeeldingen op een pagina zorgt voor een hoger doorklikpercentage en een hogere conversie. Echter, het is ook mogelijk dat door het verstrekken van veel foto’s per pagina (denk aan meerdere invalshoeken per afbeelding) de gebruikerservaring verbetert en dat dát juist leidt tot meer verkoop. De enige manier om erachter te komen wat voor uw site werkt, is – inderdaad - door het te testen.
• Test aan welke afbeeldingen uw klanten de voorkeur geven: het kan zijn dat door het verstrekken van bepaalde invalshoeken bij foto’s de algehele loyaliteit toeneemt. Een goede manier om hierachter te komen is door een onderzoek te houden onder uw klanten met de vraag wat voor en hoe ze productfoto’s het liefste zien.
• Test hoeveel producten u het beste kunt tonen op een categoriepagina: tien, twintig, honderd? Test met verschillende productaantallen op om te zien wat het beste werkt voor uw klanten.

Bron: Shopify.com