Shopify-productafbeeldingen: welk formaat werkt echt

Shopify-productafbeeldingen gaan op twee manieren mis. Of ze zijn te klein, waardoor de zoomweergave tot pap wordt zodra een klant een naad of een zetting van dichtbij bekijkt. Of ze komen loeigroot rechtstreeks uit de camera, waardoor de pagina kruipt op de telefoon — waar een groot deel van je verkeer landt. De Shopify-admin accepteert allebei zonder waarschuwing.

Shopify doet meer voor je dan de meeste winkeliers doorhebben: het genereert van elke afbeelding meerdere formaten voor verschillende plekken in je winkel, en het CDN kiest een modern bestandsformaat zoals WebP of AVIF waar browsers dat ondersteunen. Wat het níet doet: een inconsistente beeldverhouding rechttrekken, raden welke foto bij welke variant hoort, of een rafelige uitsnede redden. Dit is het deel dat jij in de hand hebt.

Begin op 2048 x 2048 en houd het daarbij

Het advies van Shopify zelf: 2048 x 2048 px komt meestal het best tot zijn recht bij vierkante productafbeeldingen. De harde limieten liggen een stuk hoger — een product- of collectieafbeelding moet onder de 20 MB blijven en mag tot 5000 x 5000 px gaan, oftewel 25 megapixel.

Die plafonds zijn geen streefwaarden. In Dawn vraagt de inline productgalerij het CDN nooit om iets breders dan 1946 px, en zelfs de zoom-lightbox noemt geen formaten boven 4096 px. Een master van 5000 px levert je vooral tragere uploads op en tragere bewerkingen tussendoor. Houd het op het vierkant van 2048 px voor de hoofdgalerij. Ondersteunde uploadformaten zijn onder meer PNG, JPEG en WebP, dus geef Shopify een gecomprimeerd bestand in plaats van een TIFF van 6 MB.

Vierkant of staand: kies één beeldverhouding en houd hem vast

In collectiegrids vallen gemengde beeldverhoudingen meteen op, en daarom raadt Shopify één uniforme verhouding aan voor je uitgelichte afbeeldingen. Thema's als Dawn laten je het kader aanpassen aan elke afbeelding óf alles vastzetten op een vaste verhouding, en allebei straffen ze inconsistentie af: aanpassen geeft een rommelig grid, vastzetten snijdt door de hals van een fles of laat dode ruimte rond een ring.

Beslis het dus één keer. Vierkant (1:1) is de veiligste standaard en herschikt netjes op smalle schermen. Staande verhoudingen als 4:5 of 2:3 passen bij kleding en hoge flessen, en vullen op mobiel meer verticale ruimte. Wat niet kan, is allebei door elkaar gebruiken binnen één collectie.

Dwing het af door het product vrijstaand te maken en het kader zelf opnieuw op te bouwen. Upload een foto naar remover.bg, verwijder de achtergrond en vervang hem door hetzelfde zuivere wit of dezelfde merkkleur als bij elke andere listing. Schaal het resultaat daarna naar je gekozen kader in de exporttool die je toch al gebruikt, zodat een mok in de hand en een lange jas op identieke afmetingen uitkomen. Dezelfde uitsnede voedt ook de strengere marktplaatsregels uit de regels voor Amazon-productafbeeldingen met witte achtergrond, of je houdt hem transparant en monteert hem later zelf — zie wanneer een transparante PNG de juiste output is.

Het CDN van Shopify schaalt mee, maar repareert je bron niet

Thema's vragen afbeeldingen op via de Liquid-filters image_url en image_tag, die een srcset opbouwen zodat het CDN per apparaat een bestand met het juiste formaat en de juiste bestandsindeling kan serveren. Daarom stuurt een goed gebouwd thema jouw bestand van 2048 px nooit naar een telefoon van 390 px.

Twee dingen dekt dat niet af. De keuze van je bestandsformaat bij het uploaden telt nog steeds: exporteren als WebP houdt bestanden klein voordat ze het CDN bereiken, en Shopify accepteert WebP zonder conversie — net zoals remover.bg WebP van begin tot eind afhandelt. En voor honderden SKU's bestaat er geen sleep-je-map-erin-snelkoppeling; dat werk hoort thuis in een script dat de API voor achtergrondverwijdering aanroept en dat je naast je CSV-import laat draaien.

Zoom helpt alleen als de pixels er zijn

Shopify zegt dat afbeeldingen groter dan 800 x 800 px moeten zijn om zoom goed te laten werken. In Dawn biedt de zoominstelling van de producttemplate klikken en hoveren, een lightbox openen, of helemaal geen zoom.

Zet zoom aan als textuur het verkoopargument is: breigoed, leernerf, gravures, edelsteenfacetten, hout. Zet hem uit voor vlakke graphics en kleine iconen, waar zoom alleen maar compressieartefacten uitvergroot. Zoom is ook genadeloos voor randen — bontrandjes, losse haren en dunne bandjes tonen elke fout, en precies daar verdient een schone uitsnede zichzelf terug.

Variantafbeeldingen en de volgorde van je media

Elke variant ondersteunt precies één toegewezen afbeelding — alleen een afbeelding, geen video en geen 3D-model — en die wordt de preview zodra een klant die optie kiest.

Omdat één afbeelding per variant zelden genoeg is, gebruik je de galerij eromheen. Voeg elke shot toe aan de productmedia, zet ze zo op volgorde dat bij elkaar horende shots naast elkaar staan, en plaats de sterkste afbeelding vooraan: het eerste media-item bepaalt de productkaart en de standaardweergave.

Alt-tekst: 512 tekens mag, 125 is genoeg

Shopify begrenst alt-tekst op 512 tekens en adviseert er 125 of minder. Dat is een leesbaarheidsrichtlijn, geen limiet van de screenreader: lange alt-tekst is vermoeiend om te beluisteren, omdat een luisteraar er niet doorheen kan scannen. Beschrijf het kader, inclusief de variant. "Marineblauw linnen overhemd, vooraanzicht, dichtgeknoopt" verslaat "overhemd". Laat "afbeelding van" weg, en laat rijtjes zoekwoorden ook weg. Alt-tekst pas je in bulk aan via een CSV-upload, in plaats van product voor product.

Een korte checklist vóór het uploaden

Voordat een batch Shopify in gaat: exporteer vierkant op 2048 px tenzij je voor staand hebt gekozen, blijf ruim onder de limiet van 20 MB, gebruik één achtergrondbehandeling voor de hele collectie, wijs één afbeelding per variant toe en bouw de galerij eromheen op, en houd je alt-tekst onder de 125 tekens. Niets ervan is glamoureus, en alles ervan valt op de collectiepagina op zodra je het verkeerd doet.