Dimensioni immagini prodotto Shopify: la guida pratica

Le immagini prodotto su Shopify sbagliano in due direzioni opposte. O sono troppo piccole, e allora lo zoom si sfarina proprio quando il cliente va a controllare una cucitura o l'incastonatura di una pietra. Oppure escono enormi direttamente dalla fotocamera, e la pagina arranca sul telefono, dove atterra buona parte del tuo traffico. L'admin le accetta entrambe senza fiatare.

Shopify fa più di quanto la maggior parte dei negozianti immagini: genera versioni di ogni immagine per i diversi punti dello store, e il suo CDN sceglie un formato moderno come WebP o AVIF dove il browser lo supporta. Quello che non fa è sistemare proporzioni incoerenti, indovinare quale foto appartiene a quale variante o salvare uno scontorno fatto male. Ecco la parte che dipende da te.

Parti da 2048 x 2048 e fermati lì

La linea guida di Shopify: 2048 x 2048 px di solito è la resa migliore per le immagini prodotto quadrate. I limiti veri stanno molto più in alto — un'immagine di prodotto o di collezione deve pesare meno di 20 MB e può arrivare a 5000 x 5000 px, ovvero 25 megapixel.

Quei tetti non sono obiettivi. In Dawn la galleria prodotto inline non chiede mai al CDN niente di più largo di 1946 px, e perfino il lightbox dello zoom smette di nominare misure sopra i 4096 px. Un master da 5000 px serve soprattutto a rallentare i caricamenti e tutte le modifiche che stanno nel mezzo. Per la galleria principale resta sul quadrato da 2048 px. Tra i formati accettati in caricamento ci sono PNG, JPEG e WebP: passa a Shopify un file compresso invece di un TIFF da 6 MB.

Quadrato o verticale: scegli una proporzione e tienila

È nelle griglie di collezione che le proporzioni miste saltano all'occhio, ed è per questo che Shopify consiglia un rapporto uniforme per le immagini in evidenza. Temi come Dawn ti lasciano adattare la cornice a ogni immagine oppure bloccare tutto su una proporzione fissa, e in entrambi i casi l'incoerenza si paga: l'adattamento dà una griglia sfrangiata, il blocco taglia la testa di una bottiglia o lascia spazio morto intorno a un anello.

Quindi decidi una volta sola. Il quadrato (1:1) è il default più sicuro e si ridispone bene sugli schermi stretti. Le proporzioni verticali come 4:5 o 2:3 stanno bene su abbigliamento e bottiglie alte, e riempiono più spazio verticale sul mobile. Quello che non puoi fare è tenerle tutte e due dentro la stessa collezione.

Falla rispettare scontornando il prodotto e ricostruendo tu la cornice. Carica una foto su remover.bg, rimuovi lo sfondo e sostituiscilo con lo stesso bianco pieno — o lo stesso colore del brand — di tutti gli altri annunci. Poi ridimensiona il risultato sulla cornice che hai scelto, con lo strumento di esportazione che già usi, così una tazza tenuta in mano e un cappotto lungo finiscono sulle stesse dimensioni. Lo stesso scontorno alimenta anche le regole più severe dei marketplace, come nella guida allo sfondo bianco di Amazon, oppure puoi tenerlo su trasparenza e comporre dopo — vedi quando il PNG trasparente è l'output giusto.

Il CDN di Shopify ridimensiona, ma non aggiusta il file di partenza

I temi richiedono le immagini attraverso i filtri Liquid image_url e image_tag, che costruiscono un srcset perché il CDN possa servire il file della misura e del formato giusti per ogni dispositivo. È il motivo per cui un tema fatto bene non spedisce mai il tuo file da 2048 px a un telefono da 390 px.

Due cose però restano scoperte. La scelta del formato in caricamento conta ancora: esportare in WebP tiene i file leggeri prima ancora che arrivino al CDN, e Shopify accetta il WebP senza conversioni, esattamente come remover.bg gestisce il WebP da un capo all'altro. E per centinaia di SKU non esiste la scorciatoia del trascina-una-cartella: quel lavoro va in uno script sull'API per rimuovere lo sfondo, da far girare insieme all'import del CSV.

Lo zoom serve solo se i pixel ci sono

Shopify dice che le immagini devono superare gli 800 x 800 px perché lo zoom funzioni come si deve. In Dawn l'impostazione dello zoom nel template prodotto offre clic e passaggio del mouse, apertura in lightbox, oppure nessuno zoom.

Attiva lo zoom quando è la texture a vendere: maglieria, grana della pelle, incisioni, sfaccettature delle pietre, legno. Disattivalo per grafiche piatte e icone piccole, dove lo zoom mette in mostra soltanto gli artefatti di compressione. Anche sui bordi lo zoom non perdona: bordure di pelo, capelli sfuggiti e cinturini sottili rivelano ogni errore, ed è lì che uno scontorno pulito si guadagna lo stipendio.

Immagini delle varianti e ordine dei media

Ogni variante supporta esattamente un'immagine assegnata — solo un'immagine, non un video né un modello 3D — e quella diventa l'anteprima quando il cliente seleziona quell'opzione.

Siccome un'immagine per variante basta di rado, sfrutta la galleria intorno. Aggiungi ogni scatto ai media del prodotto, ordinali in modo che gli scatti collegati stiano vicini e metti per prima l'immagine più forte: il primo elemento dei media comanda la scheda prodotto e la vista predefinita.

Testo alternativo: 512 caratteri concessi, 125 bastano

Shopify limita il testo alternativo a 512 caratteri e ne consiglia 125 o meno. È una linea guida di leggibilità, non un limite dello screen reader: un testo alternativo lungo è faticoso da ascoltare, perché chi ascolta non può scorrerlo con l'occhio. Descrivi l'inquadratura, variante compresa. "Camicia di lino blu, vista frontale, abbottonata" batte "camicia". Salta "immagine di" e salta gli elenchi di parole chiave. Il testo alternativo si può modificare in blocco con un caricamento CSV, invece che prodotto per prodotto.

Una breve checklist prima del caricamento

Prima che un lotto entri in Shopify: esporta quadrato a 2048 px, a meno che tu non abbia scelto il verticale, resta ben sotto il tetto dei 20 MB, usa un solo trattamento dello sfondo per tutta la collezione, assegna un'immagine per variante e ordina la galleria intorno a quella, e tieni il testo alternativo sotto i 125 caratteri. Niente di tutto questo è affascinante, e tutto quanto si vede nella pagina di collezione nel momento esatto in cui sbagli.