Goede productafbeeldingen maken voor WooCommerce webshop

Je productafbeeldingen en foto’s geschikt maken WooCommerce webshop fotografie is een hele klus, maar een goede voorbereiding is het halve werk. Lees wat je het beste kan doen voordat je je webshop gaat vullen met afbeeldingen.

Deze handleiding is een aanvulling op de algemene handleiding Afbeeldingen geschikt maken voor WordPress website. Het kan geen kwaad om deze ook eens te lezen. Mocht je nog vragen hebben, dan worden die waarschijnlijk in dit artikel wel beantwoord.
De onderstaande methodiek werkt overigens ook heel goed als je een portfolio of overzicht wilt maken, dus niet per se een webshop.

WooCommerce Product Afbeeldingsgrootte

WooCommerce product afbeeldingen zijn er in verschillende maten. WooCommerce afbeelding afmetingen zijn afhankelijk van 3 zaken:

• het gebruikte thema
• de webshop gebruikersinterface
• of de winkel gebruik maakt van een afbeelding zoom plugin.

Vuistregels en tips van Arthur

Afbeeldingsgrootte vierkant en 1000×1000 pixels

Een minimale WooCommerce afbeeldingsgrootte van 800 tot 1000 pixels wordt aanbevolen voor standaard producten. Als je meer ingewikkelde en gedetailleerde producten hebt, zal een grotere afbeelding klanten laten inzoomen om de details van het item te zien. Gebruik bij voorkeur een vierkante foto. Dit kan later veel problemen voorkomen en het ziet er consistent uit. Ik leg het hieronder verder uit.
Ik adviseer 1000×1000 pixels en het liefst allemaal van dit formaat. Dan zien je Lightbox pop-ups er straks ook mooi strak uit.

Maak goede consistente uitsnedes op basis van Grid

Maak strakke uitsnedes op basis van Grid. Een goed grid krijg je van Arthur bij de WooCommerce training.

• Maak je afbeeldingen eerst in een bestand op 1500×1500 pixels in een fotobewerkingsprogramma.
• Exporteer ze daarna naar 1000×1000 pixels als JPG met maximaal 100kb. Lees verderop in deze handleiding hoe je dit doet.

Bewaar je bronbestand van 1500×1500 pixels goed. Mocht je ooit je afbeeldingen voor bijvoorbeeld drukwerk nodig hebben dan heb je deze waarschijnlijk weer nodig. Lees hieronder hoe je dit allemaal doet.

Maak evenwichtige consistente uitsnedes op een grid/raster

Vaak krijg je foto’s en afbeeldingen aangeleverd voor je webshop. Als je deze door elkaar gebruikt wordt het vaak een rommeltje. Maak daarom evenwichtige consistente uitsnedes. Het is even extra werk maar je website wordt er veel strakker door.

Gebruik het grid van de WooCommerce cursus

Gebruik het grid dat je van Arthur krijgt bij de WooCommerce training. Op het grid staan een aantal gekleurde lijnen op een raster. Zie hieronder wat je hiermee kan. Je kan dit grid als laag in je fotobewerkingsprogramma toevoegen.

Voorbeeld T-Shirt en product op grid

Links zie je productfoto’s zonder grid. Aan de rechterkant zie je het grid waarop de afbeelding staat. In de onderstaande voorbeelden staat het t-shirt en de verpakking altijd binnen de blauwe stippellijnen. Als je dit consequent doet ziet je webshop er ook mooi gelijkmatig en strak uit.
In dit geval zijn de blauwe lijnen als maatstaf genomen, maar je kan uiteraard ook groter of kleiner gaan. Niet te klein anders zie je het product niet goed, bijvoorbeeld op een smartphone.

Voorbeeld producten op een raster

Een voorbeeld van producten op een raster, in dit geval schoenen:

De afbeeldingen zien er mooi evenwichtig uit. Alleen de achtergrond kan beter. Dit lukt als je de bovenstaande stap doet, alleen moet je dan alle afbeeldingen gaan uitsnijden als dit nog niet gebeurd is. Dit uitsnijden is meestal een hele klus.

Sfeerfoto’s en uitsnedes en composities voor WooCommerce

Composities voor sfeerfoto’s en impressies voor WooCommerce afbeeldingen kun je op een zelfde manier benaderen. Ik heb een aantal modellen op een rij gezet. Als je goed kijkt zie je wat ze gemeen hebben. Zoniet: het antwoord staat onderaan deze webpagina.

Verhouding van WooCommerce afbeeldingen

Het is ook fijn als de verhoudingen van je producten kloppen. Bekijk hier een voorbeeld van 3 producten waarbij je duidelijk de verhouding kan zien. Klik op de afbeeldingen om te vergroten:

Verhouding oplossen met CSS

Soms klopt in een bestaand thema de verhouding niet. Dit kun je oplossen met CSS:

img {
  max-width: 100%;
  object-fit: contain;
}

Handleiding afbeelding schalen met CSS

Voorbereiden van WooCommerce afbeeldingen om te uploaden

Ik laat zien hoe ik afbeeldingen voorbereid om te uploaden voor een WooCommerce site. Mijn afbeeldingen editor van keuze is Photoshop of het Alternatief voor Photoshop Affinity Photo, maar je kunt alternatieven gebruiken zoals Sketch of GIMP (gratis). Liever geen paint omdat je hiermee niet met compressie kan exporteren of opslaan.

Maak een consistent canvas in Photoshop of fotobewerkingsprogramma

Ten eerste, maak ik een consistente canvas grootte. Dit is de sleutel. Ik wil geen productafbeeldingen met onregelmatige afmetingen in mijn winkel of vertrouwen op WooCommerce’s eigen cropping. Dit doe je dus allemaal vooraf.

Photoshop product canvas

Ik maak in dit voorbeeld een canvas aan met een breedte van 1280px en een hoogte van 1500px, maar je kan zelf het beste 1500×1500 pixels nemen zoals ik eerder noemde. De resolutie is ingesteld op 72. De kleurmodus is ingesteld als RGB, wat ontworpen is voor het web.

Voeg een lichtgrijze achtergrondlaag toe

Het volgende wat ik doe is een rechthoekige laag tekenen op het canvas en deze een lichtgrijze kleur geven. Bijvoorbeeld de grijze kleur met de hex-waarde #dedede. Lichter kan ook, bijvoorbeeld #f2f2f2. Dit creëert een natuurlijke achtergrond voor elke afbeelding en maakt ze beter gedefinieerd wanneer ze op een raster staan.

Tip: een mooi overzicht van vele grijstinten en kleuren vind je onderaan de volgende pagina met een uitgebreid kleurenoverzicht dat ik gemaakt heb:

Een lichtgrijze laag als achtergrond toevoegen

Importeer vervolgens de productafbeelding die je wilt gebruiken en plaats deze op het canvas. Houd shift ingedrukt terwijl je de hoekranden verkleint om ervoor te zorgen dat de verhoudingen behouden blijven.

Plaats de productafbeelding op je canvas

Je zult zien dat de productlaag boven de grijze achtergrondlaag staat. Ook heeft de afbeelding een witte achtergrond die nog niet met de achtergrondkleur vermengd is.

Laad het grid in van Arthur

Laad eventueel het hierboven genoemde grid in dat je van Arthur krijgt. Dit doe je op dezelfde manier als hierboven met “importeer”.

Zet de laaginstelling op ‘Donkerder’

Met de productafbeelding geselecteerd, wijzig je vervolgens de dropdown van Normaal in Donker.

Wijzig de productlaag in ‘Donker

Je zult zien dat het nu opgaat in de grijze laag en dat je niet langer de eigen witte achtergrond ziet.

Exporteer de afbeelding als JPEG

Exporteer de afbeelding als JPEG en houd de grootte onder de 100kb. Onze laatste stap is het exporteren van de productafbeelding. Dit gaat via

• Bestand > Exporteren > Opslaan voor web

Exporteer de productafbeelding

Exporteer de productafbeelding en probeer de bestandsgrootte onder de 100kb te krijgen.
Ons doel hier is om te proberen de bestandsgrootte onder de 100kb te houden. In de meeste gevallen is een JPEG de beste keuze. Kies die en verlaag de kwaliteitsschuif ergens tussen de 50 en 80 tot de resulterende bestandsgrootte onder de 100kb zakt links onderaan. Bij bepaalde detailrijke foto’s is dit misschien niet mogelijk. Maar probeer de grootte zo dicht mogelijk bij dit getal te krijgen. Ga bij kwaliteit (rood aangegeven in afbeelding nooit onder de 50. Dan wordt de kwaliteit van de afbeelding heel matig.

Herhaal deze oefening voor elke productafbeelding. Probeer ook om bestandsnamen te gebruiken die logisch zijn en gebruik geen spaties of ongebruikelijke tekens. Als u bijvoorbeeld shirt-met-bloemen.jpg gebruikt, krijgen zoekmachines een veel beter idee van wat er in de afbeelding staat. Nog beter is dames-shirt-met-bloemen.jpg. Lees eventueel deze handleiding:
Namen afbeeldingen goede naam geven in WordPress voor SEO

Veel voorkomende problemen met productafbeeldingen

Wazige Product Afbeeldingen Repareren

Het merendeel van de incidenten met wazige afbeeldingen wordt veroorzaakt door themastyling, wat betekent dat het ontwerp van het thema afbeeldingsafmetingen in pixels heeft die mogelijk niet goed werken met WooCommerce.
Wazige Product Afbeeldingen Repareren

Afbeeldingsmaten voor Thema-ontwikkelaars

Om afbeeldingen in uw catalogus weer te geven, registreert WooCommerce een aantal afbeeldingsmaten die de werkelijke afbeeldingsafmetingen definiëren die moeten worden gebruikt.
Meer over afbeeldingsformaten in WooCommerce

Antwoord op prijsvraag hierboven:

Alle ogen staan op dezelfde hoogte, namelijk op de groene stippellijn.

Ik heb vage onscherpe productafbeeldingen in WooCommerce

Heb je vage productafbeeldingen in WooCommerce webshop? Lees dan deze handleiding op de WooCommerce website of onze handleiding vage onscherpe afbeeldingen in WordPress