Productafbeeldingen optimaliseren voor je webwinkel

Begin met de productinformatie die klanten nodig hebben

Een productafbeelding doet meer dan alleen een rechthoek vullen. De afbeelding moet de klant helpen de vorm, afwerking, kleur en kenmerken van het product dat ze kopen te beoordelen. Een export die de naden verwijdert, de tekst moeilijk leesbaar maakt of het uiterlijk van een oppervlak verandert, is te agressief gecomprimeerd, zelfs als de bestandsgrootte indrukwekkend lijkt.

Kies een kleine set nuttige weergaven voordat je gaat bewerken. Een duidelijke hoofdfoto, een andere hoek en een close-up van een belangrijk detail beantwoorden meestal meer vragen dan meerdere bijna identieke foto's. Voeg een lifestyle-weergave of een schaalreferentie toe wanneer dit helpt om het product te verduidelijken. Er is geen verplicht getal: een gewone mok en een technische jas vereisen verschillende informatie.

Bewaar je originele foto's in een aparte map. Maak kopieën voor publicatie met namen die het product en de weergave identificeren. Als de originele afbeelding onscherp, slecht belicht of te klein is, zal compressie dit niet herstellen. Vervang de slechte foto voordat je tijd besteedt aan exportinstellingen.

Zorg voor consistente uitsneden en achtergronden

Open een collectiepagina en bekijk meerdere producten naast elkaar. Verschillende hoeveelheden lege ruimte kunnen ervoor zorgen dat vergelijkbare producten er niet bij elkaar horen of dat ze qua grootte duidelijk verschillen. Kies een beeldverhouding die bij je thema past en zorg ervoor dat de positie van het onderwerp en de omringende ruimte redelijk consistent zijn in de hoofdafbeeldingen.

Een vierkante uitsnede kan goed werken voor een vierkant productraster, maar het is geen universele regel. Een lang kledingstuk of een lang apparaat heeft mogelijk een andere presentatie nodig. Controleer het volledige object, inclusief handvatten en accessoires, voordat je een uitsnede accepteert. Rek een foto niet uit om hem in een sjabloon te laten passen.

Gebruik voor een serie Pixilo’s tool voor productafbeeldingen. Kies gezamenlijke canvasafmetingen, minimale marges en een achtergrond. Snijd daarna elke foto afzonderlijk bij en pas de positie aan. Bekijk de hele serie bij Alle afbeeldingen voordat je die downloadt. Met Vergroten controleer je fijne details en het effect van de gekozen exportkwaliteit.

De minimale marge wordt gemeten vanaf de randen van de bijgesneden afbeelding, niet vanaf een automatisch herkend product. Lege ruimte en ondoorzichtige achtergronden in het bronbestand blijven staan, tenzij je ze wegsnijdt. Een gelijk canvas zorgt dus niet automatisch voor producten die even groot in beeld zijn. Controleer ook het gepubliceerde productoverzicht: je thema kan de beelden opnieuw bijsnijden.

Een witte of neutrale achtergrond kan een catalogus een consistente uitstraling geven, terwijl transparantie geschikt kan zijn voor een ontwerp waarbij producten op verschillende achtergronden worden geplaatst. Als een PNG- of WebP-bestand al transparante gedeelten bevat, kan de tool voor achtergrondkleur deze vullen met een gekozen kleur en een JPG-bestand maken. Deze tool verwijdert geen bestaande achtergrond van een normale foto.

Controleer transparante randen op zowel lichte als donkere oppervlakken. Een vage omtrek die op wit verdwijnt, kan op een donkere pagina duidelijk zichtbaar worden. Als die omtrek al deel uitmaakt van de originele afbeelding, zal het wijzigen van het bestandsformaat deze niet verwijderen. Zie de handleiding voor onverwachte achtergronden in transparante afbeeldingen voor het diagnosticeren van het verschil.

Kies afmetingen voor het raster, de productpagina en de zoom

Meet hoe breed de afbeelding daadwerkelijk in je lay-out verschijnt. Een collectiekaartje kan 360 CSS-pixels in beslag nemen, terwijl de hoofdafbeelding van het product 800 pixels kan beslaan. Dit zijn weergavebreedtes, geen automatische vereisten voor het geüploade bestand.

Een CSS-pixel meet de zichtbare grootte in de pagina-indeling. Op een scherm met hoge pixeldichtheid kan één CSS-pixel meerdere fysieke schermpixels gebruiken. Een scherp beeld kan daarom meer afbeeldingspixels nodig hebben dan de zichtbare breedte.

Voor een scherm met een hoge pixeldichtheid is een versie met ongeveer twee keer de weergegeven breedte een handige kandidaat om te testen. Een kaart van 360 pixels zou daarom een export van 720 pixels kunnen gebruiken, terwijl een productafbeelding van 800 pixels een export van 1600 pixels zou kunnen gebruiken. Houd ook kleinere versies beschikbaar. Deze getallen zijn planningsvoorbeelden, geen platformaanbevelingen of garanties over welk bestand een browser zal kiezen.

Bepaal apart wat de zoomweergave nodig heeft. Als klanten een stofweefsel, bevestigingsonderdeel of gravure willen bekijken, bewaar dan een voldoende gedetailleerde originele afbeelding of lever een aparte close-up. Een kleine afbeelding voor het productraster mag niet het enige bestand zijn dat beschikbaar is voor de Zoom-viewer. Omgekeerd mag het raster er niet voor zorgen dat elke bezoeker een Zoom-afbeelding in volledige resolutie downloadt.

Je platform kan deze varianten automatisch genereren. Als je de levering zelf beheert, gebruik dan responsieve afbeeldingen, zodat de browser een geschikte versie kan opvragen. De handleiding voor responsieve afbeeldingen legt uit hoe afmetingen, srcset en sizes samenhangen. Het simpelweg kleiner maken van een grote afbeelding met CSS zorgt niet voor een kleiner downloadbaar bestand.

Een echt voorbeeld: een productfoto bijsnijden voor een vierkante kaart

Deze foto is 1920 × 1076 pixels. Het potje neemt maar een klein deel van de brede compositie in. Voor een vierkante productkaart kunnen we een nauwere uitsnede maken, zonder het product uit te rekken of de gefotografeerde achtergrond te verwijderen.

1. Kies de uitsnede. Houd in de tool voor productafbeeldingen het hele deksel en de onderkant van het potje binnen een uitsnede van 630 × 630 pixels. Het voetstuk mag buiten beeld vallen; het product zelf moet volledig zichtbaar blijven.
2. Stel de uitvoer in. Gebruik een canvas van 600 × 600 pixels met een marge van 0%. Laat vergroten uitgeschakeld: de uitsnede is iets groter dan het resultaat en kan worden verkleind zonder pixels toe te voegen.
3. Exporteer en controleer. We hebben een JPG met kwaliteit 90 gedownload van 16,4 kB. Bekijk de dekselrand, de lichte schaduw en het gladde witte oppervlak voordat je het resultaat gebruikt.

Het vierkant van 600 pixels is een voorbeeld voor een productkaart, geen algemeen uploadadvies. Een grote galerij of zoomweergave kan meer pixels nodig hebben. De kleinere bestandsgrootte komt door bijsnijden, verkleinen en JPG-export samen en meet niet alleen compressie. De oorspronkelijke achtergrond en een deel van het voetstuk blijven zichtbaar.

Kies een formaat dat bij de afbeelding past en door je publicatiesysteem wordt ondersteund

Scheid het formaat dat je uploadt van het formaat dat bezoekers ontvangen. Je webwinkel accepteert mogelijk een originele afbeelding in JPG- of PNG-formaat en levert deze automatisch in WebP- of AVIF-formaat. In dat geval kan het zelf voorbereiden van meerdere uploads in moderne formaten extra werk opleveren zonder dat het resultaat verbetert.

• JPG: Een praktisch uitgangspunt voor foto's met een ondoorzichtige achtergrond, vooral wanneer je platform of een andere bestemming JPEG vereist. Controleer kleine letters en fijne texturen na compressie.
• PNG: is handig voor transparantie en scherpe grafische elementen wanneer je een nieuwe compressiestap met verlies wilt vermijden. Een grote PNG met een foto kan veel zwaarder zijn dan een geschikt alternatief.
• WebP: Het is de moeite waard om te vergelijken voor foto's en transparante productafbeeldingen, mits je publicatieomgeving dit ondersteunt. Het formaat ondersteunt verschillende compressiemodi, maar de PNG/JPG-naar-WebP-converters van Pixilo gebruiken een kwaliteitsinstelling in plaats van een speciale verliesvrije modus.
• AVIF: Een andere optie als je volledige publicatieworkflow dit ondersteunt. Test de geëxporteerde afbeelding en de gepubliceerde pagina; een kleiner bestand alleen is geen garantie dat de afbeelding er geschikt uitziet.

Gebruik de handleiding voor afbeeldingsformaten op websites voor een bredere vergelijking. Test eerst een gewone foto en een lastige afbeelding, zoals een fijn patroon of een transparante uitsnede, voordat je de hele catalogus vervangt. Controleer of uploads, miniaturen, galerijen en de zoomfunctie goed werken.

Stel een bruikbare bestandsgrootte in als streefwaarde zonder details op te offeren

Er bestaat geen universeel juiste bestandsgrootte voor elke productfoto. Een eenvoudig object op een effen achtergrond en een gedetailleerd geweven kledingstuk vereisen mogelijk verschillende instellingen bij dezelfde afmetingen. Een collectiepagina met veel afbeeldingen stelt ook andere eisen aan de laadtijd dan een galerij met één grote afbeelding.

Voor een afbeelding die je direct wilt weergeven, kun je een voorbeeld van 200 KB gebruiken als eerste test en vervolgens bepalen of deze bruikbaar is. Dit is een voorbeeld, geen vereiste. Als de labels of materiaaldetails onduidelijk worden, probeer dan een minder agressieve instelling, een efficiënter formaat of een andere weergavegrootte. Verlaag de kwaliteit niet steeds verder om aan een willekeurig getal te voldoen.

Vergelijk de afbeelding op het formaat dat klanten normaal gesproken zien, en inspecteer vervolgens de belangrijke details op ware grootte of in de zoomweergave. Let op afgebroken letterranden, blokken in de schaduw, vlekkerige texturen en oneffen overgangen op een gladde achtergrond. De beste keuze is de kleinst mogelijke versie die geschikt is voor de betreffende plaatsing, in plaats van de kleinste export die je programma kan produceren.

Voor een aparte compressietest zijn we teruggegaan naar het onbesneden origineel en hebben we een JPG met kwaliteit 20 geëxporteerd. Alle 1920 × 1076 pixels blijven behouden. Het resultaat is 28,0 kB, ongeveer 62% kleiner dan het origineel. Vergelijk de dekselrand, muur en zachte schaduw met de schuiflijn en Detail bekijken. Kwaliteit 20 is een bewust lage testinstelling, geen aanbevolen standaard. Controleer de foto ook op de beoogde weergavegrootte.

Originele JPGJPG · Kwaliteit 20

Heeft een uploadformulier een echte bestandsgroottelimiet? Gebruik dan de tool voor compressie tot een doelgrootte. Houd de afmetingen eerst gelijk en sta proportionele verkleining alleen toe als dat past bij de functie van de afbeelding. Een strenge limiet kan zichtbare compromissen vragen. Soms helpt een andere uitsnede of een aparte detailfoto meer dan verdere compressie.

Exporteer niet herhaaldelijk vanuit de laatst gecomprimeerde kopie. Ga terug naar het origineel wanneer je een andere kwaliteitsinstelling probeert. Kwaliteitswaarden zijn niet uitwisselbaar tussen formaten of encoders, dus een JPG met een kwaliteit van 80 en een AVIF met een kwaliteit van 80 zullen er niet automatisch hetzelfde uitzien.

Controleer wat Shopify, WordPress of je webwinkel al afhandelt

De documentatie van Shopify over afbeeldingsuploads beschrijft de automatische optimalisatie in de webwinkel en adviseert originelen van hoge kwaliteit in plaats van verplichte handmatige voorcompressie. Het geleverde formaat kan verschillen van het geüploade formaat. Controleer de eisen van je productmedia en thema. Een kleine doelgrootte voor de geleverde afbeelding is geen algemene uploadregel voor alle originelen.

Controleer voor een WordPress-webshop de afmetingen van de afbeeldingen die je thema genereert en of je gebruikmaakt van optimalisatieplugins of -services. Controleer of de collectiekaart, productgalerij en zoomfunctie de juiste versies weergeven. De handleiding voor beeldoptimalisatie in WordPress beschrijft de onderliggende workflow.

Als je een afbeelding vervangt, open dan een nieuwe pagina en controleer of de nieuwe versie wordt weergegeven. Gecachede miniaturen of gegenereerde varianten kunnen ervoor zorgen dat een oude export eruitziet als het nieuwe resultaat. Het toevoegen van een andere compressieplug-in voordat je de huidige pipeline controleert, kan meer verwarring veroorzaken dan het probleem oplossen.

Pixilo verwerkt afzonderlijke bestanden lokaal in je browser. Het maakt geen verbinding met je winkel, werkt geen catalogus bij en stelt de levering van afbeeldingen niet in. De tools JPG naar WebP, PNG naar WebP, WebP naar JPG en PNG naar JPG verkleinen afbeeldingen waarvan de breedte of hoogte groter is dan 4000 pixels, met behoud van de verhoudingen. De tool voor beeldgrootte ondersteunt maximaal 8000 pixels per zijde en in totaal 32 miljoen pixels. Controleer de gedownloade afmetingen wanneer je een groot origineel voor de zoomfunctie voorbereidt.

Help zoekmachines de productafbeeldingen te begrijpen

Beschrijf de afbeelding nauwkeurig. Een bestandsnaam zoals blue-ceramic-mug-side-view.jpg is gemakkelijker te beheren dan IMG_4837.jpg. Schrijf voor alternatieve tekst een nuttige beschrijving van wat de afbeelding laat zien, bijvoorbeeld: "Blauwe keramische mok met een gebogen handvat, van de zijkant gezien." Een andere foto moet zijn eigen perspectief beschrijven in plaats van dezelfde tekst te herhalen.

Plaats de afbeelding in de buurt van relevante productinformatie en vermijd het volproppen van bestandsnamen of alt-tekst met herhaalde zoektermen. De richtlijnen van Google voor SEO van afbeeldingen leggen beschrijvende tekst en beeldontdekking uit. Deze werkwijzen helpen om te communiceren wat de afbeelding voorstelt; ze garanderen geen ranking.

Controleer ook de productpagina. Een correcte afbeelding van de gekozen kleur of variant is nuttiger dan een perfect geoptimaliseerd bestand dat het verkeerde artikel toont. Beeldoptimalisatie moet een accurate vermelding ondersteunen, niet compenseren voor ontbrekende productinformatie.

Controleer het gepubliceerde resultaat voordat je de hele catalogus wijzigt

• Collectieweergave: Het product is zichtbaar, de uitsneden zijn consistent en het raster downloadt geen onnodig grote bestanden.
• Productgalerij: De hoofdafbeelding is duidelijk, extra hoeken voegen informatie toe en de juiste variant wordt getoond.
• Zoom: Belangrijke labels, textuur en details blijven leesbaar bij de beoogde vergroting.
• Telefoonindeling: Een smal scherm snijdt het onderwerp niet af en dwingt een grote afbeelding die alleen geschikt is voor desktops niet in een klein vakje.
• Achtergronden: Transparante randen en effen vullingen zien er correct uit tegen de werkelijke paginakleuren.
• Laden: Controleer bestandsaanvragen bij een nieuw bezoek. Voorkom dat de belangrijkste zichtbare productafbeelding wordt vertraagd, alleen omdat andere galerijafbeeldingen later kunnen laden.
• Lay-out: Behoud de juiste beeldverhoudingen, zodat tekst en knoppen niet verspringen wanneer foto's verschijnen.
• Bronbestanden: Bewaar de originelen en een korte beschrijving van de instellingen die voor publicatie zijn gebruikt.

Begin met een paar representatieve producten, waaronder een afbeelding met fijne details. Vergelijk voor en na onder vergelijkbare omstandigheden. Als zowel de weergave als de levering goed werken, pas je het proces toe op de rest van de catalogus. Lees voor verdere hulp bij laadproblemen Waarom websiteafbeeldingen langzaam laden.

Veelgestelde vragen

Wat is de beste afbeeldingsgrootte voor een webwinkel?

Dat hangt af van de weergaveformaten en het zoomgedrag van het thema. Meet de raster- en galerijweergave, behoud voldoende detail van de originele afbeelding voor vergroting en controleer de gegenereerde bestanden. Er is geen universele vierkante afmeting die geschikt is voor elk product of platform.

Moet elke productafbeelding kleiner zijn dan 200 KB?

Nee. Het kan een testbudget zijn voor sommige direct weergegeven afbeeldingen, maar het is geen universele uploadregel. Een originele afbeelding voor de zoomweergave heeft mogelijk meer detail nodig, en een platform dat automatisch optimaliseert, werkt mogelijk beter met een upload van hoge kwaliteit.

Is JPG of PNG beter voor productfoto's?

JPG is een handig uitgangspunt voor gewone foto's met een ondoorzichtige achtergrond. PNG is handig voor transparantie en scherpe afbeeldingen, maar kan groot zijn voor foto's. Controleer de proces voor het uploaden en tonen van afbeeldingen van je platform voordat je een keuze maakt; het formaat dat klanten ontvangen, kan verschillen.

Waarom ziet mijn productafbeelding er wazig uit na het uploaden?

Vergelijk het origineel, je geëxporteerde bestand en de afbeelding die door de winkel wordt geleverd. Veelvoorkomende oorzaken zijn een te kleine originele afbeelding, agressieve compressie, een kleine gegenereerde miniatuur die wordt gebruikt in een grote galerij, of een zoomweergave die hetzelfde kleine bestand vergroot. Identificeer welke stap de wazigheid heeft veroorzaakt voordat je de instellingen wijzigt.

Kan Pixilo de achtergrond van een productfoto verwijderen?

Nee. De tool voor productafbeeldingen vult extra canvasruimte en al transparante delen met de gekozen achtergrondkleur. Hij herkent geen producten en verwijdert geen ondoorzichtige fotoachtergrond. Ook de aparte achtergrondkleurtool heeft een afbeelding met een al transparante achtergrond nodig om de ruimte achter het product in te kleuren.