Wanneer een potentiรซle klant op je landt Shopify van de, gebruiken ze de afbeeldingen om te beslissen of ze een aankoop willen doen. Het is daarom jouw taak als handelaar om ervoor te zorgen dat de afbeeldingen de laadsnelheid van de site niet vertragen (dus om mensen weg te duwen) en om format en de juiste afmetingen van de afbeeldingen.
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:
- Typ elke afbeelding in Shopify vereist unieke afmetingen, zoals hoe logo's een ander formaat moeten hebben dan bannerafbeeldingen.
- Gebruikers zullen eerder betalende klanten worden als ze de afbeeldingen aan de rechterkant duidelijk kunnen zien format.
- Goed formaat en geoptimaliseerde afbeeldingen kunnen uw SEO-potentieel vergroten.
- Slecht formaat fotografie kan uitgerekte of bijgesneden afbeeldingen veroorzaken, wat leidt tot een lelijke website.
- 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)
Dit zijn niet allemaal harde regels, maar het is het beste om je zoveel mogelijk aan de "ideale maat" te houden. Thema's hebben af โโen toe hun eigen beeldstandaarden, dus houd dat in de gaten. Anderwise, leggen we uit wanneer je wat speelruimte hebt qua 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:
- Zorg ervoor dat alle afbeeldingen groot genoeg zijn om de ingewikkelde details van het product te tonen.
- Houd de afbeeldingen echter klein genoeg om de prestaties van de site niet te belemmeren.
- Een goede vuistregel is om bij 2048 ร 2048 pixels te blijven square afbeeldingen.
- Vermijd alles wat kleiner is dan 800 ร 800 pixels square afbeeldingen.
- Vermijd alles groter dan 4472 ร 4472 voor square afbeeldingen.
Voor niet-square afbeeldingen, raden we zeker aan om de onderstaande handleidingen te gebruiken. Het is ook vermeldenswaard dat sommige thema's afbeeldingen anders bijsnijden, dus het kan zijn dat u moet raden en controleren welke afbeeldingsformaten 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.
We stellen een square afbeelding voor productfoto's, om ongewenst bijsnijden 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. Het kan zijn dat landschapsfoto's kleiner worden in vergelijking met portretfoto's format.
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.
De square dimensies helpen bij het vaststellen van een gestandaardiseerde format in alle collecties, vooral als ze naast elkaar worden weergegeven.
Dat vind je ook square afbeeldingen zijn gemakkelijker om mee te werken wanneer u inhoudsblokken gebruikt 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 zien sommige thema's er geweldig uit square logo's, maar houd het onder de markering van 250 x 250 pixels, zodat het niet te veel ruimte in beslag neemt.
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.
Eindelijk is het ook wise om instellingen aan te passen voor alle afbeeldingsbanners en hero-afbeeldingen. U kunt de bannerhoogte voor de meeste thema's wijzigen 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 instellingen voor de diavoorstelling beheert om de beste te krijgen formatvoor uw diavoorstelling. Mogelijk moet u het inhoudsvak naar een andere locatie verplaatsen, of misschien ziet de diavoorstelling er beter uit als u de hoogte iets vergroot.
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 een optimaal beeld formats, compressies, beeldbronnen, styling en meer. Blijf lezen om alles te weten te komen over de beste werkwijzen en stappen die u kunt nemen om afbeeldingen in te optimaliseren Shopify.
Stap 1: Kies de optimale afbeelding Format
Shopify afbeeldingsformaten zijn belangrijk, maar de eerste stap in elke foto-optimalisatie moet het kiezen van de beste afbeelding zijn format.
Er zijn tal van afbeeldingen formatis dat Shopify toelaat.
Dit is wat ze speciaal maakt:
- JPEG/JPG: misschien wel het meest voorkomende bestand format voor afbeeldingen, en terecht. JPEG's worden goed gecomprimeerd en bieden een uitstekende kwaliteit. We raden ze aan voor productpagina's, vooral als je fijne details in de foto's hebt.
- 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.
- GIF: De GIF is een afbeelding format voor animaties. Het is in wezen hetzelfde als het omzetten van een korte video in een bewegend beeld, wat handig is om een โโproduct kort uit te leggen zonder de aanmatigende omvang van een video. We vinden ze leuk op homepages, productpagina's en blogposts. Gebruik echter niet te veel GIF's, omdat ze niet de rijke kleurkwaliteit hebben die je in andere kunt vinden formatzoals JPEG, TIFF en PNG.
- WebP: misschien wel de meest veelzijdige van alle afbeeldingen formats wordt WebP steeds gebruikelijker omdat het een sterkere compressie en kwaliteit biedt dan zowel JPEG als PNG, samen met de transparantievoordelen van PNG. Om nog maar te zwijgen, je 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 formatzoals HEIC, progressieve JPEG en AVIF. HEIC is het beeld format standaard die wordt gebruikt op Apple-apparaten. Het is extreem compact, kan meerdere foto's in รฉรฉn beeld bevatten en biedt een uitstekende kwaliteit. Ze zijn echter niet compatibel met de meeste niet-Apple-apparaten, waardoor het moeilijk is om ze aan te bevelen. Het AVIF-beeld format heeft vrij sterke voordelen vanwege de hoge kwaliteit en dramatische compressiepercentages. Kortom, je prestaties met een AVIF zouden eigenlijk sterker moeten zijn dan met JPEG- en WebP-afbeeldingen. Het duurt echter even voor desktop en mobiele browsers om het als een bestand over te nemen format standaard. Dus we kunnen het nu niet aanbevelen. Pas als vrijwel iedereen met een internetverbinding de beelden daadwerkelijk online kan bekijken.
Kies de geschikte afbeelding op basis van waarvoor u de afbeelding wilt gebruiken format van boven. Ga vervolgens 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, de zoekmachines hebben er geen toegang toeformatover 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:
- Voeg een bestandsnaam toe die doet denken aan wat er in de afbeelding staat.
- Als u toevallig een generieke bestandsnaam uploadt, wijzigt u de afbeelding Titel in Shopify. Dit vervangt de standaard.
- 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:
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:
Stap 7: Voer A/B-testen uit om de beste afbeeldingen te vinden en Formats
Nadat je je foto's relevante bestandsnamen hebt gegeven, het formaat ervan hebt gewijzigd, ze hebt bijgesneden en de perfecte hebt gekozen format en maat, het is tijd om te zien hoe ze eruit zien in uw winkel.
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.
Te gebruiken zowel 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 square afbeeldingen is een manier om ervoor te zorgen dat uw e-commercefotografie niet bijgesneden blijft. Het kan echter zijn dat deze regel niet altijd waar is als het gaat om uw Shopify thema.
Daarom raden we aan om meerdere afbeeldingsformaten voor producten, collecties en banners te uploaden om te begrijpen wat je thema het beste aankan. Anderwise, we houden van de standaard van 2046 ร 2046 pixels. Maar voor banners en logo's en diavoorstellingen wilt u de meer specifieke 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!
Heb je vragen? Stel ze hier. 0 Reacties