Når en potensiell kunde lander på din Shopify nettsted, bruker de bildene til å bestemme om de vil kjøpe noe. Din jobb som kjøpmann er derfor å sikre at bildene ikke legger ned lastehastigheten på nettstedet (for å skyve folk unna) og format og størrelse bildene riktig.
På denne måten virker ikke bildene strukket ut eller avskåret. I vårt ultimate Shopify bildestørrelsesguide viser vi deg viktigheten av spesifikke bildestørrelser for Shopify fotografering, og gi de ideelle størrelsene for ting som logoen din, bannerbilde og produktbilder.
Fortsett å lese for å lære alt om Shopify bildestørrelser!
Hvorfor bør du bry deg om Shopify Bildestørrelser?
Det er kjedelig å administrere og laste opp bilder. Likevel er de ofte de viktigste lovbryterne når det kommer til lave nettstedshastigheter, SEO-problemer og lave konverteringer på et e-handelsnettsted.
Og den vanskelige delen med alle nettstedbyggere og e-handelsplattformer er at du må holde deg til veldig spesielle bildestørrelser for å sikre at de er optimalisert og ser presentable ut.
For å oppsummere det, her er hvorfor Shopify bildestørrelser betyr noe:
- Skriv inn hvert bilde Shopify krever unike dimensjoner, som hvordan logoer skal ha en annen størrelse enn bannerbilder.
- Det er mer sannsynlig at brukere konverterer til betalende kunder når de tydelig kan se bildene til høyre format.
- Riktig størrelse og optimaliserte bilder kan øke SEO-potensialet ditt.
- Fotografering i dårlig størrelse kan føre til utstrakte eller beskårne bilder, noe som fører til et stygt nettsted.
- Du kan finne ut at bilder med feil størrelse får nettstedet ditt til å tregere, eller hindrer kunder i å vente helt.
Sammen med disse punktene: skarpe bilder i god størrelse presenterer et visst nivå av profesjonalitet, og gir emosjonelle reaksjoner til kundene om at du er en pålitelig bedrift, og at produktene dine er av høyeste kvalitet. Dårlige bilder ser rett og slett ut som om du ikke er bekymret for produktene dine, eller måten de vises på. Kundene dine kan spørre: "hvor ellers er de på vei?"
Med det sagt, ta en titt på vår hurtigreferanseguide om det beste Shopify bildestørrelser for områder som produktsider, bannerbilder og logoer.
The Best Shopify Bildestørrelser (Basert på hvor bildene brukes)
Ikke alle disse er harde regler, men det er best å holde seg til den "ideelle størrelsen" så mye som mulig. Temaer har av og til sine egne bildestandarder, så hold øye med det. Annenwise, vil vi forklare når du har litt spillerom når det gjelder dimensjonene.
Finnes det en Go-to-bildestørrelse å bruke på tvers Shopify?
Nei, men hvis du planlegger å ta den tilnærmingen, anbefaler vi følgende:
- Sørg for at alle bildene er store nok til å vise de intrikate detaljene til produktet.
- Likevel, hold bildene små nok til å ikke hindre nettstedets ytelse.
- En god tommelfingerregel er å holde seg til 2048 × 2048 piksler for square bilder.
- Unngå noe mindre enn 800 × 800 piksler for square bilder.
- Unngå noe større enn 4472 × 4472 for square bilder.
For ikke-square bilder, anbefaler vi definitivt å bruke veiledningene nedenfor. Det er også verdt å merke seg at noen temaer beskjærer bilder annerledes, så du må kanskje gjette og sjekke for å se hvilke bildestørrelser som fungerer best for nettbutikken din.
For den beste veiledningen, ta en titt på idealet Shopify bildestørrelser nedenfor, alle kategorisert basert på bildetype:
1. Shopify Produktbildestørrelse (ideell størrelse: 2048 × 2048 piksler)
Produktbilder fungerer som de primære medieformene som brukes til å selge. Shopify's temaer gjør en ganske god jobb med å beskjære og optimalisere produktbilder for deg, men du bør aldri stole på de automatiserte verktøyene.
De anbefalte dimensjoner for produktbilder på Shopify er 2048 x 2048 piksler.
Dette er et fantastisk sted for å sikre at bildene dine ikke senker sidehastighetene dine, samtidig som du sikrer at kundene ser detaljrikdommen fra originalbildene dine.
Vi foreslår a square bilde for produktbilder, for å unngå uønsket beskjæring fra Shopify temaer.
Skjermbildet nedenfor viser et bilde lastet opp som 2048 × 2048 piksler, og det resulterte i ingen beskjæring.
Lengre og bredere bilder kan fortsatt fungere for produktbilder, men det er mindre kontroll over hva temaet gjør med bildene dine. Du kan oppleve at landskapsbilder blir redusert i størrelse sammenlignet med portretten format.
2. Shopify Samlingsbildestørrelse (ideell størrelse: 2048 × 2048 piksler)
Å legge til en samling krever ikke nødvendigvis et bilde, men å gjøre det lar deg lage en egen side for den samlingen, nesten som en landingsside laget bare for et lite undersett av produkter.
Et samlingsbilde lastes opp under Opprett samling delen i Shopify.
Deretter kan du legge til et produkt i den samlingen og vise det i en innholdsblokk på hjemmesiden eller som en egen side.
Hvis du forlater Bilde feltet tomt på en samlingsside, vil det ta et av de fremhevede produktbildene fra den samlingen som standard.
Den anbefalte Shopify bildestørrelse for samlinger er 2048 × 2048 piksler.
De square dimensjoner bidra til å etablere en standardisert format på tvers av alle samlinger, spesielt når de vises ved siden av hverandre.
Du vil også finne det square bilder er lettere å jobbe med når du bruker innholdsblokker som viser samlinger.
Som alltid kan resultatene dine variere basert på temaet som brukes. Noen temaer tilbyr faktisk ytterligere muligheter med samlingsbildene dine, slik at du kan dele bildet som et banner på en egen samlingsside. I dette tilfellet kan den optimale størrelsen på samlingsbildet ditt være helt forskjellig fra det vi har snakket om her. Totalt sett er den beste handlingsplanen din å gå gjennom testing med temaet ditt. Last opp flere bilder av unike størrelser til samlingene dine. Skriv ned de som fungerer, og bruk deretter alltid disse dimensjonene. Bare pass på at bildene ikke er for store eller for små, så går det bra.
3. Shopify Logobildestørrelse (ideell størrelse: 450W × 250H piksler)
Logoen skiller seg ut som rammen til e-handelsbutikken din. Det vises rett når noen lander på hjemmesiden din, og gjennom hele nettstedet, med tanke på at det vanligvis er synlig innenfor overskriftsområdet.
Shopify brukere som har problemer med logostørrelser, kan oppleve at logoen ikke er stor nok, eller det gjør navigasjonsmenyen deformert på en eller annen måte. Eller du kan finne ut at logoen etterlater mye hvit plass under eller over.
For å fikse de fleste av disse problemene, foreslår vi at du bruker logodimensjoner på 250 piksler i høyden og 450 piksler i bredden.
Faktisk, Shopify anbefaler aldri å gå høyere enn disse dimensjonene for bredde og høyde. Når det er sagt, kan du gå mindre, så lenge temaet ditt tillater det.
Hver så ofte kaster sidefeltet ting av seg, eller kanskje navigasjonsmenyen din har for mange elementer som skyver logoen i en merkelig retning. Uansett er det best å leke med logoens dimensjoner og nettstedinnstillinger for å oppnå det beste utseendet.
Som et alternativ ser noen temaer bra ut med square logoer, men hold den under merket på 250 x 250 piksler, slik at den ikke tar for mye plass.
For mest mulig allsidighet, gå til Innstillinger > Merke in Shopify å legge til en Misligholde og Square bilde. På denne måten kan du laste opp enten avhengig av situasjonen.
4. Shopify Bannerbildestørrelse (ideell størrelse: 2000 W × 600H piksler)
Vanligvis kalt et heltebilde eller bildebanner, dette er de større bildene du kan plassere øverst på en hjemmeside for å vise frem nye produkter og inkludere tekst med en knapp. Det er viktig at bannerbilder har høy oppløsning for å forhindre kornethet etter endring av størrelse, og når de vises på forskjellige enheter.
Shopify har også en Header innholdsdelen, som fungerer på samme måte som Banner Image innholdsdelen.
Uansett hvilken du velger, anbefaler vi å holde deg til dimensjonene 1200 piksler i bredden x 600 piksler i høyden for bannere og heltebilder.
Når det er sagt, kan du ofte slippe unna med alt fra 1200–2000 piksler for bredden din og 400–600 piksler for høyden. Og som alltid avhenger det av temaet ditt.
Endelig er det også wise for å justere innstillinger for alle bildebannere og heltebilder. Du kan endre bannerhøyden for de fleste temaer, og fortelle Shopify hvor du vil at bannerinnholdet skal sitte, som i nederste høyre hjørne eller øverst – for å få en bedre oversikt over bildet bak innholdet.
5. Shopify Størrelse på lysbildefremvisning (ideell størrelse: 2000W × 600H piksler)
På samme måte som et banner, må du bruke høyoppløselige bilder i lysbildefremvisninger. Disse innholdsdelene lar deg vise flere bilder i ett område på en side. De glir deretter til neste bilde i rekkefølge.
Siden de er så like bannere, vil du faktisk beholde samme bredde og høyde som du ville gjort for en helt eller et bannerbilde. Anbefalingen er en bredde på 2000 piksler og en høyde på 600 piksler. Høyden kan imidlertid variere fra 400–600 piksler, og bredden kan gå fra 1200–2000 piksler.
Sørg for å administrere alle lysbildefremvisningsinnstillinger for å etablere det beste formatting for lysbildefremvisningen. Du må kanskje flytte innholdsboksen til et annet sted, eller kanskje ville lysbildefremvisningen se bedre ut hvis du utvidet høyden litt.
En av hovedreglene for en lysbildefremvisning er å alltid laste opp bilder av samme størrelse for samme lysbildefremvisning. Du er mer enn velkommen til å justere dimensjoner når du lager en egen lysbildefremvisning, men sørg bare for at bildene kombinert i en lysbildefremvisning alle har samme dimensjoner, for kontinuitet og brukeropplevelse.
Hvordan optimalisere Shopify Bilder
Optimaliseringen av bildene dine hjelper deg med å forbedre hvordan bildene lastes inn i nettbutikken din. Det hjelper deg også med å skape en mer brukervennlig opplevelse på nettstedet, ettersom bildene skal utfylle handleopplevelsen, ikke overdøve den.
Det er flere aspekter å vurdere når du optimaliserer bildene dine for Shopify. Disse områdene inkluderer optimalt bilde formats, kompresjoner, bildekilder, styling og mer. Fortsett å lese for å lære alt om de beste fremgangsmåtene og trinnene du må ta for å optimalisere bilder Shopify.
Trinn 1: Velg det optimale bildet Format
Shopify bildestørrelser er viktige, men det første trinnet i enhver fotooptimalisering bør innebære å velge det beste bildet format.
Det er mange bilder formatdet er det Shopify tillater.
Her er det som gjør dem spesielle:
- JPEG/JPG: Kanskje den vanligste filen format for bilder, og med rette. JPEG-er komprimerer godt og gir utmerket kvalitet. Vi anbefaler dem for produktsider, spesielt når du har fine detaljer i bildene.
- PNG: Denne filtypen er faktisk bedre enn JPEG-er til å opprettholde kvalitet etter å ha redusert bildestørrelsen. Du kan imidlertid oppleve at PNG-er ikke komprimerer så mye. De er best når du trenger en gjennomsiktig bakgrunn (støttes ikke av JPEG), så vi liker dem for logoer og noen bannerbilder.
- GIF: GIF er et bilde format for animasjoner. Det er i hovedsak som å gjøre en kort video om til et bevegelig bilde, noe som er nyttig for å kort forklare et produkt uten den overbærende størrelsen til en video. Vi liker dem på hjemmesider, produktsider og blogginnlegg. Ikke overbruk GIF-er, siden de mangler den rike fargekvaliteten som finnes i andre formats som JPEG, TIFF og PNG.
- WebP: Kanskje det mest allsidige av alle bilder formats, WebP blir mer og mer vanlig siden det tilbyr sterkere komprimering og kvalitet enn både JPEG og PNG, sammen med åpenhetsfordelene med PNG. For ikke å nevne, du kan lage animasjoner med WebP også. Vurder å bruke WebP for alle typer bilder i Shopify. Vi forventer å se WebP brukes oftere over internett i fremtiden.
Annet enn det, Shopify støtter formats som HEIC, progressiv JPEG og AVIF. HEIC er bildet format standard brukt på tvers av Apple-enheter. Den er ekstremt kompakt, kan inneholde flere bilder i ett bilde, og gir utmerket kvalitet. Imidlertid er de inkompatible med de fleste ikke-Apple-enheter, noe som gjør det vanskelig å anbefale. AVIF-bildet format har ganske sterke fordeler på grunn av sin høye kvalitet og dramatiske kompresjonshastigheter. Kort sagt, ytelsen din med en AVIF bør faktisk være sterkere enn med JPEG- og WebP-bilder. Det tar imidlertid litt tid desktop og mobile nettlesere for å bruke den som en fil format standard. Så vi kan ikke anbefale det akkurat nå. Ikke før omtrent alle med internettforbindelse faktisk kan se bildene på nettet.
Basert på hva du planlegger å bruke bildet til, velg det passende format ovenfra. Gå deretter til neste trinn slik at bildestilene dine forblir de samme på nettstedet ditt.
Trinn 2: Ta bilder med samme stil på alle fotografier
Kontinuitet er nøkkelen for fotografier i e-handel. Det etablerer det generelle utseendet til merkevaren din og skaper en standardisert følelse på tvers av hele nettstedet ditt.
For eksempel er det vanlig at merker bruker én bakgrunnsfarge for alle produktbilder.
Dette gjelder også dimensjonene og stilen til bildene. Hvis de fleste av produktbildene dine er i liggende retning, avstå fra å blande inn noen få bilder med liggende orientering. Du er mer enn velkommen til å inkludere både livsstils- og produktbilder i miksen, men det er best å holde seg til én stil for de fleste fotograferingene dine.
Trinn 3: Lag en blanding av både produkt- og livsstilsfotografering
Som nevnt vil du mest sannsynlig bruke én type fotografistil for de fleste produktbildene dine. Det er imidlertid viktig å inkludere noen livsstilsbilder for å utfylle standard produktbildene med ensfarget bakgrunn og en annen visning av produktene.
Netthandelsbedrifter har en ulempe der kundene ikke kan prøve eller berøre produktene akkurat der. Det er her livsstilsbilder spiller inn. Brukere kan se hvordan produktene ser ut i aksjon. Hvordan en skjorte draperer over kroppen, eller på størrelse med et skateboard med noen som faktisk står på den.
Trinn 4: Velg passende filnavn og titler
Hver bildefil har et navn, og Shopify tar det filnavnet og publiserer det i metadataene til nettstedet ditt (hver e-handelsplattform gjør dette).
Så hvis du lagrer bilder som nytt-bilde(1).jpg på datamaskinen din, og last dem opp til butikken din, vil søkemotorene ikke ha noen innformation om innholdet i bildet. Dette kan skade SEO-en din.
Når du optimerer bilder, gå gjennom disse trinnene for å sikre at søkemotorene (og de med synshemming) kan forstå hva som skjer i bildet:
- Legg til et filnavn som minner om det som er inne i bildet.
- Hvis du tilfeldigvis laster opp et generisk filnavn, endre bildet Tittel in Shopify. Dette erstatter standarden.
- Bruk alt-tagger for en enda sterkere representasjon av det som vises på bildet. Dette er hovedelementene søkemotorene ser på, siden det viser at brukeropplevelsen din er forbedret for synshemmede.
Trinn 5: Komprimer bilder før eller under opplastingen
Shopify tilbyr automatisk komprimering for alle bilder som lastes opp til sine servere, men du bør ikke stole helt på det.
Det beste alternativet er å enten bruke et tredjepartsverktøy for å komprimere bilder før du laster opp dem Shopify, eller installer en Shopify plugin som automatisk komprimerer bilder ved opplasting.
Det er mye lettere å gå appveien, men de fleste av dem krever et abonnement, så vi forstår hvis du trenger å holde deg på et budsjett.
Noen apper som fungerer bra for bildekomprimering inkluderer:
Test ut disse appene med deres gratis prøveversjoner for å forstå hvor godt de komprimerer bilder, og hvor automatisert prosessen er for deg. Etter det kan du binde deg til et abonnement. For tredjepartsverktøy anbefaler vi TinyPNG og image Resizer.
Trinn 6: Vurder gratis Image Finder-apper
Selv om det er sterkt anbefalt at e-handelsmerker tar sine egne bilder (i stedet for å finne gratis alternativer, eller ta dem fra en produsents nettside), er det noen områder i en nettbutikk som er egnet for bruk med gratis bilder.
For eksempel kan det hende du trenger et naturskjønn bilde av noen som ser over en canyon for å komplettere et blogginnlegg. På den annen side vil du kanskje bruke et bilde som bakgrunn til et heltebilde, slik at du kan slippe selve produktbildet og beskrivelsen på toppen av bakgrunnen.
For slike situasjoner foreslår vi at du bruker noen av disse Creative Commons-lisensierte bildenettstedene:
Det er viktig å påpeke at en Creative Commons-lisens ikke betyr at du bare kan ta bildet gratis og legge det på nettstedet ditt. Noen ganger er det tilfellet, men du må sjekke hvert bilde for å sikre hvilke rettigheter du har for bruken.
For eksempel forteller Creative Commons-lisensiering deg:
- Hvis du kan bruke bildet til kommersielle eller ikke-kommersielle formål
- Når du må kreditere skaperen, eller hvis det rett og slett anbefales at du gjør det
- Hvis du har lov til å endre bildet på noen måte
I tillegg er det mange gratis bilderedigeringsapper for å ta kontroll over størrelsesjustering, filtre og beskjæring uten å betale en krone:
Vi foreslår:
Trinn 7: Kjør A/B-testing for å finne ut de beste bildene og Formats
Etter å ha gitt bildene dine relevante filnavn, endre størrelse på dem, beskjære dem og bestemme det perfekte format og størrelse, er det på tide å se hvordan de ser ut i butikken din.
Heldigvis må du ikke krysse fingrene og håpe at bildene er de beste for konverteringer. Du har muligheten til å laste opp flere varianter av de samme bildene på produktsider, landingssider og hjemmesider, og deretter se hvilke av dem som gir best resultater når det gjelder konverteringer.
Begge Temaforsker og Shogun tilbyr A/B-testfunksjoner for flere deler av din Shopify design.
Det som er bra med A/B-testing er at eksperimentet aldri er over. Det lar deg holde et øye med alle aspekter av nettstedet ditt. Du kan bytte ut bilder som mister fart over tid, og kjøre flere tester i løpet av en tidsperiode.
Shopify Bildestørrelsesguide: Vår konklusjon
Holder med square bilder er en måte å sikre at e-handelsfotograferingen din forblir ubeskjært. Du kan imidlertid oppleve at denne regelen ikke alltid er sann når det gjelder din Shopify tema.
Derfor anbefaler vi å laste opp flere bildestørrelser for produkter, samlinger og bannere for å forstå hva temaet ditt kan håndtere best. Annenwise, vi liker standarden på 2046 × 2046 piksler. Men for bannere og logoer og lysbildefremvisninger, bør du bruke de mer spesifikke dimensjonene nevnt ovenfor i denne artikkelen.
Gi oss beskjed i kommentarene nedenfor hvis du trenger noen avklaring om Shopify bildestørrelser!
Kommentar 0 Responses