Shopify-afbeeldingen optimaliseren: afmetingen, formaten en compressie

Voorbeeld: een hoofdproductfoto voorbereiden

Stel dat je een scherpe foto van 3600 × 2400 pixels hebt en je winkel vierkante hoofdafbeeldingen gebruikt. De stappen tonen een werkwijze, geen gemeten compressieresultaten of beloofde downloadgroottes.

1. Kies de uitsnede. Probeer een vierkant van 2400 × 2400 waarin het hele product past. Pas anders de compositie aan in plaats van belangrijke delen af te snijden.
2. Controleer de samenhang. Vergelijk met twee bestaande productkaarten en pas de ruimte rondom aan voor een vergelijkbare productgrootte.
3. Maak een passend bronbestand. Vergelijk een kopie van 2048 × 2048 met de uitsnede op volle grootte. Behoud genoeg detail voor productweergave en zoom. Vergroot geen klein origineel alleen om dit getal te halen.
4. Kies het formaat. Gebruik een scherpe JPG voor een foto op een effen achtergrond of PNG als transparantie nodig is. Maak compressietests vanuit het goede origineel.
5. Upload en bekijk. Controleer productpagina, collectie en telefoonweergave. Belangrijke randen mogen niet verdwijnen; zoom moet nuttige details tonen.
6. Controleer de geleverde versie. Onderzoek bij onscherpte of traagheid de versie die het thema laadt voordat je opnieuw exporteert.

Werkt de aanpak voor een kleine selectie, pas hem dan toe op vergelijkbare producten. Bekijk uitzonderingen afzonderlijk. Glanzende sieraden en een eenvoudige doos kunnen andere kwaliteitskeuzes vragen ondanks dezelfde maten en compositie.

Wat Shopify al automatisch doet

Maak onderscheid tussen het bestand dat je uploadt en de versie die de browser van je klant downloadt. Een upload verkleinen van 4 MB naar 1 MB verkleint de download voor je klant niet noodzakelijk in dezelfde verhouding.

Shopify maakt versies met verschillende afmetingen en kan WebP of AVIF leveren als de browser ze ondersteunt. De handleiding voor thema-afbeeldingen zegt dat handmatige compressie vóór het uploaden niet nodig is. Het origineel behoudt zijn kwaliteit in het beheer, terwijl de winkel een geoptimaliseerde versie kan tonen.

Een scherp, goed samengesteld origineel is daarom nuttiger dan een bestand dat koste wat kost klein is gemaakt. Shopify kan weggecomprimeerde details niet herstellen. Als je thema een piepkleine versie van een scherpe foto uitrekt, ligt het probleem niet bij het origineel.

Begin bij het zichtbare probleem. Corrigeer de compositie of de bijsnij-instelling als het product verkeerd wordt uitgesneden. Gebruik een betere foto als het origineel onscherp is. Onderzoek de geleverde versie als een scherpe foto langzaam laadt. Opnieuw comprimeren is niet voor alle drie de juiste eerste stap.

Afmetingen kiezen voor de plek op de pagina

Kies afmetingen voor de grootste nuttige weergave, niet alleen voor de kleine productkaart. Een scherpe miniatuur kan te klein zijn voor galerij of zoom. Pixels beschrijven breedte en hoogte; KB of MB beschrijven de hoeveelheid gegevens in het bestand.

Shopify accepteert product- en collectieafbeeldingen tot 5000 × 5000 pixels, of 25 miljoen pixels, met een bestand kleiner dan 20 MB. Voor vierkante productfoto's noemt het 2048 × 2048 als startpunt, niet als verplichting voor elke winkel. Controleer de vereisten voor productmedia voordat je een grote reeks voorbereidt.

Uploadlimieten kunnen per plek verschillen. Shopifys documentatie voor Bestanden noemt 20 MB en 25 miljoen pixels voor afbeeldingen; de themahandleiding noemt 20 miljoen pixels voor andere uploads. Volg de instructies en eventuele foutmelding van het gebruikte veld in plaats van één limiet op het hele beheer toe te passen.

Een productfoto die 700 pixels breed wordt weergegeven kan baat hebben bij een versie van 1400 pixels op een scherm dat twee afbeeldingspixels per weergavepixel gebruikt. Dit is een planningsvoorbeeld, geen regel om elke upload te verdubbelen. Zoom kan meer detail vragen; een kleine kaart hoort nog steeds een kleinere versie te krijgen.

Maak niet elke foto vierkant omdat vierkante productkaarten gebruikelijk zijn. Een hoge fles, kledingfoto en landschap kunnen een andere compositie vragen. Houd de vorm gelijk binnen groepen waar dat het vergelijken makkelijker maakt.

Een banner van 1200 × 600 heeft een verhouding van 2:1. Een bestand van 2400 × 1200 behoudt die vorm en biedt meer detail op scherpe schermen. Dit zijn voorbeeldmaten, geen Shopify-bannereisen. Een hoge, smalle mobiele sectie kan veel van de zijkanten afsnijden. Een aparte mobiele afbeelding helpt als het thema die ondersteunt.

JPG of PNG kiezen voor de inhoud

Probeer JPG voor gewone foto's zonder transparantie. Probeer PNG voor transparante achtergronden of afbeeldingen met scherpe tekst en dunne lijnen die in JPG slechter worden. Vergelijk bestanden in plaats van één formaat voor de hele catalogus te kiezen.

Een PNG-foto kan veel groter zijn dan een JPG, maar omzetten helpt alleen als het product correct zichtbaar blijft. Kijk naar stoffen, sieraden, houtnerf en kleine opschriften. Een klein bestand dat die details verbergt is geen goede productfoto.

WebP uploaden is een optie, geen voorwaarde voor moderne levering. Shopify kan het geleverde formaat los van het uploadformaat kiezen. AVIF in je browser betekent evenmin dat je AVIF moet uploaden. Controleer welke formaten het specifieke veld accepteert.

Een witte achtergrond is niet transparant: opslaan als PNG verwijdert geen wit vlak dat al achter het product staat. Controleer transparante afbeeldingen tegen de echte pagina-achtergrond, vooral lichte randen en schaduwen. Onze gids voor afbeeldingsformaten legt uit wanneer elk formaat handig is.

Productfoto's gelijkmaken zonder belangrijke details af te snijden

De beeldverhouding is de verhouding tussen breedte en hoogte. Foto's van 2000 × 2000 en 1000 × 1000 zijn allebei vierkant, maar bevatten verschillende hoeveelheden detail. Dezelfde vorm is niet genoeg: het product moet ook ongeveer hetzelfde deel van elke hoofdafbeelding vullen.

Vergelijk een rij collectiekaarten. Als één schoen het beeld vult en een andere veel witruimte heeft, oogt de rij ongelijk ondanks dezelfde afmetingen. Pas de compositie aan voor makkelijker vergelijken en houd voldoende ruimte om alle productranden te laten zien.

Bijsnijden verwijdert delen van de foto, schalen verandert afmetingen en uitrekken vervormt verhoudingen. Gebruik de tool om afbeeldingen bij te snijden voor de compositie en de tool voor afbeeldingsafmetingen voor proportioneel verkleinen. Een fles uitrekken tot een vierkant geeft een verkeerd beeld van haar vorm.

Bereid een serie voor met de tool voor productafbeeldingen: kies een gezamenlijk canvas en marges, snijd elke foto bij of verplaats hem en vergelijk de serie bij Alle afbeeldingen. Controleer of vergelijkbare producten ongeveer evenveel ruimte innemen. Een gelijk canvas corrigeert verschillen in de oorspronkelijke kadrering niet automatisch. Exporteer een heldere JPG, of PNG als je transparantie nodig hebt, en bekijk het resultaat in je thema. De tool maakt bestanden; Shopify regelt nog steeds de levering en het thema de weergave.

Afhankelijk van het thema kun je in Shopify een focuspunt instellen om een belangrijk deel bij het bijsnijden zichtbaar te houden. Dat helpt bij een gezicht of product in een banner, maar laat niet een hele brede compositie op een smal scherm passen. Controleer beide schermgroottes.

Zet promotiekoppen en knoppen waar mogelijk in de tekstvelden van het thema. Tekst in een bannerafbeelding kan op een telefoon te klein worden of verdwijnen door bijsnijden. Echte paginatekst kan afbreken en geselecteerd worden; een echte knop werkt als link in plaats van alleen een plaatje te zijn.

Wanneer comprimeren vóór het uploaden helpt

Compressie helpt als het origineel onnodig groot is, langzaam uploadt of een limiet overschrijdt. Het levert minder op als het al scherp en hanteerbaar is en Shopify een passende versie levert. Verlaag de kwaliteit niet om elke foto onder een willekeurig doel zoals 100 KB te krijgen.

Bewaar een onaangeroerd origineel. Zijn de afmetingen te groot voor het doel, verklein dan eerst een kopie en test daarna compressie. Voor een klein inhoudsblok kan dit meer besparen dan een enorme foto herhaaldelijk comprimeren. Productzoom kan meer detail rechtvaardigen.

Vergelijk een gecomprimeerde kopie met Pixilo's afbeeldingscompressor. Die accepteert maximaal 20 JPG-, PNG- of WebP-afbeeldingen tegelijk, elk tot 25 MB, en behoudt formaat en afmetingen. De limieten verschillen van die van Shopify. Begin met enkele representatieve foto's en controleer die voordat je de rest verwerkt.

PNG-compressie is hier verliesloos: de pixels blijven hetzelfde. Een goed gecomprimeerde PNG wordt misschien maar iets kleiner. JPG en WebP kunnen fijne details veranderen, dus bekijk de gedownloade kopie. Als het bestand niet kleiner wordt, behoudt Pixilo het origineel.

Vergelijk productfoto's op het formaat dat klanten zien en in eventuele zoomweergaven. Bekijk texturen, kleine labels, egale achtergronden en transparante randen. Ga terug naar het origineel als nuttige details verdwijnen. Onze gids voor productafbeeldingen optimaliseren gaat verder in op deze kwaliteitscontroles.

Nuttige alt-tekst en duidelijke bestandsnamen schrijven

Afbeeldings-SEO begint met een foto die helpt het product te begrijpen. Geef het bestand vóór uploaden een beschrijvende naam, zoals olijfgroene-canvas-rugzak-vooraanzicht.jpg. Vermijd lange lijsten zoekwoorden. De naam moet deze foto onderscheiden van een zijaanzicht of detailopname.

Alt-tekst beschrijft de afbeelding in woorden. Beschrijf bij een productfoto de relevante weergave: “Olijfgroene canvas rugzak van voren met twee buitenvakken.” Beschrijf bij een detailfoto juist het detail. Voeg geen prijs, korting of zoekwoord toe dat de foto niet helpt uitleggen.

Googles richtlijnen voor afbeeldings-SEO raden beschrijvende bestandsnamen en nuttige alt-tekst aan zonder zoekwoorden op te stapelen. Ook de omliggende tekst geeft context. Een bestandsnaam is een kleine aanwijzing, geen vervanging voor een nuttige productpagina.

Alt-tekst toevoegen aan een Shopify-productafbeelding

1. Open in het Shopify-beheer Producten en kies het product.
2. Klik op de afbeelding in de mediasectie om het voorbeeld te openen.
3. Kies Alt-tekst toevoegen, schrijf een korte beschrijving en kies Alt-tekst opslaan.
4. Herhaal voor andere nuttige aanzichten en beschrijf wat elk toont.

Deze stappen volgen Shopifys instructies voor alt-tekst bij productmedia. Themabanners hebben eigen afbeeldingsinstellingen. Controleer voorgestelde beschrijvingen voordat je ze accepteert: kleur, materiaal en productdetails moeten kloppen.

Een beschrijving in de bestandseigenschappen van je computer wordt niet vanzelf alt-tekst. Het thema kan hetzelfde beeld verschillend gebruiken. Decoratieve afbeeldingen kunnen een leeg tekstalternatief nodig hebben; gelinkte afbeeldingen moeten de bestemming begrijpelijk maken.

Onze gids over alt-tekst en bestandsnamen legt deze gevallen uit met voorbeelden. Beschrijvingen helpen toegankelijkheid en begrip, maar garanderen geen posities in zoekresultaten en vervangen geen ontbrekende productinformatie.

De gepubliceerde winkel controleren op telefoon en computer

Een voorbeeld in het beheer is niet genoeg. Begin met deze controles in de gepubliceerde winkel; ontwikkelaarstools zijn niet nodig.

• Open een product op je telefoon. Zie je het helemaal? Kun je belangrijke labels lezen en het materiaal herkennen?
• Bekijk een collectierij. Hebben de hoofdafbeeldingen dezelfde vorm en vergelijkbare marges?
• Probeer galerij en zoom. Voegen extra foto's nuttige details toe? Toont de gekozen kleur of variant het juiste product?
• Herlaad de pagina. Verschijnt de hoofdfoto snel en blijven tekst en knoppen op hun plek tijdens het laden?
• Herhaal op een groter scherm. Controleer brede banners en grotere productweergaven in plaats van alleen het smalle voorbeeld.

Een onscherpe of traag ladende afbeelding onderzoeken

Blijft het beeld onscherp, kijk dan of het thema een kleine versie uitrekt. Downloadt een kleine kaart een enorme foto, controleer de beschikbare kleinere versies. Responsieve afbeeldingen laten de browser passende groottes kiezen voor scherm en indeling.

Shopifys image_tag-documentatie legt uit hoe themacode formaatkeuzes aanbiedt. Vraag bij een benodigde correctie de ontwikkelaar om de aangevraagde afmetingen en de attributen srcset en sizes te controleren. Je hoeft niet elke miniatuurmaat apart te uploaden om een probleem in de code op te lossen.

Ben je vertrouwd met ontwikkelaarstools, dan toont het Netwerk-paneel de echte downloads. Je kunt ook de betreffende pagina en afbeelding naar de themaontwikkelaar sturen.

1. Open de productpagina en ontwikkelaarstools en kies Netwerk (Network).
2. Schakel met het paneel open de browsercache uit voor de test en herlaad. Zo bekijk je een nieuwe download in plaats van een opgeslagen kopie.
3. Filter op afbeeldingen en zoek de hoofdfoto. Controleer het verzoekvoorbeeld zodat je geen galerijminiatuur voor de hoofdafbeelding aanziet.
4. Bekijk overgedragen grootte, afbeeldingsafmetingen en de antwoordheader Content-Type. Een URL die op JPG lijkt kan WebP of AVIF leveren.
5. Herhaal na herladen op de breedte van de telefoonindeling. Controleer of de kleine weergave niet onnodig de grootste versie downloadt.

Beoordeel levering niet alleen op bestandsgrootte. Een grotere versie kan logisch zijn voor een scherp scherm of zoom. Zoek duidelijke fouten: een miniatuur uitgerekt over de hele galerij of volledige originelen voor elke kleine collectiekaart.

De hoofdfoto bovenaan moet snel beschikbaar zijn. Afbeeldingen verderop kunnen meestal wachten tot de bezoeker nadert. Shopify raadt uitgesteld laden af voor afbeeldingen die zonder scrollen zichtbaar zijn. Verschijnt de eerste foto laat, laat dan het laadgedrag controleren; alles in de galerij meteen laden kan een nieuw probleem veroorzaken.

Laadsnelheid en verschuivingen afzonderlijk controleren

Is de hoofdfoto het grootste zichtbare element, dan kan die invloed hebben op Largest Contentful Paint (LCP), dat meet wanneer de grootste zichtbare afbeelding of het grootste tekstblok verschijnt. Een kleiner bestand helpt als downloaden een deel van de vertraging vormt. Een laat gestart verzoek kan na compressie langzaam blijven. Googles LCP-handleiding legt het verschil uit.

Duwt een verschijnende foto de prijs of koopknop omlaag, dan heeft het thema mogelijk te weinig ruimte gereserveerd. Dit draagt bij aan Cumulative Layout Shift (CLS), een maat voor onverwachte paginaverschuivingen. Reserveer beeldruimte in de indeling in plaats van alleen verder te comprimeren. Zie Googles uitleg over layoutverschuivingen en onze gids over afbeeldingen en Core Web Vitals.

Vergelijk dezelfde pagina voor en na onder vergelijkbare omstandigheden en wijzig één ding tegelijk. Onderscheid de gesimuleerde PageSpeed-test van eventuele echte bezoekersgegevens. Scores variëren en echte gegevens veranderen niet meteen na een bewerking. Noteer het opgeloste probleem in plaats van alleen één hogere score.

De oorzaak vinden voordat je alle afbeeldingen verandert

Shopifys handleiding voor winkelprestaties noemt ook thema's, apps en toegevoegde code. De rapporten gebruiken echte bezoekersgegevens. Is de beeldlevering al efficiënt, zoek dan de resterende vertraging in plaats van nog een beeldapp of agressievere cataloguscompressie.

Welke afbeeldingen pak je eerst aan?

Begin met de hoofdfoto en collectiekaart van een veelbekeken product, daarna met een opvallende homepagebanner. Geef zichtbare problemen voorrang: een onleesbaar label, afgesneden product of late foto. De vijfde afbeelding van een weinig bekeken galerij is meestal minder belangrijk dan de hoofdfoto waarop klanten besluiten verder te kijken.

Noteer pagina, originele afmetingen, uitsnede, formaat en de verbetering. Bewaar het origineel om een slecht resultaat terug te draaien. Gebruik de geslaagde aanpak voor vergelijkbare producten en bekijk uitzonderingen apart, in plaats van de hele catalogus ineens te vervangen.

Veelgestelde vragen

Wat is het beste formaat in pixels voor Shopify-productfoto's?

Er is geen ideale maat voor elk ontwerp. 2048 × 2048 is een goed startpunt voor vierkante foto's; thema, compositie en zoom bepalen de behoefte. Gebruik een scherp origineel binnen de uploadgrenzen en controleer de gepubliceerde pagina. Vergroot geen kleine foto alleen tot 2048 pixels.

Comprimeert Shopify afbeeldingen automatisch?

Shopify optimaliseert de levering en kan verschillende groottes en formaten sturen. Dat vervangt het opgeslagen origineel niet door een sterk gecomprimeerde kopie. Je kunt uitsnede en overmatige afmetingen vooraf verbeteren, maar elke foto handmatig comprimeren is niet nodig.

Moeten alle productfoto's onder 200 KB blijven?

Nee. Een willekeurig doel kan nuttige details weghalen, vooral bij zoomfoto's. Bekijk de grootte en kwaliteit van de werkelijk gedownloade versie. Een kleine kaart en een grote detailfoto hebben andere eisen.

Is PNG of JPG beter voor Shopify?

Probeer JPG voor foto's zonder transparantie en PNG voor transparante beelden of tekst die in JPG achteruitgaat. Controleer fijne productdetails. Shopify kan een ander formaat leveren dan je uploadt.

Heb ik een app voor beeldoptimalisatie nodig?

Niet alleen voor Shopifys automatische levering. Een app kan handig zijn voor een grote beeldbibliotheek of een specifieke taak. Bepaal eerst wat de bestaande tools en het thema niet doen. Test het daadwerkelijke effect op één pagina voordat je de app winkelbreed gebruikt.

Heb ik voor elke schermgrootte een aparte afbeelding nodig?

Voor gewone productfoto's meestal niet: een goed thema vraagt verschillende groottes van dezelfde upload. Een andere mobiele compositie helpt als de desktopbanner het onderwerp op een telefoon afsnijdt. Dat is een indelingskeuze, geen reden voor veel kopieën van elk productbeeld.