Shopify Gids voor beeldformaten: tips voor een prachtige winkel

Wanneer een potentiële klant op je landt Shopify website, gebruiken ze de afbeeldingen om te beslissen of ze een aankoop willen doen. Jouw taak als verkoper is daarom om ervoor te zorgen dat de afbeeldingen de laadsnelheid van de site niet vertragen (en mensen dus wegjagen) en om de afbeeldingen op de juiste manier te formatteren en te formatteren.

Op deze manier lijken de afbeeldingen niet uitgerekt of afgesneden. In onze ultieme Shopify afbeeldingsformaatgids, laten we u zien hoe belangrijk specifieke afbeeldingsformaten zijn voor Shopify fotografie, en bied de ideale formaten voor zaken als uw logo, bannerafbeelding en productafbeeldingen.

Blijf lezen om er alles over te leren Shopify afbeelding maten!

Waarom zou je erom geven Shopify Beeldformaten?

Het is vervelend om afbeeldingen te beheren en te uploaden. Toch zijn zij vaak de grootste boosdoeners als het gaat om lage sitesnelheden, SEO-problemen en lage conversies op een e-commercesite.

En het lastige van alle websitebouwers en e-commerceplatforms is dat je je moet houden aan zeer specifieke afbeeldingsformaten om ervoor te zorgen dat ze geoptimaliseerd zijn en er representatief uitzien.

Om dat samen te vatten, hier is waarom Shopify afbeeldingsformaten zijn belangrijk:

1. Typ elke afbeelding in Shopify vereist unieke afmetingen, zoals hoe logo's een ander formaat moeten hebben dan bannerafbeeldingen.
2. De kans is groter dat gebruikers betalende klanten worden als ze de afbeeldingen duidelijk in het juiste formaat kunnen zien.
3. Goed formaat en geoptimaliseerde afbeeldingen kunnen uw SEO-potentieel vergroten.
4. Slecht formaat fotografie kan uitgerekte of bijgesneden afbeeldingen veroorzaken, wat leidt tot een lelijke website.
5. Het kan zijn dat afbeeldingen met de verkeerde grootte ervoor zorgen dat uw site trager wordt of dat klanten helemaal niet willen wachten.

Samen met die punten: heldere afbeeldingen van goed formaat laten een bepaald niveau van professionaliteit zien, waardoor klanten emotionele reacties krijgen dat u een vertrouwd bedrijf bent en dat uw producten van de hoogste kwaliteit zijn. Slechte foto's lijken gewoon alsof u zich geen zorgen maakt over uw producten of de manier waarop ze worden weergegeven. Uw klanten vragen zich misschien af: "Waar zijn ze nog meer bezig met bezuinigen?"

Met dat gezegd, bekijk onze beknopte referentiegids over de beste Shopify afbeeldingsformaten voor gebieden zoals productpagina's, bannerafbeeldingen en logo's.

Het beste Shopify Afbeeldingsformaten (op basis van waar de afbeeldingen worden gebruikt)

Niet al deze regels zijn hard, maar het is het beste om je zoveel mogelijk aan de "ideale maat" te houden. Thema's hebben soms hun eigen beeldnormen, dus houd dat in de gaten. Anders leggen we het uit als je wat speling hebt wat betreft de afmetingen.

Is er een go-to afbeeldingsformaat om overal te gebruiken Shopify?

Nee, maar als u van plan bent om die aanpak te volgen, raden we u het volgende aan:

1. Zorg ervoor dat alle afbeeldingen groot genoeg zijn om de ingewikkelde details van het product te tonen.
2. Houd de afbeeldingen echter klein genoeg om de prestaties van de site niet te belemmeren.
3. Een goede vuistregel is om voor vierkante afbeeldingen 2048 × 2048 pixels te gebruiken.
4. Vermijd vierkante afbeeldingen met afmetingen kleiner dan 800 × 800 pixels.
5. Vermijd vierkante afbeeldingen die groter zijn dan 4472 × 4472.

Voor niet-vierkante afbeeldingen raden we u zeker aan de onderstaande handleidingen te gebruiken. Het is ook de moeite waard om op te merken dat sommige thema's afbeeldingen anders bijsnijden, dus u moet misschien gokken en controleren welke afbeeldingsgroottes het beste werken voor uw online winkel.

Kijk voor de beste begeleiding bij het ideaal Shopify afbeeldingsformaten hieronder, allemaal gecategoriseerd op basis van afbeeldingstype:

1. Shopify Afbeeldingsgrootte product (ideale grootte: 2048 × 2048 pixels)

Productafbeeldingen dienen als de primaire vormen van media die worden gebruikt om te verkopen. ShopifyDe thema's van 's zijn redelijk goed in het bijsnijden en optimaliseren van productafbeeldingen voor u, maar u moet nooit vertrouwen op de geautomatiseerde tools.

De aanbevolen afmetingen voor productafbeeldingen op Shopify zijn 2048 x 2048 pixels.

Dit is een prachtige plek om ervoor te zorgen dat uw afbeeldingen uw paginasnelheid niet vertragen, terwijl u er ook voor zorgt dat klanten de rijkdom aan details van uw originele foto's zien.

Wij stellen een vierkante afbeelding voor voor productfoto's, om ongewenste bijsnijdingen te voorkomen Shopify thema's.

De onderstaande schermafbeelding toont een afbeelding die is geüpload als 2048 × 2048 pixels en resulteerde niet in bijsnijden.

Langere en bredere afbeeldingen kunnen nog steeds werken voor productfoto's, maar er is minder controle over wat het thema met uw afbeeldingen doet. U zult merken dat landschapsfoto's kleiner worden in vergelijking met het portretformaat.

2. Shopify Collectie afbeeldingsformaat (ideale grootte: 2048 × 2048 pixels)

Voor het toevoegen van een collectie is niet noodzakelijkerwijs een afbeelding vereist, maar als u dit wel doet, kunt u een aparte pagina voor die collectie maken, bijna als een bestemmingspagina die alleen voor een kleine subset van producten is gemaakt.

Een collectieafbeelding wordt geüpload onder de Verzameling maken sectie in Shopify.

Daarna kun je een product toevoegen aan die collectie en het weergeven in een contentblok op de homepage of als een aparte pagina.

Als je de Beeld leeg veld op een collectiepagina, wordt standaard een van de uitgelichte productafbeeldingen uit die collectie gebruikt.

De aanbevolen Shopify afbeeldingsgrootte voor collecties is 2048 × 2048 pixels.

Dankzij de vierkante afmetingen ontstaat er een gestandaardiseerde opmaak voor alle collecties, vooral wanneer ze naast elkaar worden tentoongesteld.

U zult merken dat het makkelijker is om met vierkante afbeeldingen te werken als u gebruikmaakt van inhoudsblokken die collecties laten zien.

Zoals altijd kunnen uw resultaten variëren op basis van het gebruikte thema. Sommige thema's bieden zelfs meer mogelijkheden met uw collectieafbeeldingen, waardoor u de afbeelding als een banner op een aparte collectiepagina kunt delen. In dit geval kan de optimale grootte van uw collectie-afbeelding heel anders zijn dan waar we het hier over hadden. Over het algemeen is uw beste actieplan het testen met uw thema. Upload meerdere afbeeldingen van unieke formaten naar uw collecties. Schrijf op welke dimensies werken en gebruik dan altijd die dimensies. Zorg ervoor dat de afbeeldingen niet te groot of te klein zijn, dan komt alles goed.

3. Shopify Afbeeldingsgrootte logo (ideale grootte: 450 W × 250 H pixels)

Het logo valt op als het uithangbord van uw e-commerce winkel. Het wordt precies weergegeven wanneer iemand op uw startpagina terechtkomt, en op de hele website, aangezien het meestal zichtbaar is in het kopgedeelte.

Shopify gebruikers die problemen hebben met logo-afmetingen, kunnen merken dat het logo niet groot genoeg is, of dat het navigatiemenu op de een of andere manier vervormd raakt. Of misschien vindt u dat het logo veel witruimte eronder of erboven laat.

Om de meeste van deze problemen op te lossen, raden we aan logo-afmetingen van 250 pixels hoog en 450 pixels breed te gebruiken.

Eigenlijk, Shopify raadt aan om nooit hoger te gaan dan deze afmetingen voor breedte en hoogte. Dat gezegd hebbende, je kunt kleiner gaan, zolang je thema het toelaat.

Om de zoveel tijd gooit de zijbalk dingen weg, of misschien bevat uw navigatiemenu te veel elementen die het logo in een vreemde richting duwen. Hoe dan ook, het is het beste om te spelen met de afmetingen van uw logo en site-instellingen om de beste uitstraling te krijgen.

Als alternatief zijn er thema's die er geweldig uitzien met vierkante logo's, maar houd deze dan onder de 250 x 250 pixels, zodat ze niet te veel ruimte innemen.

Ga voor de meeste veelzijdigheid naar Instellingen > Merk in Shopify om een ​​toe te voegen Standaard en Square afbeelding. Op deze manier kunt u beide uploaden, afhankelijk van de situatie.

4. Shopify Bannerbeeldformaat (ideaal formaat: 2000 W × 600H pixels)

Dit wordt regelmatig een Hero-afbeelding of afbeeldingsbanner genoemd. Dit zijn de grotere afbeeldingen die u bovenaan een startpagina kunt plaatsen om nieuwe producten te laten zien en tekst met een knop op te nemen. Het is essentieel dat bannerafbeeldingen een hoge resolutie hebben om korreligheid te voorkomen na het wijzigen van het formaat en wanneer ze op verschillende apparaten worden bekeken.

Shopify ook een Voorvoegsel inhoudsgedeelte, dat op dezelfde manier werkt als het Banner Afbeelding inhoud gedeelte.

Welke je ook kiest, we raden aan om je aan de afmetingen van 1200 pixels breed x 600 pixels hoog te houden voor banners en hero-afbeeldingen.

Dat gezegd hebbende, kun je vaak wegkomen met 1200-2000 pixels voor je breedte en 400-600 pixels voor de hoogte. En zoals altijd hangt het af van je thema.

Tot slot is het ook verstandig om de instellingen voor alle afbeeldingsbanners en heldenafbeeldingen aan te passen. U kunt de bannerhoogte voor de meeste thema's aanpassen en vertellen Shopify waar u de bannerinhoud wilt hebben, zoals in de rechterbenedenhoek of bovenaan, om een ​​beter zicht te krijgen op de afbeelding achter de inhoud.

5. Shopify Afbeeldingsgrootte diavoorstelling (ideale grootte: 2000 W × 600 H pixels)

Net als een banner, moet u afbeeldingen met een hoge resolutie gebruiken in diavoorstellingen. Met deze inhoudssecties kunt u meerdere foto's in één gebied van een pagina weergeven. Ze schuiven dan achtereenvolgens naar de volgende afbeelding.

Omdat ze zo op banners lijken, behoud je eigenlijk dezelfde breedte en hoogte als voor een held- of bannerafbeelding. De aanbeveling is een breedte van 2000 pixels en een hoogte van 600 pixels. De hoogte kan echter variëren van 400 tot 600 pixels en de breedte van 1200 tot 2000 pixels.

Zorg ervoor dat u alle diavoorstellingsinstellingen beheert om de beste opmaak voor uw diavoorstelling te bepalen. Mogelijk moet u het inhoudsvak naar een andere locatie verplaatsen, of misschien zou de diavoorstelling er beter uitzien als u de hoogte iets zou vergroten.

Een van de hoofdregels van een diavoorstelling is om altijd dezelfde afbeeldingen voor dezelfde diavoorstelling te uploaden. U bent meer dan welkom om de afmetingen aan te passen bij het maken van een afzonderlijke diavoorstelling, maar zorg er wel voor dat de afbeeldingen die in één diavoorstelling zijn gecombineerd allemaal dezelfde afmetingen hebben, voor continuïteit en gebruikerservaring.

Hoe te optimaliseren Shopify Afbeeldingen

De optimalisatie van uw afbeeldingen helpt u bij het verbeteren van de manier waarop foto's in uw e-commerce winkel worden geladen. Het helpt je ook om een ​​gebruiksvriendelijkere ervaring op de website te creëren, aangezien de afbeeldingen de winkelervaring moeten aanvullen en niet moeten overheersen.

Er zijn verschillende aspecten waarmee u rekening moet houden bij het optimaliseren van uw afbeeldingen Shopify. Deze gebieden omvatten optimale afbeeldingsformaten, compressies, afbeeldingsbronnen, styling en meer. Blijf lezen om alles te weten te komen over de beste werkwijzen en stappen die u moet nemen om afbeeldingen te optimaliseren in Shopify.

Stap 1: Kies de optimale afbeelding Format

Shopify De afbeeldingsgrootte is belangrijk, maar de eerste stap bij het optimaliseren van elke foto is het kiezen van het beste afbeeldingsformaat.

Er zijn talloze afbeeldingsformaten die Shopify toelaat.

Dit is wat ze speciaal maakt:

1. JPEG/JPG: Misschien wel het meest voorkomende bestandsformaat voor afbeeldingen, en terecht. JPEG's zijn goed te comprimeren en leveren uitstekende kwaliteit. We raden ze aan voor productpagina's, vooral als u fijne details in de foto's hebt.
2. PNG: Dit bestandstype is eigenlijk beter dan JPEG's om de kwaliteit te behouden na het verkleinen van de afbeeldingsgrootte. Het kan echter zijn dat PNG's niet zo veel worden gecomprimeerd. Ze zijn het beste als je een transparante achtergrond nodig hebt (niet ondersteund door JPEG's), dus we vinden ze leuk voor logo's en sommige bannerafbeeldingen.
3. GIF: GIF is een afbeeldingsformaat voor animaties. Het is in feite hetzelfde als een korte video omzetten in een bewegend beeld, wat handig is om een ​​product kort uit te leggen zonder de overweldigende grootte van een video. We vinden ze leuk op homepages, productpagina's en blogposts. Gebruik GIF's echter niet te veel, omdat ze de rijke kleurkwaliteit missen die je in andere formaten vindt, zoals JPEG, TIFF en PNG.
4. WebP: Misschien wel het meest veelzijdige van alle afbeeldingsformaten, WebP wordt steeds gebruikelijker omdat het sterkere compressie en kwaliteit biedt dan zowel JPEG als PNG, samen met de transparantievoordelen van PNG. En niet te vergeten, u kunt ook animaties maken met WebP. Overweeg om WebP te gebruiken voor alle soorten afbeeldingen in Shopify. We verwachten dat WebP in de toekomst vaker op internet zal worden gebruikt.

Behalve dat, Shopify ondersteunt formaten zoals HEIC, progressieve JPEG en AVIF. HEIC is de standaard voor beeldformaten die op Apple-apparaten wordt gebruikt. Het is extreem compact, kan meerdere afbeeldingen in één afbeelding bevatten en biedt uitstekende kwaliteit. Ze zijn echter niet compatibel met de meeste niet-Apple-apparaten, waardoor het moeilijk is om aan te bevelen. Het AVIF-beeldformaat heeft vrij sterke voordelen vanwege de hoge kwaliteit en dramatische compressieverhoudingen. Kortom, uw prestaties met een AVIF zouden eigenlijk beter moeten zijn dan met JPEG- en WebP-afbeeldingen. Het duurt echter nog even voordat desktop- en mobiele browsers het als bestandsformaatstandaard aannemen. We kunnen het dus nu nog niet aanbevelen. Niet totdat vrijwel iedereen met een internetverbinding de afbeeldingen online kan bekijken.

Kies het geschikte formaat hierboven, gebaseerd op waar u de afbeelding voor wilt gebruiken. Ga dan naar de volgende stap, zodat uw afbeeldingsstijlen op uw hele website hetzelfde blijven.

Stap 2: Maak voor alle foto's dezelfde stijl

Continuïteit is de sleutel voor fotografie in e-commerce. Het bepaalt het algehele uiterlijk van uw merk en creëert een gestandaardiseerd gevoel op uw hele website.

Het is bijvoorbeeld gebruikelijk dat merken één achtergrondkleur gebruiken voor alle productafbeeldingen.

Dit geldt ook voor de afmetingen en stijl van de afbeeldingen. Als de meeste van uw productafbeeldingen liggend zijn, gebruik dan niet een paar foto's met landschapsoriëntatie. Je bent meer dan welkom om zowel lifestyle- als productfoto's in de mix op te nemen, maar het is het beste om voor de meeste van je shoots bij één stijl te blijven.

Stap 3: Creëer een mix van zowel product- als lifestylefotografie

Zoals eerder vermeld, wilt u waarschijnlijk één type fotografiestijl gebruiken voor het merendeel van uw productfoto's. Het is echter essentieel om enkele lifestyle-foto's toe te voegen als aanvulling op de standaard productfoto's met eenkleurige achtergrond en een andere weergave van de producten.

E-commercebedrijven hebben het nadeel dat klanten de producten daar niet kunnen passen of aanraken. Dat is waar lifestyle-foto's om de hoek komen kijken. Gebruikers kunnen zien hoe de producten er in actie uitzien. Hoe een overhemd over het lichaam valt, of zo groot als een skateboard waar iemand op staat.

Stap 4: Kies geschikte bestandsnamen en titels

Elk afbeeldingsbestand heeft een naam en Shopify neemt die bestandsnaam en publiceert deze in de metadata van uw website (elk e-commerceplatform doet dit).

Dus als u foto's opslaat als nieuwe-foto(1).jpg op uw computer en upload ze naar uw winkel, dan hebben de zoekmachines geen informatie over de inhoud van de foto. Dit kan uw SEO schaden.

Doorloop bij het optimaliseren van afbeeldingen deze stappen om ervoor te zorgen dat zoekmachines (en die met visuele beperkingen) kunnen begrijpen wat er in de afbeelding gebeurt:

1. Voeg een bestandsnaam toe die doet denken aan wat er in de afbeelding staat.
2. Als u toevallig een generieke bestandsnaam uploadt, wijzigt u de afbeelding Titel in Shopify. Dit vervangt de standaard.
3. Gebruik alt-tags voor een nog sterkere weergave van wat er in de afbeelding wordt getoond. Dit zijn de belangrijkste elementen waar de zoekmachines naar kijken, omdat het laat zien dat uw gebruikerservaring is verbeterd voor slechtzienden.

Stap 5: afbeeldingen comprimeren voor of tijdens het uploaden

Shopify biedt automatische compressie voor alle afbeeldingen die naar zijn servers worden geüpload, maar daar moet je niet volledig op vertrouwen.

U kunt het beste een hulpprogramma van derden gebruiken om afbeeldingen te comprimeren voordat u ze uploadt Shopify, of installeer een Shopify plugin die automatisch foto's comprimeert bij het uploaden.

Het is veel gemakkelijker om de app-route te volgen, maar voor de meeste is een abonnement vereist, dus we begrijpen het als u binnen een budget moet blijven.

Sommige apps die goed werken voor beeldcompressie zijn:

• Verpletteren
• SEO Image Optimizer en snelheid
• Avada SEO
• Booster SEO en Image Optimizer

Test deze apps met hun gratis proefversies om te begrijpen hoe goed ze afbeeldingen comprimeren en hoe geautomatiseerd het proces voor u is. Daarna kun je een abonnement afsluiten. Voor tools van derden raden we aan TinyPNG en Image Resizer.

Stap 6: Overweeg gratis Image Finder-apps

Hoewel het ten zeerste wordt aanbevolen dat e-commercemerken hun eigen foto's maken (in plaats van gratis alternatieven te zoeken of ze van de website van een fabrikant te halen), zijn er enkele delen van een online winkel die geschikt zijn voor gebruik met gratis afbeeldingen.

Je hebt bijvoorbeeld misschien een mooie foto nodig van iemand die uitkijkt over een ravijn als aanvulling op een blogpost. Aan de andere kant wil je misschien een foto gebruiken als achtergrond voor een heldenafbeelding, zodat je de eigenlijke productafbeelding en beschrijving bovenop de achtergrond kunt plaatsen.

Voor die situaties raden we aan om enkele van deze Creative Commons-gelicentieerde afbeeldingensites te gebruiken:

• Unsplash
• Uitbarsting (Van Shopify)
• Pexels
• openvers

Het is belangrijk om erop te wijzen dat een Creative Commons-licentie niet betekent dat u de afbeelding zomaar gratis kunt gebruiken en op uw website kunt plaatsen. Af en toe is dat het geval, maar u moet elke afbeelding controleren om er zeker van te zijn welke rechten u heeft voor het gebruik ervan.

Creative Commons-licenties vertellen u bijvoorbeeld:

• Als u de afbeelding voor commerciële of niet-commerciële doeleinden mag gebruiken
• Wanneer u de maker moet noemen, of als het gewoon wordt aanbevolen om dat te doen
• Als u de afbeelding op enigerlei wijze mag wijzigen

Daarnaast zijn er tal van gratis apps voor het bewerken van afbeeldingen waarmee u het formaat, filters en bijsnijden kunt regelen zonder een cent te betalen:

Wij stellen voor:

• Canva
• Shopify Tool voor het aanpassen van afbeeldingen
• befunky

Stap 7: Voer A/B-testen uit om de beste afbeeldingen te vinden en Formats

Nadat u uw foto's relevante bestandsnamen hebt gegeven, ze hebt geformatteerd, hebt bijgesneden en het perfecte formaat en formaat hebt gekozen, is het tijd om te bekijken hoe ze er in uw winkel uitzien.

Gelukkig moet je je vingers niet kruisen en hopen dat de afbeeldingen het beste zijn voor conversies. U heeft de mogelijkheid om meerdere varianten van dezelfde afbeeldingen op productpagina's, bestemmingspagina's en homepages te uploaden en vervolgens te zien welke het beste presteren in termen van conversies.

Beiden Thema Wetenschapper en Sjogoen bieden A/B-testfuncties voor verschillende onderdelen van uw Shopify ontwerp.

Het mooie aan A/B-testen is dat het experiment nooit voorbij is. Hiermee kunt u elk aspect van uw website in de gaten houden. U kunt afbeeldingen die in de loop van de tijd aan kracht verliezen, verwisselen en meerdere tests gedurende één tijdsperiode uitvoeren.

Shopify Gids voor afbeeldingsgrootte: onze conclusie

Vasthouden aan vierkante afbeeldingen is een manier om ervoor te zorgen dat uw e-commercefotografie niet wordt bijgesneden. U zult echter merken dat deze regel niet altijd geldt als het gaat om uw Shopify thema.

Daarom raden we aan om meerdere afbeeldingsformaten te uploaden voor producten, collecties en banners om te begrijpen wat uw thema het beste aankan. Anders vinden we de standaard van 2046 × 2046 pixels prettiger. Maar voor banners, logo's en diavoorstellingen wilt u de specifiekere afmetingen gebruiken die hierboven in dit artikel worden genoemd.

Laat het ons weten in de reacties hieronder als u opheldering nodig heeft Shopify afbeelding maten!