Come ottimizzare le immagini dei prodotti per il tuo negozio online

Inizia con le informazioni sul prodotto di cui hanno bisogno gli acquirenti

L’immagine di un prodotto serve a molto più che riempire un rettangolo. Dovrebbe aiutare chi acquista a valutare la forma, la finitura, il colore e le caratteristiche dell'oggetto. Un'esportazione che rimuove le cuciture, rende le scritte illeggibili o altera l'aspetto di una superficie è eccessivamente compressa, anche se le dimensioni del file possono sembrare notevoli.

Prima di iniziare a modificare le immagini, scegli un piccolo gruppo di scatti utili. Una foto principale chiara, un'altra angolazione e un primo piano di un dettaglio importante solitamente rispondono a più domande rispetto a diverse immagini quasi identiche. Aggiungi una foto di ambientazione o un riferimento di scala quando aiuta a spiegare il prodotto. Non c'è un numero preciso di foto da includere: una semplice tazza e una giacca tecnica richiedono informazioni diverse.

Conserva le fotografie originali in una cartella separata. Prepara delle copie per la pubblicazione con nomi che identifichino il prodotto e l'immagine. Se l'immagine originale è sfocata, mal illuminata o troppo piccola, la compressione non la correggerà. Sostituisci la fotografia di scarsa qualità prima di dedicare tempo alle impostazioni di esportazione.

Mantieni uniformi i ritagli e gli sfondi

Apri la pagina di una collezione e osserva diversi prodotti insieme. Una diversa quantità di spazio vuoto può far sembrare prodotti simili non correlati o notevolmente diversi nelle dimensioni. Scegli un rapporto d'aspetto che si adatti al tuo tema, quindi mantieni la posizione del soggetto e lo spazio circostante ragionevolmente uniformi in tutte le immagini principali.

Un ritaglio quadrato può funzionare bene per una griglia di prodotti quadrata, ma non è una regola universale. Un capo di abbigliamento alto o un'attrezzatura lunga potrebbero richiedere una presentazione diversa. Controlla l'oggetto nella sua interezza, comprese maniglie e accessori, prima di accettare il ritaglio. Non allungare una fotografia per adattarla a un modello.

Per preparare una serie, usa lo strumento di Pixilo per ottimizzare le immagini dei prodotti. Scegli dimensioni della tela, margini minimi e sfondo comuni, poi ritaglia e posiziona ogni foto separatamente. Controlla l’insieme in Tutte le immagini prima di scaricarlo. Con Ingrandisci puoi verificare i dettagli e l’effetto della qualità di esportazione scelta.

Il margine minimo si misura dai bordi dell’immagine ritagliata, non da un prodotto riconosciuto automaticamente. Gli spazi vuoti e gli sfondi opachi del file originale rimangono, a meno che non vengano eliminati con il ritaglio. Una tela comune non rende quindi tutti i prodotti della stessa dimensione apparente. Controlla anche la griglia pubblicata: il tema del negozio può applicare un ulteriore ritaglio.

Uno sfondo bianco o neutro può conferire uniformità a un catalogo, mentre la trasparenza può essere adatta a un design che posiziona i prodotti su sfondi diversi. Se un file PNG o WebP presenta già aree trasparenti, lo strumento colore di sfondo può riempirle con il colore scelto e creare un file JPG. Non rimuove lo sfondo esistente da una normale fotografia.

Verifica i bordi trasparenti sia su superfici chiare che scure. Un contorno chiaro che scompare su uno sfondo bianco potrebbe risultare evidente su una pagina scura. Se tale contorno fa già parte dell'immagine originale, la modifica del formato del file non lo rimuoverà. Consulta la guida agli sfondi inattesi nelle immagini trasparenti per diagnosticare la differenza.

Scegli le dimensioni per la griglia, la pagina del prodotto e lo zoom

Misura la larghezza effettiva dell'immagine nel layout. Una scheda prodotto potrebbe occupare 360 pixel CSS, mentre l'immagine principale del prodotto potrebbe occuparne 800. Queste sono larghezze di visualizzazione, non requisiti automatici per il file caricato.

Un pixel CSS misura la dimensione visibile nel layout. Su uno schermo ad alta densità può usare più pixel fisici. Un’immagine nitida può quindi richiedere più pixel della sua larghezza visualizzata.

Per uno schermo ad alta densità, una versione con una larghezza circa doppia rispetto a quella visualizzata è un'opzione utile da testare. Una scheda da 360 pixel potrebbe quindi utilizzare un'esportazione da 720 pixel, mentre un'immagine di prodotto da 800 pixel potrebbe utilizzare un'esportazione da 1600 pixel. È consigliabile tenere disponibili anche versioni più piccole. Questi valori sono esempi di pianificazione, non raccomandazioni della piattaforma né garanzie sulla scelta del file da parte del browser.

Lo zoom richiede una decisione specifica. Se i clienti devono esaminare la trama di un tessuto, un elemento di fissaggio o un’incisione, è opportuno conservare un'immagine originale sufficientemente dettagliata o fornire un primo piano separato. Una versione piccola destinata alla griglia dei prodotti non dovrebbe diventare l'unico file disponibile per chi utilizza lo zoom. Viceversa, la griglia non dovrebbe obbligare ogni visitatore a scaricare un'immagine ingrandita a piena risoluzione.

La tua piattaforma potrebbe generare automaticamente queste varianti. Se controlli direttamente la distribuzione, utilizza immagini responsive in modo che il browser possa richiedere una versione adatta. La guida alle immagini responsive spiega come dimensioni, srcset e sizes si combinano. Ridurre semplicemente le dimensioni di un'immagine grande con il CSS non crea un file scaricabile di dimensioni inferiori.

Un esempio reale: ritagliare una foto per una scheda prodotto quadrata

Questa foto misura 1920 × 1076 pixel. Il vasetto occupa solo una piccola parte della composizione orizzontale. Per una scheda quadrata possiamo avvicinarlo con un ritaglio, senza deformarlo né rimuovere lo sfondo fotografato.

1. Scegli il ritaglio. Nello strumento per le immagini dei prodotti, mantieni il coperchio e la base del vasetto interamente dentro un ritaglio di 630 × 630 pixel. Il piedistallo può uscire dall’inquadratura; il prodotto deve restare visibile per intero.
2. Imposta l’uscita. Usa una tela di 600 × 600 pixel con margine 0%. Lascia disattivato l’ingrandimento: il ritaglio è leggermente più grande del risultato e può essere ridotto senza aggiungere pixel.
3. Esporta e controlla. Abbiamo scaricato un JPG con qualità 90 da 16,4 kB. Esamina il bordo del coperchio, l’ombra tenue e la superficie bianca uniforme prima di accettarlo.

Il quadrato da 600 pixel è un esempio per una scheda prodotto, non una raccomandazione generale di caricamento. Una galleria più grande o uno zoom può richiedere più pixel. Il file più piccolo deriva da ritaglio, ridimensionamento ed esportazione JPG insieme: non misura la sola compressione. Lo sfondo originale e parte del piedistallo restano nella foto.

Scegli un formato adatto all’immagine e al tuo sistema di pubblicazione

Separa il formato che carichi dal formato che viene visualizzato dai visitatori. Il tuo negozio potrebbe accettare un'immagine originale in formato JPG o PNG e consegnarla automaticamente in formato WebP o AVIF. In tal caso, preparare manualmente diversi caricamenti in formati moderni potrebbe comportare un lavoro aggiuntivo senza migliorare il risultato.

• JPG: Un punto di partenza pratico per le fotografie con sfondo opaco, soprattutto quando la piattaforma o la destinazione finale richiedono il formato JPEG. Controlla i caratteri piccoli e la trama fine dopo la compressione.
• PNG: Utile quando è necessaria la trasparenza o si desidera mantenere elementi grafici nitidi senza un'ulteriore esportazione con perdita di dati. Un file PNG fotografico di grandi dimensioni può essere molto più pesante di un'alternativa adeguata.
• WebP: Vale la pena confrontarlo per foto e grafica di prodotto trasparente, se il tuo sistema di pubblicazione lo supporta. Il formato supporta diverse modalità di compressione, ma i convertitori da PNG/JPG a WebP di Pixilo utilizzano un'impostazione di qualità anziché una modalità lossless dedicata.
• AVIF: Un’altra opzione quando l’intero processo di pubblicazione lo supporta. Verifica sia l’immagine esportata sia la pagina pubblicata; un file di dimensioni ridotte da solo non garantisce che l'immagine sia adatta.

Consulta la guida ai formati di immagine per il Web per un confronto più ampio. Prima di modificare l’intero catalogo, prova una foto normale e un’immagine difficile, come una trama sottile o un prodotto su fondo trasparente. Verifica che caricamenti, miniature, gallerie e zoom funzionino.

Imposta un obiettivo di dimensione del file utile senza sacrificare i dettagli

Non esiste un'unica dimensione di file corretta per ogni fotografia di prodotto. Un oggetto semplice su uno sfondo neutro e un capo di abbigliamento elaborato potrebbero richiedere impostazioni diverse a parità di dimensioni. Anche una pagina di collezione con molte immagini ha esigenze di caricamento diverse rispetto a una galleria che mostra un'unica immagine di grandi dimensioni.

Per un'immagine che si intende pubblicare direttamente, si potrebbe testare un'immagine da 200 KB come budget iniziale, per poi decidere se è utilizzabile. Questo è un esempio, non un requisito. Se le etichette o i dettagli del materiale diventano poco chiari, prova un'impostazione meno aggressiva, un formato più efficiente o una dimensione di visualizzazione diversa. Non continuare a ridurre la qualità solo per raggiungere un numero arbitrario.

Confronta le immagini alle dimensioni che gli acquirenti visualizzeranno normalmente, quindi esamina le aree importanti a dimensione intera o con lo zoom. Verifica la presenza di bordi delle lettere spezzati, blocchi nelle ombre, texture sfocate e transizioni irregolari su sfondi lisci. La scelta migliore è la versione più piccola accettabile per quel posizionamento, piuttosto che l'esportazione più piccola che il software può produrre.

Per un test separato della sola compressione siamo tornati all’originale non ritagliato e lo abbiamo esportato in JPG con qualità 20, mantenendo tutti i 1920 × 1076 pixel. Il risultato pesa 28,0 kB, circa il 62% in meno dell’originale. Usa il divisore ed Esamina il dettaglio per confrontare il bordo del coperchio, la parete e l’ombra morbida. La qualità 20 è volutamente bassa per questa prova, non è un’impostazione consigliata. Controlla la foto anche alle dimensioni previste per la visualizzazione.

JPG originaleJPG · Qualità 20

Se il modulo di caricamento impone un limite reale, usa lo strumento di compressione a una dimensione target. Mantieni inizialmente le dimensioni invariate e consenti il ridimensionamento proporzionale solo se appropriato per il ruolo dell'immagine. Un limite rigido può imporre compromessi visibili; a volte un nuovo ritaglio o una foto di dettaglio separata sono più utili di un'ulteriore compressione.

Evita di esportare ripetutamente dall'ultima copia compressa. Torna all'originale quando provi un'impostazione di qualità diversa. I valori di qualità non sono intercambiabili tra formati o codificatori, quindi un JPG a 80 e un AVIF a 80 non avranno automaticamente lo stesso aspetto.

Verifica cosa gestisce già Shopify, WordPress o il tuo negozio

La documentazione di Shopify sul caricamento delle immagini descrive l’ottimizzazione automatica del negozio e consiglia originali di buona qualità, anziché una precompressione manuale obbligatoria. Il formato mostrato ai visitatori può essere diverso da quello caricato. Controlla i requisiti dei contenuti di prodotto e del tema: un obiettivo piccolo per il file distribuito non deve diventare una regola per tutti gli originali caricati.

Per un negozio WordPress, controlla le dimensioni delle immagini generate dal tuo tema e gli eventuali plugin di ottimizzazione o servizi di immagini in uso. Verifica che la scheda della collezione, la galleria prodotti e lo zoom ricevano le versioni appropriate. La guida all’ottimizzazione delle immagini per WordPress illustra il flusso di lavoro sottostante.

Se sostituisci un'immagine, apri una nuova pagina e verifica che venga visualizzata la nuova versione. Le miniature memorizzate nella cache o le varianti generate possono far apparire una vecchia esportazione come il nuovo risultato. Aggiungere un altro plugin di compressione prima di aver verificato il flusso di lavoro corrente può creare più confusione anziché risolvere il problema.

Pixilo prepara i singoli file localmente nel tuo browser. Non si connette al tuo negozio, non aggiorna il catalogo né configura la distribuzione delle immagini. Gli strumenti JPG-to-WebP, PNG-to-WebP, WebP-to-JPG e PNG-to-JPG riducono le immagini con lati superiori a 4000 pixel, mantenendo le proporzioni originali. Lo strumento di ridimensionamento consente di raggiungere fino a 8000 pixel per lato e 32 milioni di pixel in totale. Verifica le dimensioni scaricate quando prepari un'immagine originale destinata a un ingrandimento elevato.

Aiuta i motori di ricerca a comprendere le immagini dei prodotti

Descrivi accuratamente la vista. Un nome file come blue-ceramic-mug-side-view.jpg è più facile da gestire rispetto a IMG_4837.jpg. Per il testo alternativo, scrivi una descrizione utile di ciò che mostra l'immagine, ad esempio: "Tazza in ceramica blu con manico curvo, vista di lato". Un'altra fotografia dovrebbe descrivere la propria visuale anziché ripetere lo stesso testo.

Posiziona l’immagine vicino alle informazioni pertinenti sul prodotto ed evita di riempire nomi dei file e testo alternativo di parole chiave ripetute. La guida di Google alla SEO delle immagini spiega come descrivere le immagini e renderle individuabili. Queste pratiche aiutano a comunicarne il contenuto, ma non garantiscono il posizionamento nei risultati di ricerca.

Controlla anche la pagina del prodotto. Un'immagine corretta del colore o della variante scelta è più utile di un file perfettamente ottimizzato che mostra l'articolo sbagliato. L'ottimizzazione delle immagini dovrebbe supportare una descrizione accurata, non compensare la mancanza di informazioni sul prodotto.

Verifica il risultato pubblicato prima di modificare l'intero catalogo

• Visualizzazione della collezione: Il prodotto è visibile, i ritagli sono uniformi e la griglia non scarica file inutilmente grandi.
• Galleria prodotti: L'immagine principale è chiara, le angolazioni aggiuntive forniscono ulteriori informazioni e viene mostrata la variante corretta.
• Zoom: le scritte importanti, la trama e i componenti devono restare riconoscibili all’ingrandimento previsto.
• Layout del telefono: Uno schermo stretto non taglia via il soggetto né costringe un'immagine di grandi dimensioni, pensata solo per il desktop, ad adattarsi a uno spazio ridotto.
• Sfondi: Bordi trasparenti e riempimenti a tinta unita appaiono corretti rispetto ai colori reali della pagina.
• Caricamento: Ispeziona le richieste di file a ogni nuova visita. Evita di ritardare l'immagine principale del prodotto visibile solo perché altre immagini della galleria possono essere caricate in seguito.
• Layout: Mantieni le proporzioni corrette delle immagini in modo che testo e pulsanti non si spostino quando compaiono le fotografie.
• File sorgente: Conserva gli originali e una breve descrizione delle impostazioni utilizzate per la pubblicazione.

Inizia con una manciata di prodotti rappresentativi, inclusa un'immagine con dettagli precisi. Confronta il prima e il dopo in condizioni simili. Una volta verificati sia l’aspetto sia la distribuzione delle immagini, applica il processo al resto del catalogo. Per una diagnosi più approfondita dei problemi di caricamento, leggi perché le immagini dei siti web si caricano lentamente.

Domande frequenti

Qual è la dimensione ideale per un'immagine in un negozio online?

Dipende dalle dimensioni di visualizzazione del tema e dal comportamento dello zoom. Misura la griglia e la galleria, conserva sufficienti dettagli dell'immagine originale per l'ingrandimento e controlla i file generati. Non esiste una dimensione quadrata universale adatta a ogni prodotto o piattaforma.

Le immagini dei prodotti devono avere una dimensione inferiore a 200 KB?

No. Può essere un budget di prova per alcune immagini servite direttamente ai visitatori, ma non è una regola universale per il caricamento. Un’immagine originale destinata allo zoom potrebbe richiedere maggiori dettagli e una piattaforma con ottimizzazione automatica potrebbe funzionare meglio con un caricamento di alta qualità.

Per le foto di prodotti è meglio il formato JPG o PNG?

Il formato JPG è un buon punto di partenza per le fotografie ordinarie con sfondo opaco. Il formato PNG è ideale per la trasparenza e la nitidezza delle immagini, ma può risultare di grandi dimensioni per le foto. Prima di scegliere, verifica il processo di caricamento e distribuzione delle immagini della tua piattaforma; il formato che i clienti riceveranno potrebbe essere diverso.

Perché l'immagine del mio prodotto appare sfocata dopo il caricamento?

Confronta l'immagine originale, il file esportato e l’immagine effettivamente mostrata dal negozio. Le cause più comuni includono un'immagine originale di dimensioni insufficienti, una compressione eccessiva, una miniatura generata di piccole dimensioni utilizzata in una galleria di grandi dimensioni o una visualizzazione zoom che ingrandisce lo stesso file di piccole dimensioni. Identifica quale passaggio ha causato la sfocatura prima di modificare le impostazioni.

Pixilo può rimuovere lo sfondo da una foto di un prodotto?

No. Lo strumento per le immagini dei prodotti riempie lo spazio aggiunto alla tela e le aree già trasparenti con il colore scelto. Non riconosce il prodotto e non elimina lo sfondo opaco di una fotografia. Anche lo strumento separato per il colore di sfondo richiede un’immagine già scontornata per cambiare lo sfondo dietro al prodotto.