Beeldoptimalisatie voor Producten

Afbeeldingen vormen het grootste deel van het paginagewicht op de meeste e-commerce sites. Een enkele productpagina met zes hoge-resolutie foto's kan zonder optimalisatie gemakkelijk 10-15 MB wegen, resulterend in laadtijden van vijf seconden of meer op mobiele verbindingen. Google's Core Web Vitals -- met name Largest Contentful Paint (LCP) -- worden direct beinvloed door bestandsgroottes van afbeeldingen.

Naast paginasnelheid creeren productafbeeldingen directe zoekverkeermogelijkheden via Google Afbeeldingen. Wanneer een shopper zoekt naar "mid-century modern salontafel" in Google Afbeeldingen en jouw productfoto verschijnt met een geoptimaliseerde alt-tag en beschrijvende bestandsnaam, klikken ze direct naar je productpagina.

Beeldoptimalisatie verbetert ook je productvermeldinmen in Google Shopping en visuele zoekresultaten. Google Lens en vergelijkbare visuele zoektools groeien snel, en producten met correct geoptimaliseerde afbeeldingen hebben meer kans om in deze resultaten te verschijnen.

Het samengestelde effect van beeldoptimalisatie over een grote catalogus is aanzienlijk. Het verminderen van de gemiddelde beeldgrootte met 60% over 5.000 productpagina's verbetert de laadsnelheid van elke pagina, wat rankings site-breed verhoogt en bouncepercentages verlaagt.

Het kiezen van het juiste beeldformaat is de basis van beeldoptimalisatie. Voor productfotografie domineren drie formaten: JPEG, PNG en WebP. JPEG is de traditionele keuze voor foto's met complexe kleurovergangen. PNG is beter voor afbeeldingen die transparantie vereisen. WebP, ontwikkeld door Google, levert 25-35% kleinere bestandsgroottes dan JPEG bij gelijkwaardige visuele kwaliteit.

Moderne e-commerce sites zouden WebP-afbeeldingen als primair formaat moeten serveren, met JPEG-fallbacks voor oudere browsers. Het HTML picture-element of server-side content negotiation kan WebP aan compatibele browsers en JPEG aan anderen automatisch serveren. AVIF is een nog nieuwer formaat dat 20% betere compressie bereikt dan WebP.

Compressie-instellingen zijn even belangrijk als formaatkeuze. Een JPEG opgeslagen op 100% kwaliteit is veel groter dan nodig -- de meeste productafbeeldingen zien er identiek uit voor het menselijk oog op 75-85% kwaliteit maar zijn 40-60% kleiner. Tools zoals ShortPixel, TinyPNG, Squoosh en ImageOptim kunnen afbeeldingen in batch comprimeren voor upload.

Comprimeer afbeeldingen niet meerdere keren. Elke ronde van lossy compressie verslechtert de kwaliteit verder met afnemende groottereducties. Begin met het origineel van de hoogste kwaliteit, comprimeer een keer naar je doelkwaliteitsniveau en bewaar het origineel apart.

Alt-tekst (alternatieve tekst) dient twee kritieke doelen: het beschrijft afbeeldingen voor visueel beperkte gebruikers die afhankelijk zijn van schermlezers, en het biedt zoekwoordcontext die zoekmachines gebruiken voor beeldranking. Elke productafbeelding op je site heeft unieke, beschrijvende alt-tekst nodig die nauwkeurig beschrijft wat de afbeelding toont.

Voor de primaire productafbeelding schrijf je alt-tekst die de productnaam en een belangrijk visueel detail bevat. "Dames rode leren crossbody tas met gouden kettingriem - vooraanzicht" is veel nuttiger dan "tas" of "productafbeelding."

Productpagina's met meerdere afbeeldingen zouden gevarieerde alt-tekst voor elke foto moeten hebben. Het vooraanzicht, achteraanzicht, detailshots en lifestyle-afbeeldingen tonen elk iets anders, en de alt-tekst zou deze verschillen moeten weerspiegelen.

Voor variant-specifieke afbeeldingen -- verschillende kleuren, maten of configuraties -- neem je het variant-attribuut op in de alt-tekst. "Heren wandelschoen in bosgroen, maat 43" is nuttiger dan een generieke "wandelschoen."

Vermijd het leeg laten van alt-tekst op productafbeeldingen. Lege alt-attributen vertellen schermlezers om de afbeelding volledig over te slaan, wat geschikt is voor decoratieve afbeeldingen maar nooit voor productfoto's.

Bestandsnamen van afbeeldingen zijn een rankingsignaal voor Google Afbeeldingen dat de meeste webshops volledig negeren. De standaard camerabestandsnaam "DSC_4821.jpg" vertelt zoekmachines niets over de beeldinhoud. Het hernoemen van dat bestand naar "dames-rode-leren-crossbody-tas-voor.jpg" voor het uploaden geeft Google een extra signaal.

Gebruik koppeltekens om woorden in bestandsnamen te scheiden, geen shows of spaties. Google behandelt koppeltekens als woordscheidingstekens. Underscores worden behandeld als woordverbinders. Spaties worden omgezet naar "%20" in URL's.

Houd bestandsnamen beschrijvend maar beknopt. Neem de productnaam, een belangrijk attribuut zoals kleur of materiaal, en het type weergave op. Vermijd het volstoppen van bestandsnamen met buitensporige zoekwoorden. Streef naar drie tot zes beschrijvende woorden.

Voor winkels met grote catalogussen automatiseer je de bestandsnaamgeving met een consistent patroon. Bouw een naamgevingsconventie zoals: {productnaam}-{kleur}-{weergave}.{formaat} en pas het programmatisch toe.

Beeld-URL's moeten ook schoon en beschrijvend zijn. Vermijd URL-structuren die afbeeldingen achter willekeurige hash-strings plaatsen.

Moderne e-commerce sites moeten afbeeldingen van geschikte grootte serveren voor elk apparaat en schermgrootte. Een 3000x3000 pixel hero-afbeelding ontworpen voor een desktop retina-scherm verspilt bandbreedte wanneer geladen op een mobiele telefoon met een 375 pixel breed scherm. Het srcset-attribuut in HTML laat je meerdere beeldgroottes specificeren.

Implementeer srcset met minstens drie grootte-breakpoints voor productafbeeldingen: een kleine versie voor mobiel (ongeveer 400px breed), een medium voor tablets (ongeveer 800px breed) en een grote voor desktop (ongeveer 1200px breed). Voor productdetailpagina's met zoomfunctie voorzie je een extra grote versie (2000-3000px) die alleen laadt wanneer de zoomfunctie wordt geactiveerd.

Lazy loading stelt het laden van off-screen afbeeldingen uit totdat de gebruiker er dichtbij scrollt. Voor productpagina's met meerdere afbeeldingen onder de fold kan lazy loading het initiele paginagewicht met 50% of meer verminderen. Implementeer lazy loading met het native loading="lazy" attribuut op img-tags.

Lazy load niet de primaire productafbeelding of het LCP-element. De hoofdproductafbeelding zichtbaar bij het eerste laden van de pagina moet eager geladen worden met fetchpriority="high".

Gebruik width- en height-attributen op alle img-tags om Cumulative Layout Shift (CLS) te voorkomen. Wanneer een browser de afmetingen van een afbeelding kent voordat deze laadt, kan het de juiste hoeveelheid ruimte reserveren.

Productoverzichtpagina's (categoriepagina's) tonen tientallen productminiaturen in een raster. Elke miniatuur is een rankingkans in Google Afbeeldingen, maar alleen als de afbeeldingen correct geoptimaliseerd zijn. Zorg ervoor dat elke productminiatuur in je raster unieke alt-tekst heeft die de productnaam bevat.

Miniatuurgroottes op categoriepagina's moeten consistent en gepast gecomprimeerd zijn. Het is niet nodig om full-size productafbeeldingen te laden in een raster waar ze worden weergegeven op 200x200 of 300x300 pixels. Genereer speciale miniatuurversies op de exacte weergavegrootte. Dit alleen kan het paginagewicht van categoriepagina's met 70-80% verminderen.

Maak een afbeeldingssitemap of neem afbeeldingstags op in je bestaande XML-sitemap. Een afbeeldingssitemap vertelt Google over alle afbeeldingen op je site en biedt metadata zoals bijschriften. Voor e-commerce sites zou de afbeeldingssitemap elke productafbeelding moeten bevatten met de bijbehorende alt-tekst en de productpagina-URL.

Monitor je beeldzoekprestaties in Google Search Console. Het Prestatieoverzicht kan gefilterd worden om alleen Google Afbeeldingen-verkeer te tonen. Gebruik deze data om kansen te identificeren.

Overweeg het implementeren van gestructureerde data voor productafbeeldingen. Het Product-schema ondersteunt de "image" eigenschap, die Google vertelt welke afbeeldingen bij het product horen.