Come ottimizzare le immagini Shopify: dimensioni, formati e compressione

Esempio: preparare la foto principale di un prodotto

Immagina una foto nitida da 3600 × 2400 pixel e un negozio con immagini principali quadrate. I passaggi illustrano un metodo, non risultati di compressione misurati o dimensioni di download promesse.

1. Scegli il ritaglio. Prova un quadrato da 2400 × 2400 che mostri tutto il prodotto. Se non entra, cambia composizione invece di tagliare una parte importante.
2. Controlla la coerenza. Confronta con due schede esistenti e regola lo spazio intorno per ottenere una scala simile.
3. Prepara un originale adatto. Confronta una copia da 2048 × 2048 con il ritaglio completo. Conserva dettaglio per vista prodotto e zoom. Non ingrandire un piccolo originale solo per raggiungere il numero.
4. Scegli il formato. Usa un JPG nitido per una foto su sfondo uniforme o PNG se serve trasparenza. Crea le prove di compressione dall'originale di qualità.
5. Carica e controlla. Verifica prodotto, collezione e vista mobile. I bordi importanti devono restare visibili e lo zoom deve mostrare dettagli utili.
6. Controlla la versione distribuita. Se la foto è sfocata o la pagina lenta, esamina la versione caricata dal tema prima di esportare di nuovo.

Quando funziona su un piccolo campione, applica il metodo a prodotti simili. Controlla le eccezioni singolarmente. Gioielli lucidi e una semplice scatola possono richiedere scelte di qualità diverse anche con identiche dimensioni e composizione.

Cosa fa già Shopify automaticamente

Distingui il file caricato dalla versione scaricata dal browser del cliente. Ridurre il primo da 4 MB a 1 MB non riduce necessariamente il download del cliente nella stessa proporzione.

Shopify crea più dimensioni e può inviare WebP o AVIF se il browser li supporta. La sua guida alle immagini del tema chiarisce che non serve comprimerle manualmente prima del caricamento. L'originale mantiene la qualità nell'amministrazione, mentre il negozio può mostrare una versione ottimizzata.

Un originale nitido e ben composto vale quindi più di un file ridotto a ogni costo. Shopify non ricrea i dettagli eliminati da una compressione eccessiva. Se il tema ingrandisce una versione minuscola di una foto nitida, il problema non è nell'originale.

Parti dal problema visibile. Per un prodotto tagliato male, correggi composizione o ritaglio del tema. Per un originale sfocato, usa una foto migliore. Se una foto nitida carica lentamente, controlla la versione inviata al cliente. Ricomprimere non è il primo passo adatto in tutti i casi.

Scegliere le dimensioni in base all'uso

Prepara l'immagine per la sua visualizzazione utile più grande, non solo per la piccola scheda prodotto. Una miniatura nitida può essere insufficiente per galleria o zoom. I pixel indicano larghezza e altezza; KB e MB indicano la quantità di dati del file.

Shopify ammette immagini di prodotti e collezioni fino a 5000 × 5000 pixel, o 25 milioni di pixel, con file inferiori a 20 MB. Suggerisce 2048 × 2048 per foto quadrate, senza imporli a ogni negozio. Leggi i requisiti dei contenuti multimediali dei prodotti prima di preparare un gruppo numeroso.

I limiti cambiano in base al punto di caricamento. La documentazione della sezione File indica 20 MB e 25 milioni di pixel per le immagini; la guida del tema cita 20 milioni per altri caricamenti. Segui istruzioni ed eventuale errore del campo specifico, invece di considerare un unico limite valido ovunque.

Una foto mostrata a 700 pixel di larghezza può beneficiare di una versione da 1400 su uno schermo che usa due pixel dell'immagine per ogni pixel di visualizzazione. È un esempio di pianificazione, non una regola per raddoppiare tutti i caricamenti. Lo zoom può richiedere più dettaglio; le piccole schede devono comunque ricevere versioni adeguate.

Non rendere ogni foto quadrata solo perché le schede quadrate sono comuni. Una bottiglia alta, un capo d'abbigliamento e un paesaggio possono richiedere composizioni diverse. Mantieni la forma uniforme dove facilita il confronto dei prodotti.

Un banner da 1200 × 600 ha proporzioni 2:1. Un file da 2400 × 1200 conserva la forma e offre più dettaglio sugli schermi ad alta risoluzione. Sono esempi, non requisiti Shopify. Una sezione mobile alta e stretta può tagliare molto ai lati. Un'immagine mobile distinta aiuta se il tema la supporta.

Scegliere JPG o PNG in base al contenuto

Prova JPG per foto normali senza trasparenza. Prova PNG per sfondi trasparenti o grafiche con testo nitido e linee sottili che peggiorano in JPG. Confronta i file invece di imporre un formato all'intero catalogo.

Una foto PNG può pesare molto più di una JPG, ma convertirla serve solo se il prodotto resta rappresentato fedelmente. Esamina tessuti, gioielli, venature del legno e piccole scritte. Un file leggero che nasconde quei dettagli non è una buona foto prodotto.

Caricare WebP è una possibilità, non una condizione per una distribuzione moderna. Shopify sceglie il formato inviato indipendentemente dall'originale. Vedere AVIF nel browser non significa dover caricare AVIF. Controlla i formati accettati dal campo specifico.

Uno sfondo bianco non è trasparenza: salvare in PNG non elimina un rettangolo bianco già presente dietro al prodotto. Controlla le immagini trasparenti sul vero sfondo della pagina, soprattutto bordi chiari e ombre. La nostra guida ai formati immagine spiega quando usare ciascun formato.

Uniformare le foto senza tagliare dettagli importanti

Il rapporto d'aspetto è il rapporto tra larghezza e altezza. Immagini da 2000 × 2000 e 1000 × 1000 sono entrambe quadrate, ma contengono quantità di dettaglio diverse. La forma non basta: il prodotto dovrebbe occupare una porzione simile di ogni foto principale.

Confronta una fila di schede. Se una scarpa riempie il fotogramma e un'altra ha molto bianco intorno, la fila appare irregolare nonostante le stesse dimensioni. Regola la composizione per facilitare il confronto e lascia spazio sufficiente per tutti i bordi del prodotto.

Ritagliare elimina parti dell'immagine, ridimensionare cambia le dimensioni e stirare deforma le proporzioni. Usa lo strumento di ritaglio per la composizione e lo strumento di ridimensionamento per ridurre proporzionalmente. Stirare una bottiglia per riempire un quadrato comunica una forma sbagliata.

Per preparare una serie, usa lo strumento per le immagini dei prodotti: scegli tela e margini comuni, ritaglia o posiziona ogni foto e confronta l’insieme in Tutte le immagini. Verifica che prodotti simili occupino una parte simile dell’inquadratura. Una tela comune non corregge automaticamente le differenze di composizione degli originali. Esporta un JPG nitido, oppure PNG se serve la trasparenza, e controllalo nel tema. Lo strumento prepara i file; Shopify continua a gestirne la distribuzione e il tema la visualizzazione.

In base al tema, Shopify permette di impostare un punto focale per mantenere visibile un'area importante durante il ritaglio. Aiuta con volti o prodotti nei banner, ma non garantisce che un'intera composizione larga entri in uno schermo stretto. Controlla entrambe le viste.

Inserisci titoli promozionali e pulsanti nei campi di testo del tema quando possibile. Il testo incorporato in un banner può diventare minuscolo o essere tagliato sul telefono. Il vero testo può andare a capo ed essere selezionato; un vero pulsante funziona come collegamento, non come semplice disegno.

Quando comprimere prima del caricamento

La compressione aiuta se l'originale è inutilmente grande, lento da caricare o supera un limite. Serve meno se è già nitido e gestibile e Shopify invia una versione adatta. Non sacrificare qualità per portare ogni foto sotto un obiettivo arbitrario, come 100 KB.

Conserva una copia intatta. Se le dimensioni sono eccessive per l'uso, riduci prima una copia e poi prova la compressione. Per un piccolo blocco di contenuto può risparmiare più della compressione ripetuta di un enorme originale. Lo zoom prodotto può giustificare più dettaglio.

Per confrontare una copia compressa, usa il compressore di immagini di Pixilo. Accetta fino a 20 JPG, PNG o WebP alla volta, ciascuno entro 25 MB, mantenendo formato e dimensioni. I suoi limiti sono diversi da quelli Shopify. Parti da poche immagini rappresentative e controllale prima di elaborare il resto.

La compressione PNG è senza perdita: i pixel non cambiano. Un PNG già ben compresso può ridursi poco. JPG e WebP possono modificare dettagli fini; esamina la copia scaricata. Se non ottiene un file più piccolo, Pixilo conserva l'originale.

Confronta le foto alla dimensione vista dai clienti e nello zoom disponibile. Controlla trame, piccole etichette, sfondi uniformi e bordi trasparenti. Torna all'originale se spariscono dettagli utili. La nostra guida all'ottimizzazione delle immagini prodotto approfondisce questi controlli.

Scrivere testo alternativo utile e nomi chiari

La SEO delle immagini parte da una foto che aiuta a capire il prodotto. Prima del caricamento assegnale un nome descrittivo, come zaino-tela-verde-oliva-vista-frontale.jpg. Evita lunghe liste di parole chiave. Il nome deve distinguerla da viste laterali o dettagli.

Il testo alternativo descrive l'immagine a parole. Per una foto significativa, indica la vista: «Zaino in tela verde oliva, vista frontale con due tasche esterne». Per un dettaglio, descrivi quello invece di ripetere la foto principale. Non aggiungere prezzi, sconti o parole chiave che l'immagine non aiuta a spiegare.

Le indicazioni di Google sulla SEO delle immagini consigliano nomi descrittivi e testo alternativo utile senza accumulare parole chiave. Anche il contenuto vicino fornisce contesto. Il nome è un piccolo indizio, non sostituisce una pagina prodotto utile.

Aggiungere testo alternativo a una foto prodotto Shopify

1. Nell'amministrazione Shopify, apri Prodotti e seleziona il prodotto.
2. Clicca sull'immagine nella sezione dei contenuti multimediali per aprire l'anteprima.
3. Seleziona Aggiungi testo alternativo, scrivi una breve descrizione e seleziona Salva testo alternativo.
4. Ripeti per le altre viste utili, descrivendo cosa mostra ciascuna.

Questi passaggi seguono le istruzioni Shopify per il testo alternativo dei prodotti. I banner hanno controlli propri. Prima di accettare una descrizione suggerita, confrontala con la foto: colore, materiale e dettagli devono essere corretti.

Una descrizione nelle proprietà del file sul computer non diventa automaticamente testo alternativo. Il tema può usare la stessa foto in modi diversi. Un'immagine decorativa può richiedere un'alternativa vuota; un'immagine collegata deve rendere chiara la destinazione del link.

La nostra guida al testo alternativo e ai nomi dei file spiega questi casi con esempi. Le descrizioni aiutano accessibilità e comprensione, ma non garantiscono posizionamenti né sostituiscono informazioni prodotto mancanti.

Controllare il negozio pubblicato su telefono e computer

L'anteprima nell'amministrazione non basta. Parti da questi controlli sul negozio pubblicato: non servono strumenti per sviluppatori.

• Apri un prodotto sul telefono. Si vede tutto? Le etichette importanti sono leggibili e il materiale riconoscibile?
• Controlla una fila della collezione. Forme e margini delle immagini principali sono coerenti?
• Prova galleria e zoom. Le altre foto aggiungono dettagli utili? Colore o variante scelti mostrano il prodotto corretto?
• Ricarica la pagina. La foto principale appare presto e testi e pulsanti restano fermi durante il caricamento?
• Ripeti su uno schermo più grande. Controlla banner larghi e viste prodotto grandi, non soltanto l'anteprima stretta.

Indagare su una foto sfocata o lenta

Se la sfocatura persiste, verifica se il tema ingrandisce una versione piccola. Se una scheda piccola scarica un'immagine enorme, controlla le versioni offerte. Le immagini responsive permettono al browser di scegliere dimensioni adatte a schermo e impaginazione.

La documentazione image_tag di Shopify spiega le varianti nel codice del tema. Se occorre correggerlo, chiedi allo sviluppatore di verificare dimensioni richieste e attributi srcset e sizes. Caricare separatamente ogni miniatura non risolve un problema di codice.

Se conosci gli strumenti per sviluppatori, il pannello Rete mostra i download reali. Puoi anche inviare pagina e immagine al responsabile del tema.

1. Apri la pagina prodotto e gli strumenti per sviluppatori e seleziona Rete (Network).
2. Con il pannello aperto, disattiva la cache del browser per il test e ricarica. Esaminerai un nuovo download anziché una copia salvata.
3. Filtra le immagini e trova la foto principale. Controlla l'anteprima della richiesta per non confonderla con una miniatura della galleria.
4. Esamina dimensione trasferita, misure dell'immagine e intestazione di risposta Content-Type. Un URL che sembra JPG può consegnare WebP o AVIF.
5. Ripeti dopo aver ricaricato alla larghezza mobile. Verifica che la vista piccola non scarichi inutilmente la versione più grande.

Non giudicare la distribuzione solo dal peso. Una versione grande può essere giustificata per alta risoluzione o zoom. Cerca incongruenze evidenti: una miniatura estesa su tutta la galleria o un originale completo per ogni piccola scheda.

La foto principale in alto deve essere disponibile presto. Le immagini più in basso possono solitamente aspettare che il visitatore si avvicini. Shopify sconsiglia il caricamento differito per le immagini visibili senza scorrere. Se la prima foto arriva tardi, fai controllare il tema; caricare subito tutta la galleria può creare un altro problema.

Distinguere velocità e spostamenti della pagina

Se la foto principale è l'elemento visibile più grande, può influire su Largest Contentful Paint (LCP), che misura quando appare l'immagine o il blocco di testo visibile più grande. Un file più piccolo aiuta se il download contribuisce al ritardo. Una richiesta tardiva può restare lenta dopo la compressione. La guida LCP di Google spiega la differenza.

Se l'arrivo di una foto spinge prezzo o pulsante di acquisto verso il basso, il tema può non aver riservato spazio sufficiente. Questo contribuisce a Cumulative Layout Shift (CLS), una misura degli spostamenti inattesi della pagina. Riserva lo spazio dell'immagine invece di comprimerla ancora. Consulta la guida Google agli spostamenti del layout e la nostra guida alle immagini e ai Core Web Vitals.

Confronta la stessa pagina prima e dopo in condizioni simili, cambiando una cosa alla volta. Distingui il test simulato PageSpeed dagli eventuali dati dei visitatori reali. I punteggi variano e i dati reali non si aggiornano subito dopo una modifica. Annota il problema risolto invece di un solo punteggio migliore.

Trovare la causa prima di cambiare tutte le immagini

La guida Shopify alle prestazioni del negozio cita anche temi, app e codice aggiunto. I rapporti usano dati di visitatori reali. Se la distribuzione è già efficiente, cerca il collo di bottiglia rimasto invece di un'altra app o una compressione più aggressiva.

Quali immagini migliorare prima?

Parti da foto principale e scheda di un prodotto molto visitato, poi da un banner importante della homepage. Dai priorità a un problema visibile: etichetta illeggibile, prodotto tagliato o foto tardiva. La quinta foto di una galleria poco visitata conta di solito meno dell'immagine che aiuta il cliente a decidere se continuare.

Annota pagina, dimensioni originali, ritaglio, formato e miglioramento. Conserva l'originale per annullare un risultato negativo. Applica il metodo riuscito ai prodotti simili e verifica le eccezioni singolarmente, senza sostituire tutto il catalogo in una volta.

Domande frequenti

Qual è la dimensione migliore per le foto prodotto Shopify?

Nessuna misura è ideale per ogni layout. 2048 × 2048 è un buon inizio per foto quadrate, ma tema, composizione e zoom decidono il bisogno. Usa un originale nitido nei limiti e controlla la pagina pubblicata. Non ingrandire una piccola foto solo per raggiungere 2048 pixel.

Shopify comprime le immagini automaticamente?

Shopify ottimizza la distribuzione e può inviare diverse dimensioni e formati. Non significa che sostituisca l'originale dell'amministrazione con una copia molto compressa. Puoi migliorare ritaglio e dimensioni prima del caricamento, senza comprimere ogni foto.

Tutte le foto devono restare sotto 200 KB?

No. Un limite arbitrario può eliminare dettagli utili, specialmente con lo zoom. Controlla dimensione e qualità della versione scaricata dal cliente. Una scheda piccola e una vista dettagliata grande hanno esigenze diverse.

PNG o JPG per Shopify?

Prova JPG per foto senza trasparenza e PNG per immagini trasparenti o testo degradato in JPG. Esamina i dettagli fini del prodotto. Shopify può inviare un formato diverso da quello caricato.

Serve un'app per ottimizzare le immagini?

Non solo per ottenere la distribuzione automatica di Shopify. Può aiutare con una grande libreria o un compito specifico. Chiarisci prima cosa non risolvono strumenti esistenti e tema. Prova l'effetto su una pagina prima dell'uso in tutto il negozio.

Serve un'immagine diversa per ogni schermo?

Di solito no per le foto prodotto: un buon tema richiede più dimensioni dallo stesso originale. Una composizione mobile distinta aiuta se il banner desktop taglia il soggetto sul telefono. È una scelta di layout, non un motivo per duplicare ogni foto.