Torna al blog Diseño Shopify

Dimensioni delle immagini su Shopify: prodotti, banner e mobile

Per le immagini quadrate dei prodotti su Shopify, 2048 × 2048 pixel è una dimensione di riferimento comunemente raccomandata dalla documentazione. Per banner, collezioni e dispositivi mobili, la misura dipende dallo spazio del tema e dal ritaglio che desideri mostrare. È consigliabile decidere prima il rapporto d'aspetto e in seguito la risoluzione necessaria.
Medidas de imágenes en Shopify: productos, banners y móvil

Per le immagini quadrate dei prodotti su Shopify, 2048 × 2048 pixel è un riferimento comune raccomandato dalla documentazione. Per banner, collezioni e dispositivi mobili, la misura dipende dallo spazio del tema e dal ritaglio che desideri mostrare. È consigliabile decidere prima il rapporto d'aspetto e poi la risoluzione necessaria.

L'immagine corretta deve apparire nitida nella dimensione finale e caricarsi con risorse adatte al dispositivo. Caricare il file più grande possibile non garantisce questo risultato: il tema deve richiedere e mostrare le versioni appropriate.

Tabella delle misure per iniziare

Questi sono riferimenti di preparazione. Adattali al rapporto d'aspetto e alle dimensioni del componente in cui appariranno.

Uso Punto di partenza Cosa controllare
Prodotto quadrato 2048 × 2048 px Dettaglio e zoom; inquadratura identica tra le schede.
Prodotto verticale 1600 × 2000 px, rapporto 4:5 Che le schede e la galleria rispettino il formato.
Banner desktop 2000 × 1000 px, rapporto 2:1 Ritaglio, altezza reale e posizione del soggetto.
Banner mobile 1000 × 1400 px, se il componente è verticale File e inquadratura specifici per lo schermo.
Copertina collezione 1600 × 900 px o formato definito dal tema Uniformità e contenuto visibile al ritaglio.
Copertina articolo 1600 × 900 px, rapporto 16:9 Leggibilità nell'intestazione e nella scheda del blog.
Logo SVG quando il flusso lo consente, o PNG con risoluzione sufficiente per la dimensione mostrata Nitidezza, trasparenza e margine interno.
Favicon Formato piccolo e leggibile, preparato secondo il tema Riconoscibilità a dimensione della scheda.

Massimo consentito e dimensione consigliata

La documentazione sui media di Shopify indica che le immagini di prodotti e collezioni possono raggiungere 5000 × 5000 pixel, o 25 megapixel, e devono occupare meno di 20 MB. Queste condizioni di caricamento non sono una raccomandazione di download per ogni visitatore.

In una scheda, può avere senso conservare i dettagli per lo zoom. In una scheda piccola, la versione scaricata dovrebbe adattarsi allo spazio disponibile. Distingui sempre il file sorgente che salvi dalla risorsa che il tema serve in ogni situazione.

Rapporto d'aspetto: perché un'immagine appare ritagliata

Il rapporto d'aspetto mette in relazione larghezza e altezza. Una foto quadrata non può riempire un banner panoramico senza essere ritagliata o lasciare spazio vuoto. Se il componente utilizza un inquadratura di copertura, perderà una parte dell'immagine per occupare l'area completa.

Prima di modificare la risoluzione, controlla il formato della sezione e la posizione del punto importante. Se il soggetto si trova vicino al bordo, un ritaglio mobile potrebbe nasconderlo. Preparare un file specifico per dispositivo solitamente offre un maggiore controllo quando il design cambia molto in formato.

Quanta risoluzione serve a ogni spazio

Inizia dalla larghezza in cui l'immagine viene mostrata. Se occupa circa 700 pixel CSS su desktop, una sorgente da 1400 pixel può essere un punto di partenza per uno schermo con una densità maggiore. Successivamente, controlla la qualità reale, lo zoom e il peso, invece di applicare una moltiplicazione fissa a tutte le immagini.

Un logo vettoriale non dipende dalla risoluzione come una foto. Per un PNG, evita di ingrandire un file piccolo: aumentare le sue dimensioni non recupera i dettagli. Cerca l'originale o esporta di nuovo dalla sorgente adeguata.

Formato e compressione

JPEG può essere utile per la fotografia; PNG conserva la trasparenza e i dettagli grafici, sebbene non sia sempre l'opzione più leggera per una foto. Shopify elabora le immagini e può servire formati adatti al browser. Controlla il risultato scaricato e la sua qualità, non solo l'estensione dell'originale.

Non esiste un peso universale che funzioni per tutte le fotografie. Confronta diverse compressioni osservando dettagli importanti, bordi e testo della confezione. In un'immagine di prodotto, risparmiare qualche kilobyte non deve impedire di identificare l'articolo.

Cosa deve fare il tema

Il tema deve utilizzare immagini adattive affinché il browser possa scegliere una versione adeguata. Deve anche riservare le sue dimensioni e distinguere ciò che appare all'inizio da ciò che può essere caricato successivamente. Il servizio immagini di Shopify non corregge autonomamente un'implementazione che richiede una versione enorme su tutti i dispositivi.

  • Versioni adatte per scheda, galleria e banner.
  • Rapporti d'aspetto coerenti tra i prodotti di una collezione.
  • Dimensioni riservate per ridurre i salti di contenuto.
  • Priorità corretta per l'immagine principale visibile.
  • Caricamento differito per le risorse secondarie quando opportuno.
  • Controllo dei video e delle applicazioni che accompagnano le immagini.

Testo alternativo e contesto

Descrivi ciò che apporta l'immagine: prodotto, formato o dettaglio rilevante. Non ripetere un elenco di parole chiave né aggiungere città per cercare di posizionare. Le immagini puramente decorative potrebbero necessitare di un testo alternativo vuoto, a seconda della loro funzione.

Se una tabella o un'istruzione è incorporata come immagine, offri anche il contenuto in testo accessibile. Una fotografia di una confezione può aiutare, ma non dovrebbe essere l'unico modo per consultare le informazioni che l'acquirente ha bisogno di leggere.

Come controllare un'immagine prima di pubblicarla

  1. Controlla il rapporto d'aspetto e l'inquadratura nella sezione reale.
  2. Prova su mobile e desktop con il contenuto definitivo.
  3. Verifica quale file e quali dimensioni scarica ogni dispositivo.
  4. Verifica nitidezza, zoom e ritaglio.
  5. Misura il caricamento e i salti di contenuto.
  6. Controlla il testo alternativo e il contesto dell'immagine.

Se sostituisci immagini che già ricevono traffico, considera anche le loro URL e i link. Non cambiare nomi o file in modo massivo solo per inserire parole chiave. La qualità della risorsa, il suo contesto e la sua manutenzione contano più di una ricetta di nomenclatura.

Se il negozio continua a scaricare file troppo grandi, un' audit delle prestazioni di Shopify può distinguere ciò che appartiene alle immagini, al tema e alle applicazioni. In questo modo puoi correggere la causa prima di esportare nuovamente l'intero catalogo.

Per continuare a lavorare sul tuo negozio

Fonti e revisione

Revisione editoriale: team di Migraciones.io · 30 ottobre 2026. Le funzionalità contrattabili e la loro disponibilità devono essere verificate per il negozio, il paese e il piano specifici.