In een fysieke winkel pakt een klant het product op. Online is uw foto het enige wat daarvoor in de plaats komt. Dat maakt productafbeeldingen tot het belangrijkste element op de pagina, en tegelijk tot de zwaarste post in uw laadtijd. Die twee belangen botsen, en de meeste webshops kiezen onbewust één kant: ofwel prachtige foto’s die de pagina onbruikbaar traag maken, ofwel platgedrukte plaatjes waarop niets meer te zien is.

Het hoeft geen keuze te zijn. Met de juiste formaten, verstandige compressie en een vaste werkwijze houdt u foto’s die scherp genoeg zijn om op te kopen, en licht genoeg om snel te laden. Dit artikel loopt de beslissingen langs, in de volgorde waarin u ze moet nemen.

Begin bij de formaten in WooCommerce

WooCommerce maakt van elke geüploade foto drie varianten: een voor de productpagina, een voor de catalogusoverzichten en een miniatuur. U stelt die in via Weergave in het thema-aanpassingsscherm, onder Productafbeeldingen.

Wat wij in de praktijk aanhouden, tenzij het thema iets anders vraagt:

  • Origineel bij het uploaden: 1600 pixels aan de langste zijde. Groter heeft alleen zin als u een zoomfunctie gebruikt waarbij mensen op detail willen inzoomen.
  • Productpagina: 800 pixels breed. Op een scherm met hoge pixeldichtheid blijft dat scherp genoeg binnen een kader van 400 pixels.
  • Catalogus: 400 pixels breed. Dat is ruim voldoende voor een raster van drie of vier kolommen.
  • Miniatuur: 150 pixels, vierkant bijgesneden.

Het punt dat vaak vergeten wordt: als u deze instellingen wijzigt, gelden ze alleen voor nieuwe uploads. Bestaande foto’s houden hun oude formaten. U moet de miniaturen dan opnieuw laten genereren, wat met een gratis plugin kan. Doe dat buiten kantooruren, want bij een grote catalogus kost het serverkracht.

Kies één verhouding en houd u eraan

Dit is de goedkoopste verbetering die u kunt doorvoeren en tegelijk de meest genegeerde. Als de ene productfoto vierkant is, de volgende liggend en de derde staand, dan schuift uw hele productraster scheef. Kaarten worden verschillend hoog, knoppen staan niet op één lijn, en de pagina oogt rommelig.

Kies één verhouding voor de hele catalogus. Vierkant is voor de meeste shops het praktischst omdat het zowel op mobiel als in een raster goed uitpakt. Kleding en meubels doen het vaak beter in een staande verhouding van 4 op 5. Wat u ook kiest: één verhouding, voor alles.

WooCommerce biedt onder de instellingen de keuze om afbeeldingen bij te snijden naar een vaste verhouding. Dat is een vangnet, geen oplossing: automatisch bijsnijden hakt geregeld de bovenkant van een product eraf. Beter is het om bij het fotograferen of bewerken al de juiste verhouding aan te houden. Zorg daarbij ook voor een gelijke achtergrond en een vergelijkbare afstand tot het product, anders lijkt de ene schoen twee keer zo groot als de andere.

Comprimeren zonder dat u het ziet

De meeste productfoto’s die wij tegenkomen, zijn twee tot vier keer zwaarder dan nodig. Niet omdat ze mooi zijn, maar omdat ze rechtstreeks uit de camera of van de leverancier komen.

Drie maatregelen, op volgorde van opbrengst:

  1. Zet WebP aan. Dit levert bij productfoto’s meestal tussen de dertig en zestig procent besparing op, bij nagenoeg gelijke kwaliteit. Hoe u dat in één keer goed inricht, staat in ons artikel over WebP instellen in WordPress.
  2. Kies een kwaliteitsniveau rond de 80. WordPress comprimeert JPEG standaard op 82. Voor productfoto’s is dat een prima uitgangspunt. Ga niet lager dan 75; bij effen achtergronden ziet u dan vlekken ontstaan.
  3. Verwijder metagegevens. Camerabestanden bevatten cameragegevens, locatie en soms een ingesloten voorbeeldafbeelding. Dat is zomaar tientallen kilobytes per foto die niemand ooit ziet.

Let op bij producten met transparante achtergrond. Die staan als PNG in uw bibliotheek en moeten verliesvrij gecomprimeerd worden, anders krijgt u lelijke randjes rond het uitgeknipte product.

Alternatieve tekst: voor klanten en voor Google

De alt-tekst beschrijft wat er op de foto staat. Dat is nodig voor bezoekers met een schermlezer en het helpt bij de vindbaarheid in Google Afbeeldingen, wat voor webshops een serieuze bron van bezoek kan zijn.

Beschrijf het product zoals u het aan de telefoon zou beschrijven: “blauwe wollen sjaal met visgraatpatroon” is goed. “product-foto-2847-def” is nutteloos. Herhaal niet uw zoekwoorden en zet er geen merknaam achter die er niet op staat. Bij meerdere foto’s van hetzelfde product beschrijft u per foto wat er anders is: het vooraanzicht, het detail van de naad, het product in gebruik.

Een werkbare werkwijze

Het probleem met foto-optimalisatie is zelden dat u niet weet hoe het moet. Het is dat het bij elke nieuwe productlading opnieuw moet gebeuren. Leg daarom een vaste routine vast, bij voorkeur op papier, zodat ook een collega of stagiair hem kan volgen:

  1. Verzamel de foto’s en snij ze bij naar de vaste verhouding.
  2. Schaal naar maximaal 1600 pixels aan de langste zijde.
  3. Geef ze een begrijpelijke bestandsnaam met het product erin, kleine letters, streepjes tussen de woorden.
  4. Upload ze en vul direct de alt-tekst in. Doet u het later, dan gebeurt het nooit.
  5. Controleer op de productpagina en in het overzicht of de uitsnede klopt.

Werkt u met foto’s van leveranciers, dan is stap 1 en 2 des te belangrijker. Die bestanden zijn vaak enorm en hebben wisselende verhoudingen. Een half uur voorwerk bespaart u een rommelige catalogus.

Een praktijkvoorbeeld

Een webshop in tuingereedschap uit Emmen had ruim achthonderd producten, allemaal met foto’s rechtstreeks van de leverancier. De categoriepagina laadde bijna veertien megabyte aan beeld en de kaarten stonden ongelijk omdat de verhoudingen door elkaar liepen.

De aanpak was saai maar effectief: alle originelen teruggeschaald naar 1600 pixels, de catalogusafbeelding van 800 naar 400 pixels gezet en opnieuw gegenereerd, WebP aangezet, en alles bijgesneden naar vierkant. De categoriepagina ging naar ruim drie megabyte. Wat de eigenaar het meest opviel, was niet de snelheid maar het uiterlijk: het raster stond eindelijk recht, en dat maakte de shop een stuk professioneler.

Wat u zelf doet en wanneer u hulp vraagt

De instellingen aanpassen en foto’s bijsnijden kunt u prima zelf. Het opnieuw genereren van miniaturen voor een grote catalogus is de eerste stap waar het misgaat: op krappe hosting loopt dat proces vast, en dan zit u met half omgezette afbeeldingen.

Gaat het om duizenden producten, of komen de foto’s automatisch binnen via een koppeling met uw leverancier, dan is het verstandiger om dat in één keer goed te laten inrichten. Bij doorlopend WooCommerce-onderhoud hoort het beheersbaar houden van de mediabibliotheek erbij, inclusief het opruimen van beelden die nergens meer gebruikt worden.

Uw eerste stap

Open uw drukste categoriepagina, klik met de rechtermuisknop op een productfoto en kies “afbeelding openen in nieuw tabblad”. Kijk daar naar de afmetingen in de bestandsnaam of in de eigenschappen. Is die foto breder dan 500 pixels terwijl hij in een klein kader staat, dan hebt u binnen een middag een merkbare verbetering te pakken.