Quando un potenziale cliente arriva sul tuo Shopify sito web, utilizzeranno le immagini per decidere se desiderano effettuare un acquisto. Il tuo compito di commerciante, quindi, è garantire che le immagini non impantanino la velocità di caricamento del sito (quindi per allontanare le persone) e di format e dimensionare correttamente le immagini.
In questo modo, le immagini non appaiono allungate o tagliate. Nel nostro massimo Shopify guida alle dimensioni delle immagini, ti mostriamo l'importanza di dimensioni specifiche delle immagini per Shopify fotografie e fornisci le dimensioni ideali per cose come il tuo logo, l'immagine del banner e le immagini dei prodotti.
Continua a leggere per saperne di più Shopify dimensioni dell'immagine!
Perché dovrebbe interessarti Shopify Dimensioni dell'immagine?
È noioso gestire e caricare le immagini. Tuttavia, sono spesso i principali trasgressori quando si tratta di velocità del sito lente, problemi SEO e basse conversioni su un sito di e-commerce.
E la parte difficile di tutti i costruttori di siti Web e piattaforme di e-commerce è che devi attenersi a dimensioni di immagine molto particolari per assicurarti che siano ottimizzate e abbiano un aspetto presentabile.
Per riassumere, ecco perché Shopify le dimensioni delle immagini contano:
- Ogni tipo di immagine in Shopify richiede dimensioni uniche, come il modo in cui i loghi dovrebbero avere dimensioni diverse rispetto alle immagini banner.
- È più probabile che gli utenti si convertano in clienti paganti quando possono vedere chiaramente le immagini a destra format.
- Immagini di dimensioni adeguate e ottimizzate possono aumentare il tuo potenziale SEO.
- La fotografia di dimensioni scadenti può causare immagini allungate o ritagliate, portando a un brutto sito web.
- Potresti scoprire che le immagini con le dimensioni sbagliate causano il rallentamento del tuo sito o impediscono ai clienti di voler aspettare del tutto.
Insieme a questi punti: immagini nitide e ben dimensionate presentano un certo livello di professionalità, offrendo reazioni emotive ai clienti che sei un'azienda di fiducia e che i tuoi prodotti sono della massima qualità. Le brutte foto sembrano semplicemente come se non fossi preoccupato per i tuoi prodotti o per il modo in cui vengono visualizzati. I tuoi clienti potrebbero chiedere: "dove altro stanno tagliando gli angoli?"
Detto questo, dai un'occhiata alla nostra guida di riferimento rapido sui migliori Shopify dimensioni delle immagini per aree come pagine di prodotti, immagini banner e loghi.
Il Migliore Shopify Dimensioni delle immagini (in base a dove vengono utilizzate le immagini)
Non tutte queste sono regole rigide, ma è meglio attenersi il più possibile alla "dimensione ideale". I temi occasionalmente hanno i propri standard di immagine, quindi tienilo d'occhio. Altrowise, spiegheremo quando hai un margine di manovra in termini di dimensioni.
Esiste una dimensione dell'immagine da utilizzare in tutto Shopify?
No, ma se prevedi di adottare questo approccio, ecco cosa ti consigliamo:
- Assicurati che tutte le immagini siano abbastanza grandi da mostrare i dettagli intricati del prodotto.
- Tuttavia, mantieni le immagini abbastanza piccole da non ostacolare le prestazioni del sito.
- Una buona regola pratica è attenersi a 2048 × 2048 pixel per square immagini.
- Evita qualcosa di più piccolo di 800 × 800 pixel per square immagini.
- Evita qualcosa di più grande di 4472 × 4472 per square immagini.
Per nonsquare immagini, consigliamo vivamente di utilizzare le guide di seguito. Vale anche la pena notare che alcuni temi ritagliano le immagini in modo diverso, quindi potresti dover indovinare e controllare per vedere quali dimensioni delle immagini funzionano meglio per il tuo negozio online.
Per la migliore guida, dai un'occhiata all'ideale Shopify dimensioni delle immagini di seguito, tutte classificate in base al tipo di immagine:
1. Shopify Dimensione dell'immagine del prodotto (dimensione ideale: 2048 × 2048 pixel)
Le immagini dei prodotti fungono da forme primarie di media utilizzate per effettuare vendite. ShopifyI temi di fanno un ottimo lavoro nel ritagliare e ottimizzare le immagini dei prodotti per te, ma non dovresti mai fare affidamento sugli strumenti automatizzati.
Lo strumento dimensioni consigliate per le immagini del prodotto su Shopify sono 2048 x 2048 pixel.
Questo è un posto meraviglioso per garantire che le tue immagini non rallentino la velocità della tua pagina, garantendo al contempo ai clienti di vedere la ricchezza di dettagli delle tue foto originali.
Proponiamo a square immagine per le foto del prodotto, per evitare ritagli indesiderati da Shopify temi.
Lo screenshot seguente mostra un'immagine caricata come 2048 × 2048 pixel e non ha comportato alcun ritaglio.
Le immagini più lunghe e più larghe possono ancora funzionare per le foto dei prodotti, ma c'è meno controllo su ciò che il tema fa alle tue immagini. Potresti scoprire che le foto di paesaggi si riducono di dimensioni rispetto al ritratto format.
2. Shopify Dimensione dell'immagine della raccolta (dimensione ideale: 2048 × 2048 pixel)
L'aggiunta di una collezione non richiede necessariamente un'immagine, ma così facendo puoi creare una pagina separata per quella collezione, quasi come una pagina di destinazione creata solo per un piccolo sottoinsieme di prodotti.
Un'immagine della raccolta viene caricata sotto il file Crea raccolta sezione in Shopify.
Successivamente, puoi aggiungere un prodotto a quella raccolta e visualizzarlo in un blocco di contenuto sulla home page o come pagina a sé stante.
Se lasci il Immagine campo vuoto su una pagina di collezione, prenderà una delle immagini del prodotto in primo piano da quella collezione come predefinita.
La raccomandata Shopify la dimensione dell'immagine per le raccolte è 2048 × 2048 pixel.
Lo strumento square le dimensioni aiutano a stabilire uno standard format in tutte le raccolte, soprattutto se visualizzate una accanto all'altra.
Troverai anche quello square le immagini sono più facili da lavorare quando si utilizzano blocchi di contenuti che mostrano raccolte.
Come sempre, i risultati possono variare in base al tema utilizzato. Alcuni temi, infatti, offrono ulteriori funzionalità con le immagini della tua raccolta, permettendoti di condividere l'immagine come un banner su una pagina di raccolta separata. In questo caso, la dimensione ottimale dell'immagine della tua raccolta potrebbe essere completamente diversa da quella di cui abbiamo parlato qui. Nel complesso, il tuo miglior piano d'azione è testare il tuo tema. Carica diverse immagini di dimensioni uniche nelle tue raccolte. Annota quelli che funzionano, quindi usa sempre quelle dimensioni. Assicurati solo che le immagini non siano troppo grandi o troppo piccole e starai bene.
3. Shopify Dimensione immagine logo (dimensione ideale: 450 W × 250 H pixel)
Il logo si distingue come tendone del tuo negozio di e-commerce. Viene mostrato proprio quando qualcuno arriva sulla tua home page e in tutto il sito Web, considerando che di solito è visibile nell'area dell'intestazione.
Shopify gli utenti che hanno problemi con le dimensioni del logo potrebbero scoprire che il logo non è abbastanza grande o che deforma in qualche modo il menu di navigazione. Oppure potresti scoprire che il logo lascia molto spazio bianco sotto o sopra.
Per risolvere la maggior parte di questi problemi, suggeriamo di utilizzare dimensioni del logo di 250 pixel di altezza per 450 pixel di larghezza.
Infatti, Shopify raccomanda di non superare mai queste dimensioni per larghezza e altezza. Detto questo, puoi diventare più piccolo, purché il tuo tema lo consenta.
Ogni tanto, la barra laterale getta via le cose, o forse il tuo menu di navigazione ha troppi elementi che spingono il logo in una strana direzione. Indipendentemente da ciò, è meglio giocare con le dimensioni del logo e le impostazioni del sito per ottenere l'aspetto migliore.
In alternativa, alcuni temi hanno un bell'aspetto square loghi, ma tienilo sotto il limite di 250 x 250 pixel, in modo che non occupi troppo spazio.
Per la massima versatilità, vai a Impostazioni > Marchio in Shopify per aggiungere a Predefinito ed Square Immagine. In questo modo, puoi caricare entrambi a seconda della situazione.
4. Shopify Dimensione immagine banner (dimensione ideale: 2000 W × 600 H pixel)
Chiamate regolarmente immagine Hero o banner immagine, queste sono le immagini più grandi che potresti posizionare nella parte superiore di una home page per mostrare nuovi prodotti e includere testo con un pulsante. È essenziale che le immagini dei banner siano ad alta risoluzione per evitare granulosità dopo il ridimensionamento e quando vengono visualizzate su dispositivi diversi.
Shopify ha anche un testata sezione contenuto, che funziona in modo simile al Immagine banner sezione dei contenuti.
Indipendentemente da quale scegli, ti consigliamo di attenersi alle dimensioni di 1200 pixel di larghezza x 600 pixel di altezza per i banner e le immagini hero.
Detto questo, spesso puoi farla franca ovunque da 1200-2000 pixel per la tua larghezza e 400-600 pixel per l'altezza. E come sempre, dipende dal tuo tema.
Infine, è anche wise per regolare le impostazioni per tutti i banner immagine e le immagini hero. Puoi modificare l'altezza del banner per la maggior parte dei temi e dire Shopify dove desideri posizionare il contenuto del banner, ad esempio nell'angolo in basso a destra o in alto, per ottenere una visione migliore dell'immagine dietro il contenuto.
5. Shopify Dimensione dell'immagine della presentazione (dimensione ideale: 2000 W × 600 H pixel)
Proprio come un banner, devi utilizzare immagini ad alta risoluzione nelle presentazioni. Queste sezioni di contenuto consentono di visualizzare più fotografie in un'area di una pagina. Quindi passano all'immagine successiva in successione.
Dal momento che sono così simili ai banner, in realtà manterrai la stessa larghezza e altezza che avresti per un'immagine hero o banner. La raccomandazione è una larghezza di 2000 pixel e un'altezza di 600 pixel. Tuttavia, l'altezza può variare da 400 a 600 pixel e la larghezza da 1200 a 2000 pixel.
Assicurati di gestire tutte le impostazioni della presentazione per stabilire il meglio formatting per la tua presentazione. Potrebbe essere necessario spostare la casella del contenuto in una posizione diversa, o forse la presentazione avrebbe un aspetto migliore se si estendesse un po' l'altezza.
Una delle regole principali di una presentazione è caricare sempre immagini della stessa dimensione per la stessa presentazione. Sei più che benvenuto per regolare le dimensioni durante la creazione di una presentazione separata, ma assicurati solo che le immagini combinate insieme in una presentazione abbiano tutte le stesse dimensioni, per la continuità e l'esperienza dell'utente.
Come ottimizzare Shopify Immagini
L'ottimizzazione delle tue immagini ti aiuta a migliorare il modo in cui le foto vengono caricate sul tuo negozio di e-commerce. Ti aiuta anche a creare un'esperienza più user-friendly sul sito web, visto che le immagini dovrebbero integrare l'esperienza di acquisto, non sopraffarla.
Ci sono diversi aspetti da considerare quando ottimizzi le tue immagini per Shopify. Queste aree includono un'immagine ottimale formats, compressioni, fonti di immagini, stili e altro ancora. Continua a leggere per scoprire tutto sulle migliori pratiche e sui passaggi da seguire per ottimizzare le immagini Shopify.
Passaggio 1: scegli l'immagine ottimale Format
Shopify le dimensioni delle immagini sono importanti, ma il primo passo in qualsiasi ottimizzazione delle foto dovrebbe comportare la scelta dell'immagine migliore format.
Ci sono numerose immagini formats che Shopify permette.
Ecco cosa li rende speciali:
- JPEG/JPG: forse il file più comune format per le immagini, e giustamente. I JPEG si comprimono bene e forniscono una qualità eccellente. Li consigliamo per le pagine dei prodotti, soprattutto quando si hanno dettagli precisi nelle foto.
- PNG: questo tipo di file è in realtà migliore dei JPEG nel mantenere la qualità dopo aver ridotto le dimensioni dell'immagine. Tuttavia, potresti scoprire che i PNG non si comprimono tanto. Sono i migliori quando hai bisogno di uno sfondo trasparente (non supportato da JPEG), quindi ci piacciono per i loghi e alcune immagini banner.
- GIF: la GIF è un'immagine format per le animazioni. È essenzialmente come trasformare un breve video in un'immagine in movimento, che è utile per spiegare brevemente un prodotto senza le dimensioni prepotenti di un video. Ci piacciono sulle home page, sulle pagine dei prodotti e sui post del blog. Non abusare delle GIF, tuttavia, poiché mancano della ricca qualità del colore che si trova in altre formatÈ come JPEG, TIFF e PNG.
- WebP: Forse la più versatile di tutte le immagini formats, WebP sta diventando sempre più comune poiché offre una compressione e una qualità più elevate rispetto a JPEG e PNG, insieme ai vantaggi di trasparenza di PNG. Per non parlare del fatto che puoi anche creare animazioni con WebP. Prendi in considerazione l'utilizzo di WebP per tutti i tipi di immagini in Shopify. Ci aspettiamo di vedere WebP utilizzato più frequentemente su Internet in futuro.
Oltre a quello, Shopify supporta formatÈ come HEIC, JPEG progressivo e AVIF. HEIC è l'immagine format standard utilizzato sui dispositivi Apple. È estremamente compatto, può contenere più immagini in un'unica immagine e offre una qualità eccellente. Tuttavia, sono incompatibili con la maggior parte dei dispositivi non Apple, rendendolo difficile da consigliare. L'immagine AVIF format ha vantaggi piuttosto forti grazie alla sua alta qualità e ai suoi notevoli tassi di compressione. In breve, le tue prestazioni con un AVIF dovrebbero effettivamente essere migliori rispetto alle immagini JPEG e WebP. Tuttavia, ci vuole un po' di tempo per desktop e browser mobili per adottarlo come file format standard. Quindi, non possiamo raccomandarlo in questo momento. Non fino a quando quasi tutti con una connessione Internet possono effettivamente visualizzare le immagini online.
In base a ciò per cui intendi utilizzare l'immagine, scegli quella adatta format da sopra. Quindi, vai al passaggio successivo in modo che i tuoi stili di immagine rimangano gli stessi su tutto il tuo sito web.
Passaggio 2: scatta per lo stesso stile su tutte le fotografie
La continuità è la chiave per la fotografia nell'e-commerce. Stabilisce l'aspetto generale del tuo marchio e crea un'atmosfera standardizzata in tutto il tuo sito web.
Ad esempio, è comune per i marchi utilizzare un colore di sfondo per tutte le immagini dei prodotti.
Questo vale anche per le dimensioni e lo stile delle immagini. Se la maggior parte delle immagini dei tuoi prodotti sono in orientamento orizzontale, evita di mescolare alcune foto con orientamento orizzontale. Sei più che benvenuto a incorporare sia lo stile di vita che le foto dei prodotti nel mix, ma è meglio attenersi a uno stile per la maggior parte dei tuoi scatti.
Passaggio 3: creare un mix di fotografia di prodotto e lifestyle
Come accennato, molto probabilmente vorrai utilizzare un tipo di stile fotografico per la maggior parte delle foto dei tuoi prodotti. Tuttavia, è essenziale includere alcune foto di stile di vita per completare le foto standard dei prodotti con sfondi monocromatici e una diversa visualizzazione dei prodotti.
Le aziende di e-commerce hanno uno svantaggio in cui i clienti non possono provare o toccare i prodotti proprio lì. È qui che entrano in gioco le foto lifestyle. Gli utenti possono vedere come appaiono i prodotti in azione. Come una maglietta drappeggia sul corpo o le dimensioni di uno skateboard con qualcuno che ci sta sopra.
Passaggio 4: scegli nomi di file e titoli adatti
Ogni file immagine ha un nome e Shopify prende quel nome file e lo pubblica nei metadati del tuo sito web (ogni piattaforma di e-commerce lo fa).
Quindi, se salvi le foto come nuova-foto(1).jpg sul tuo computer e caricali nel tuo negozio, i motori di ricerca non avranno accessoformatione sul contenuto della foto. Questo potrebbe danneggiare il tuo SEO.
Quando ottimizzi le immagini, segui questi passaggi per assicurarti che i motori di ricerca (e quelli con disabilità visive) possano capire cosa sta succedendo nell'immagine:
- Aggiungi un nome file che ricordi il contenuto dell'immagine.
- Se ti capita di caricare un nome di file generico, cambia l'immagine Titolo in Shopify. Questo sostituisce il valore predefinito.
- Usa i tag alt per una rappresentazione ancora più forte di ciò che viene mostrato nell'immagine. Questi sono gli elementi principali che i motori di ricerca guardano, poiché mostra che la tua esperienza utente è migliorata per i non vedenti.
Passaggio 5: comprimi le immagini prima o durante il caricamento
Shopify offre la compressione automatica per tutte le immagini caricate sui suoi server, ma non dovresti affidarti interamente a questo.
La soluzione migliore è utilizzare uno strumento di terze parti per comprimere le immagini prima di caricarle Shopifyo installare un Shopify plugin che comprime automaticamente le foto al momento del caricamento.
È molto più facile seguire il percorso dell'app, ma la maggior parte di esse richiede un abbonamento, quindi capiamo se devi rimanere con un budget limitato.
Alcune app che funzionano bene per la compressione delle immagini includono:
Prova queste app con le loro prove gratuite per capire quanto bene comprimono le immagini e quanto è automatizzato il processo per te. Successivamente, puoi impegnarti in un abbonamento. Per gli strumenti di terze parti, consigliamo TinyPNG ed Image Resizer.
Passaggio 6: considera le app gratuite per la ricerca di immagini
Sebbene sia altamente raccomandato che i marchi di e-commerce scattino le proprie foto (invece di trovare alternative gratuite o di prenderle dal sito Web di un produttore), ci sono alcune aree di un negozio online adatte all'uso con immagini gratuite.
Ad esempio, potresti aver bisogno di una ripresa panoramica di qualcuno che osserva un canyon per completare un post sul blog. D'altra parte, potresti voler utilizzare una foto come sfondo per un'immagine principale, consentendoti di rilasciare l'immagine e la descrizione del prodotto effettivo sopra lo sfondo.
Per queste situazioni, suggeriamo di utilizzare alcuni di questi siti di immagini con licenza Creative Commons:
- Unsplash
- scoppiare (Da Shopify)
- Pexels
- Verso aperto
È importante sottolineare che una licenza Creative Commons non significa che puoi semplicemente prendere l'immagine gratuitamente e metterla sul tuo sito web. Occasionalmente è così, ma devi controllare ogni immagine per assicurarti di quali diritti hai per il suo utilizzo.
Ad esempio, la licenza Creative Commons ti dice:
- Se è possibile utilizzare l'immagine per scopi commerciali o non commerciali
- Quando devi accreditare il creatore, o se ti è semplicemente consigliato di farlo
- Se sei autorizzato a modificare l'immagine in qualsiasi modo
Inoltre, ci sono molte app gratuite di modifica delle immagini per assumere il controllo del ridimensionamento, dei filtri e del ritaglio senza pagare un centesimo:
Consigliamo:
Passaggio 7: eseguire test A/B per individuare le immagini migliori e Formats
Dopo aver dato alle tue foto nomi di file pertinenti, ridimensionandoli, ritagliandoli e decidendo il perfetto format e dimensioni, è ora di vedere come appaiono nel tuo negozio.
Fortunatamente, non devi incrociare le dita e sperare che le immagini siano le migliori per le conversioni. Hai la possibilità di caricare più varianti delle stesse immagini su pagine di prodotto, pagine di destinazione e home page, quindi vedere quali di esse ottengono i risultati migliori in termini di conversioni.
Entrambi Scienziato del tema ed Shogun offrire funzionalità di test A/B per diverse parti del tuo Shopify progettazione.
La cosa fantastica del test A/B è che l'esperimento non finisce mai. Ti permette di tenere d'occhio ogni aspetto del tuo sito web. Puoi sostituire le immagini che perdono slancio nel tempo ed eseguire più test in un periodo di tempo.
Shopify Guida alle dimensioni dell'immagine: la nostra conclusione
Rimanendo con square images è un modo per garantire che la tua fotografia e-commerce non venga tagliata. Tuttavia, potresti scoprire che questa regola non è sempre vera quando si tratta del tuo Shopify tema.
Pertanto, ti consigliamo di caricare più dimensioni di immagine per prodotti, collezioni e banner per capire cosa può gestire meglio il tuo tema. Altrowise, ci piace lo standard 2046 × 2046 pixel. Ma per banner, loghi e presentazioni, ti consigliamo di utilizzare le dimensioni più specifiche sopra menzionate in questo articolo.
Fateci sapere nei commenti qui sotto se avete bisogno di chiarimenti in merito Shopify dimensioni dell'immagine!
Commenti Risposte 0