Dimensioni immagini Shopify e limiti di peso

Usa 2048 per 2048 pixel come master per Shopify e mantieni ogni file caricato sotto i 500 KB. Shopify consente immagini fino a 20 MB e 4472 pixel quadrati, ma questi numeri descrivono ciò che la piattaforma tollera, non ciò di cui ha bisogno una vetrina online veloce.

La cifra di 20 MB è il numero citato dalla maggior parte delle guide, ed è quello sbagliato su cui progettare. Ciò che Shopify consente e ciò che Shopify premia sono cose diverse. Una pagina prodotto che contiene 8 immagini da 3 MB ciascuna è una pagina da 24 MB, e gli acquirenti da dispositivi mobili se ne vanno prima che abbia finito di caricarsi.

Dimensioni delle immagini Shopify per posizionamento

Le immagini dei prodotti dovrebbero essere quadrate a 2048 pixel, mentre banner, riquadri delle collezioni e loghi necessitano ciascuno di dimensioni proprie. L'uso di un'unica dimensione ovunque produce banner allungati e immagini delle collezioni ritagliate male.

I temi ritagliano le immagini in modo diverso, e un banner che appare corretto nell'anteprima desktop viene spesso tagliato a metà su un telefono. Mantieni la parte importante di un banner nel 60 percento centrale, in modo che nessun tema possa ritagliarla via.

Perché 500 KB è il numero che conta

Il peso della pagina decide la velocità di caricamento di un negozio, e le immagini rappresentano la maggior parte di quel peso su una tipica pagina prodotto. Una pagina inferiore a 2 MB in totale si carica agevolmente su rete mobile, mentre una pagina da 24 MB no.

Gli acquirenti da smartphone costituiscono la maggior parte del traffico per la maggior parte dei negozi, e le connessioni mobili variano molto più della banda larga dell'ufficio. Ogni secondo di caricamento costa conversioni, il che rende il peso delle immagini una questione di fatturato piuttosto che tecnica. Ridurre 8 immagini di prodotto da 3 MB a 300 KB rimuove 21 MB dalla pagina e non cambia nulla di visibile per l'acquirente.

Shopify comprime le immagini per te

Shopify distribuisce varianti ridimensionate tramite la sua rete di distribuzione dei contenuti (CDN) e le converte automaticamente in WebP per i browser supportati. La piattaforma svolge un lavoro discreto e parte da qualsiasi file tu decida di caricare.

Quest'ultimo punto rappresenta il limite. Shopify genera varianti più piccole a partire dal tuo originale, quindi un caricamento da 5 MB compresso male produce varianti più grandi rispetto a quanto farebbe un caricamento da 400 KB ben preparato. Comprimere prima del caricamento riduce anche lo spazio di archiviazione utilizzato e rende le importazioni collettive molto più veloci, poiché un'importazione di 500 prodotti sposta 200 MB anziché 2,5 GB.

Come preparare le immagini per Shopify

Per produrre una pagina prodotto veloce, segui questi 6 passaggi.

1. Esporta un master quadrato a 2048 per 2048 pixel dal tuo editor fotografico.
2. Ridimensiona qualsiasi banner o immagine lifestyle alla sua larghezza di visualizzazione effettiva, raddoppiata per gli schermi ad alta densità.
3. Converti le fotografie in WebP, o mantieni il formato JPG se il tuo flusso di lavoro dipende da esso, poiché Shopify converte in ogni caso.
4. Comprimi a una dimensione target, utilizzando 300 KB per le foto dei prodotti e 400 KB per i banner.
5. Nomina i file in base al codice prodotto e alla vista, in modo che un'importazione CSV collettiva associ le immagini ai prodotti corretti.
6. Carica e controlla la pagina del prodotto su un telefono anziché solo sull'anteprima desktop.

WebP su Shopify

Shopify supporta WebP nativamente da anni e converte automaticamente i file JPG e PNG caricati per i browser che lo supportano. Caricare direttamente in WebP è consentito e ti dà il controllo sulla compressione anziché lasciarla alla piattaforma.

Il formato WebP raggiunge la stessa qualità visiva del JPG con dimensioni di file inferiori del 25-35 percento, un vantaggio prezioso su una pagina che contiene 8 fotografie. L'unico caso da evitare è il caricamento in WebP se il file dovrà essere scaricato in seguito da un fornitore o inviato a una tipografia, poiché tali destinatari si aspettano ancora il formato JPG.

Risolvere i problemi di una pagina prodotto lenta

Inizia con l'immagine più grande sulla pagina, perché il singolo file più pesante è solitamente responsabile della maggior parte del ritardo. Su una vetrina Shopify, di solito si tratta del banner della homepage o della prima foto del prodotto.

• Ridimensiona prima di comprimere. Un banner da 4000 pixel in uno spazio da 1920 pixel spreca il 75 percento dei suoi dati.
• Riduci il numero di immagini above the fold. Una galleria di 12 immagini che si carica tutta in una volta rallenta tutto il resto.
• Verifica che il lazy loading sia attivo per le immagini below the fold, operazione che la maggior parte dei temi moderni gestisce per impostazione predefinita.
• Sostituisci i file GIF animati con video, poiché una breve GIF spesso pesa più di tutto il resto della pagina messo insieme.
• Controlla le app. I widget delle recensioni, i popup e i badge di fiducia spesso caricano le proprie immagini e script.

Testo alternativo e nomi dei file immagine

Scrivi un testo alternativo che descriva il prodotto per gli acquirenti che utilizzano lettori di schermo, e nomina i file con il nome del prodotto anziché con quello della fotocamera. Un file chiamato IMG_4821.jpg non dice nulla ai motori di ricerca e agli acquirenti.

Usa una struttura come camicia-lino-blu-fronte.jpg, che rimane leggibile in un'importazione collettiva, si ordina in modo prevedibile in una cartella e descrive l'immagine nei risultati di ricerca. Il testo alternativo dovrebbe descrivere ciò che mostra la fotografia, inclusi colore, materiale e inquadratura, senza ripetere parola per parola il titolo del prodotto. Entrambi i campi richiedono pochi secondi per prodotto e migliorano il posizionamento del negozio nella ricerca di immagini.

Testare le modifiche prima di applicarle

Elabora prima 5 prodotti, pubblicali e controlla le pagine su un telefono reale prima di procedere con l'intero catalogo. Un errore di impostazione applicato a 500 prodotti richiede molto più tempo per essere annullato rispetto a quello necessario per prevenirlo.

Controlla 3 cose sui prodotti di prova. Conferma che le immagini appaiano nitide al massimo dello zoom, poiché gli acquirenti utilizzano molto lo zoom su abbigliamento e gioielli. Conferma che la griglia della collezione mostri ritagli coerenti. Conferma che la pagina si carichi rapidamente su rete mobile anziché sulla banda larga dell'ufficio. Solo allora applica le stesse impostazioni a tutto il resto.

App di compressione immagini contro ottimizzazione prima del caricamento

Le app di compressione richiedono un abbonamento mensile per risolvere un problema che puoi risolvere una volta sola prima del caricamento. Le app sono utili quando un negozio riceve costantemente nuove immagini da molte persone diverse e nessuno controlla ciò che viene caricato.

Un negozio con un catalogo stabile e una sola persona che gestisce le immagini non ha bisogno di un costo ricorrente. Comprimere la libreria una volta e comprimere le nuove fotografie man mano che arrivano consente di ottenere lo stesso risultato. Riconsidera la scelta quando il catalogo cresce oltre ciò che puoi elaborare a mano, o quando diversi collaboratori caricano immagini senza seguire una specifica.

Errori comuni con le immagini Shopify

Caricare direttamente dalla fotocamera è l'errore più costoso, perché una fotografia da 24 megapixel contiene 10 volte i dati che una vetrina online può visualizzare. La piattaforma accetta il file, e la pagina ne paga le conseguenze in termini di velocità.

Altri due errori si presentano regolarmente. Mescolare formati di immagine diversi all'interno di una collezione produce una griglia disordinata, poiché i temi ritagliano a quadrato e una fotografia verticale perde la parte superiore e inferiore. L'uso del formato PNG per le foto dei prodotti gonfia le dimensioni dei file da 3 a 5 volte senza alcun beneficio visivo, perché il PNG memorizza esattamente ogni pixel e una fotografia non ha aree piatte da sfruttare.

Mantenere un catalogo coerente

Elabora l'intero catalogo in un unico lotto in modo che ogni foto di prodotto condivida le stesse dimensioni, compressione e inquadratura. Gli acquirenti che confrontano i prodotti notano l'incoerenza anche quando non sanno definirla.

La coerenza aiuta anche la griglia della collezione, dove immagini con forma e luminosità corrispondenti si presentano come una pagina progettata con cura anziché assemblata casualmente. Imposta le dimensioni e l'obiettivo di peso una volta, quindi applicali a ogni file anziché regolare singolarmente ciascun prodotto.

Elaborare un catalogo in un unico passaggio

Trascina fino a 500 immagini contemporaneamente, o carica un archivio ZIP direttamente dal tuo fotografo, e ogni file ti verrà restituito ridimensionato e compresso secondo le stesse specifiche. Un catalogo che richiedeva un intero pomeriggio con un software desktop si completa in pochi minuti.

Tutto viene eseguito all'interno del tuo browser sul tuo processore, quindi i prodotti non ancora pubblicati, gli scatti delle campagne stagionali e le foto dei fornitori non raggiungono mai un server esterno. Per un negozio che prepara un lancio sotto embargo, mantenere i file locali fa la differenza tra un annuncio controllato e una fuga di notizie, e non costa nulla in più.