Le immagini dei prodotti sono tra le informazioni più importanti di un negozio online. I clienti non possono prendere in mano un prodotto ed esaminarlo da tutte le angolazioni. Buone immagini aiutano quindi a presentare il prodotto nel modo più realistico e comprensibile possibile.
WooCommerce distingue in questo caso tra Immagine del prodotto e il Galleria prodotti. L'immagine del prodotto è l'immagine principale di un prodotto. Tramite la galleria puoi aggiungere immagini aggiuntive.
Se stai creando il tuo primo prodotto, troverai la procedura completa nell'articolo Creare il primo prodotto in WooCommerce.
Breve spiegazione: L'immagine del prodotto è l'immagine principale del tuo prodotto. La galleria prodotti integra questa immagine principale con ulteriori viste, primi piani o altre immagini utili.
Immagine del prodotto e galleria prodotti: qual è la differenza? #
Il Immagine del prodotto è l'immagine principale di un prodotto WooCommerce. Viene utilizzata da WooCommerce in diversi punti, ad esempio nella pagina del prodotto e nelle panoramiche dei prodotti.
Muori Galleria prodotti contiene immagini aggiuntive dello stesso prodotto.
Nel caso di una tazza da caffè, la suddivisione potrebbe essere ad esempio la seguente:
Immagine del prodotto
└── Tazza leggermente da davanti
Galleria prodotti
├── Vista laterale
├── Vista dall'alto
├── Primo piano del materiale
└── Tazza in uso
La galleria non sostituisce quindi l'immagine del prodotto. La integra.
Imposta l'immagine del prodotto #
Nel backend di WordPress, apri il prodotto che desideri modificare.
A seconda dell'interfaccia WordPress e WooCommerce che utilizzi, troverai un'area nell'editor dei prodotti per il Immagine del prodotto.
Fai clic lì sulla funzione per impostare l'immagine del prodotto. Dopodiché si aprirà la libreria media di WordPress.
Ora puoi scegliere un'immagine già esistente o caricare un nuovo file immagine.
Seleziona l'immagine desiderata e conferma la selezione. L'immagine verrà quindi utilizzata come immagine principale del prodotto.
Suggerimento: Scegli come immagine principale uno scatto in cui il prodotto sia immediatamente ben riconoscibile. Un primo piano estremo è solitamente più adatto per la galleria che per l'immagine principale del prodotto.
Carica una nuova immagine del prodotto #
Se l'immagine desiderata non è ancora presente in WordPress, puoi caricarla direttamente durante l'impostazione dell'immagine del prodotto.
Il file viene così importato nella libreria media di WordPress e può quindi essere gestito anche lì.
Prima di caricare l'immagine, assicurati che sia adatta all'uso sul web. File di immagini molto grandi possono causare un consumo inutile di spazio di archiviazione e di trasferimento dati e compromettere il tempo di caricamento di una pagina prodotto.
Il file immagine non dovrebbe quindi essere semplicemente preso così com'è da una fotocamera o da un originale ad alta risoluzione, se tale risoluzione non è affatto necessaria per il sito web.
Quale formato di immagine dovrei usare? #
WordPress supporta diversi formati di immagine. Per le normali foto di prodotti, vengono spesso presi in considerazione JPEG, WebP o, a seconda dell'immagine e dell'ambiente utilizzato, altri moderni formati web. Il PNG è particolarmente utile laddove, ad esempio, è necessaria la trasparenza.
Il formato più adatto dipende dal contenuto dell'immagine e dall'uso desiderato.
Per una foto di prodotto classica con molti colori e dettagli, è utile un formato fotografico con una buona compressione. Per grafica, loghi o immagini con sfondo trasparente, altri formati potrebbero essere più adatti.
Importante: Non è solo l'estensione del file a determinare un buon tempo di carico. Sono determinanti anche le dimensioni dell'immagine, la compressione e la dimensione effettiva del file trasmesso.
Quanto dovrebbe essere grande un'immagine di prodotto? #
Non esiste un'unica dimensione di pixel adatta a ogni negozio WooCommerce.
La dimensione dell'immagine richiesta dipende, tra le altre cose, dal tema utilizzato, dalla struttura della pagina del prodotto, dalla visualizzazione dello zoom desiderata e dalle dimensioni dello schermo.
WooCommerce raconta per le immagini dei prodotti una dimensione di partenza sufficiente e indica nella sua documentazione attuale almeno 800 × 800 pixel come utile punto di partenza. Immagini più grandi possono essere necessarie o utili, in particolare per le funzioni di zoom.
Ciò non significa tuttavia che ogni immagine debba essere caricata il più grande possibile.
Un'immagine di prodotto dovrebbe essere abbastanza grande da poter mostrare il prodotto in modo nitido, ma non inutilmente grande.
Esempio pratico: Se l'immagine del tuo prodotto viene visualizzata sul sito web con una larghezza di poche centinaia di pixel, un originale di, ad esempio, 6000 × 4000 pixel è in molti casi inutilmente grande. L'immagine dovrebbe essere ridotta a dimensioni ragionevoli prima o durante la preparazione per il web.
Utilizzare proporzioni d'immagine uniformi #
Per un aspetto sobrio e professionale, dovresti utilizzare proporzioni d'immagine il più possibile uniformi per prodotti comparabili.
Ad esempio, se un'immagine di un prodotto è quadrata, la successiva estremamente alta e la terza molto larga, una panoramica dei prodotti può risultare disordinata.
Una struttura uniforme potrebbe essere, ad esempio:
Prodotto A → quadrato
Prodotto B → quadrato
Prodotto C → quadrato
Prodotto D → quadrato
Ciò non significa che ogni immagine originale debba essere esattamente identica. Ciò che conta è che le immagini del tuo negozio siano coerenti tra loro e che importanti aree del prodotto non vengano perse a causa di ritagli differenti.
Il modo in cui WooCommerce ritaglia o visualizza effettivamente le immagini dipende anche dal tema e dalle impostazioni del negozio utilizzate.
Non incidere i prodotti troppo profondamente #
Il prodotto principale dovrebbe essere mostrato completamente nell'immagine o almeno in modo tale che un cliente comprenda immediatamente cosa viene offerto.
Se WooCommerce o il tuo tema ritagliano automaticamente le immagini di anteprima, dovresti quindi controllare se parti importanti del prodotto vengono tagliate.
Ciò è particolarmente rilevante per prodotti molto alti o molto larghi.
Usare la galleria prodotti #
Per molti prodotti, una singola immagine non è sufficiente.
Informazioni su Galleria prodotti Puoi aggiungere registrazioni supplementari.
Apri a tale scopo la sezione della galleria prodotti nell'editor dei prodotti e seleziona la funzione per aggiungere immagini.
Anche qui puoi selezionare immagini esistenti dalla libreria media di WordPress o caricare nuovi file.
Puoi selezionare più immagini per la galleria.
Quali immagini appartengono alla galleria? #
La galleria avrebbe dovuto fornire al cliente informazioni aggiuntive e non semplicemente mostrare cinque immagini quasi identiche.
A seconda del prodotto, ad esempio, possono essere utili:
- altre viste del prodotto
- Retro o lato inferiore
- Primo piano
- Connessioni o comandi
- Struttura del materiale
- Confronto delle dimensioni
- Prodotto in uso
- imballaggio o contenuto della confezione, se rilevante per l'acquisto
Nel caso di uno zaino, ad esempio, potrebbero essere mostrati la parte anteriore, la parte posteriore, l'interno, il sistema di trasporto e i singoli scomparti.
Su un dispositivo elettronico, i collegamenti e i comandi possono essere importanti.
La domanda fondamentale è: Quale visuale aiuta un cliente nella decisione di acquisto?
Modifica l'ordine delle immagini della galleria #
Le immagini della galleria prodotti possono essere riordinate tramite trascinamento (drag-and-drop) nell'editor dei prodotti WooCommerce.
Trascina un'immagine nella posizione desiderata e poi salva o aggiorna il prodotto.
Disponi le immagini nel modo più logico possibile.
Ad esempio:
Immagine principale
↓
seconda vista d'insieme
↓
vista laterale
↓
primo piano
↓
prodotto in uso
In questo modo il cliente ottiene una sequenza logica mentre scorre le immagini.
Rimuovi l'immagine dalla galleria prodotti #
Quando un'immagine non è più necessaria, puoi rimuoverla dalla galleria prodotti.
La rimozione di un'immagine dalla galleria non significa automaticamente che il file immagine venga eliminato anche dalla libreria media di WordPress.
Il file potrebbe essere ancora presente in WordPress e utilizzato in altre parti del sito web.
Importante: Non eliminare frettolosamente un file immagine direttamente dalla libreria media. Il fatto che tu non ne abbia più bisogno per questo prodotto non significa che non venga utilizzato altrove sul tuo sito web.
Sostituire l'immagine del prodotto #
Se desideri modificare l'immagine principale di un prodotto, rimuovi o sostituisci l'associazione precedente e selezioni un'altra immagine dalla libreria media oppure ne carichi una nuova.
Salva o aggiorna quindi il prodotto.
Controlla poi sia la pagina del prodotto che una panoramica dei prodotti. In questo modo potrai vedere se la nuova immagine viene ritagliata e visualizzata correttamente in entrambe le visualizzazioni.
Che fine fa la vecchia immagine del prodotto? #
Quando assegni una nuova immagine principale a un prodotto, il file immagine utilizzato in precedenza non viene eliminato automaticamente dalla libreria media di WordPress.
Ha senso, perché lo stesso file multimediale potrebbe essere utilizzato altrove.
Se in seguito desideri rimuovere le vecchie immagini dalla libreria multimediale, dovresti quindi verificare in anticipo se non sono effettivamente più necessarie.
Inserisci il testo ALT per le immagini dei prodotti #
WordPress offre nella libreria multimediale per le immagini un campo per il Testo alternativo ossia testo ALT.
Il testo alternativo descrive il contenuto o la funzione di un'immagine per le situazioni in cui l'immagine non può essere percepita visivamente. È particolarmente importante per l'accessibilità.
Un testo ALT significativo descrive il prodotto effettivamente visibile nel modo più sintetico e comprensibile possibile.
Esempio:
Zaino da trekking nero con scomparto principale aperto
Meno utile sarebbe:
bild123.jpg
o una sequenza artificiale di termini di ricerca.
Regola fondamentale: Descrivi ciò che è rilevante vedere nell'immagine. Scrivi il testo ALT per le persone e non come un elenco di quante più parole chiave possibili.
Deve ogni immagine della galleria avere lo stesso testo ALT? #
No. Se immagini diverse mostrano prospettive differenti e un testo alternativo per queste immagini è opportuno, il testo dovrebbe descrivere anche la rispettiva prospettiva.
Per esempio:
Immagine principale:
Zaino da trekking nero visto frontalmente
Immagine della galleria:
Zaino da trekking nero con scomparto principale aperto
Immagine della galleria:
Retro dello zaino da trekking nero con sistema di trasporto
In questo modo, ogni testo alternativo descrive effettivamente la rispettiva immagine.
Immagini dei prodotti per i prodotti variabili #
Belli prodotti variabili Sì, WooCommerce consente di assegnare immagini specifiche a singole varianti.
Questo è molto utile, ad esempio, con colori diversi.
Una maglietta potrebbe essere configurata così:
Variante Nero
→ Immagine della t-shirt nera
Variante Bianco
→ Immagine della t-shirt bianca
Variante Rosso
→ Immagine della t-shirt rossa
Quando un cliente seleziona una variante, WooCommerce può mostrare l'immagine associata a quella variante.
In questo modo il cliente vede non solo il nome del colore scelto, ma anche la relativa vista del prodotto.
Un'immagine di variante non sostituisce automaticamente una galleria completa per variante #
Il WooCommerce Core consente di assegnare un'immagine personalizzata a una variante.
Una galleria completamente separata con più immagini per ogni singola variante, invece, non fa parte della funzione di base delle varianti di WooCommerce Core.
Se ad esempio hai bisogno di cinque immagini di galleria dedicate per ciascun colore, potrebbe essere necessaria un'estensione aggiuntiva o una corrispondente funzione del tema o del sistema di e-commerce utilizzato.
Importante: Non installare un plugin per gallerie qualsiasi solo perché ti servono immagini aggiuntive. Verifica prima se il tuo tema o un'estensione già presente offre la funzione desiderata.
Che cosa mostra WooCommerce sulla pagina del prodotto? #
WooCommerce fornisce le funzionalità tecniche per le immagini dei prodotti e le gallerie. Tuttavia, la visualizzazione esatta nel frontend è fortemente influenzata dal tema utilizzato o dalla struttura della pagina del prodotto.
A seconda del negozio, ad esempio, possono essere presenti:
- immagine principale grande
- piccole anteprime della galleria
- Funzione di zoom
- Lightbox
- Slider o carosello
Ecco perché due negozi WooCommerce con le stesse immagini di prodotti possono avere un aspetto diverso.
L'immagine del prodotto sembra buona nel backend, ma non nel negozio #
Se un'immagine nella libreria media di WordPress appare corretta, ma viene visualizzata in modo sfavorevole sulla pagina del prodotto o nella panoramica del negozio, non è detto che il file originale sia danneggiato.
Le possibili cause includono, ad esempio:
- il tema utilizza un determinato ritaglio dell'immagine,
- Le immagini di anteprima del prodotto hanno proporzioni diverse,
- l'immagine è troppo piccola per la visualizzazione desiderata,
- un page builder modifica il layout del prodotto,
- I dati di immagini o pagine memorizzati nella cache mostrano ancora una versione precedente.
Verifica quindi prima se è interessata solo una determinata visualizzazione.
Immagini di prodotti sfocate #
Un'immagine di partenza piccola può sembrare sfocata se viene visualizzata in dimensioni notevolmente maggiori sulla pagina del prodotto.
Esempio:
Immagine originale:
300 × 300 pixel
Visualizzazione su schermo grande:
notevolmente più grande dell'originale
Il browser non può semplicemente ripristinare le informazioni mancanti dell'immagine. L'immagine viene ingrandita e di conseguenza può apparire sfocata.
Utilizza pertanto immagini di origine con una risoluzione sufficiente.
Immagini di prodotto troppo grandi #
L'altro estremo sono file originali inutilmente grandi.
Una foto larga diverse migliaia di pixel e di dimensioni di file molto grandi può essere sovradimensionata per una normale presentazione di prodotti.
Sebbene WordPress generi diverse dimensioni di immagine durante il caricamento, dovresti comunque preparare le immagini originali in modo appropriato per il web.
Soprattutto in un negozio con molti prodotti, le immagini scarsamente ottimizzate possono rappresentare una quota significativa del volume di dati trasferito.
Immagini dei prodotti e tempo di caricamento #
Le pagine di prodotti contengono spesso diverse immagini ad alta risoluzione. Di conseguenza, le immagini possono avere un impatto notevole sul tempo di caricamento.
Sono particolarmente importanti:
- dimensioni delle immagini adatte
- compressione adatta
- formato di file adatto
- non caricare più immagini di quelle effettivamente necessarie
Se vuoi scoprire quanto tempo ci mette effettivamente a caricarsi la tua pagina prodotto, puoi misurare il tempo di caricamento con i metodi descritti nell'articolo Misurare il tempo di caricamento del sito web verificare.
Per un'ulteriore analisi tecnica puoi anche Google PageSpeed Insights usare.
Denominare i file di immagine in modo sensato #
È opportuno denominare chiaramente i file immagine già prima del loro caricamento.
Invece:
IMG_8472.jpg
può essere utilizzato, ad esempio,:
wanderrucksack-schwarz-vorne.jpg
Questo facilita anche a te la successiva gestione in una grande mediateca.
Quando centinaia di immagini di prodotti hanno solo nomi come DSC_0012, IMG_4821 o final-neu-3, la ricerca di un determinato file diventa inutilmente difficile.
Evitare di caricare più volte inutilmente diverse immagini #
Se un file immagine è già presente nella libreria media di WordPress e deve essere utilizzato per un altro prodotto, non è necessario caricarlo nuovamente.
Puoi riselezionare i contenuti multimediali esistenti.
Ciò evita copie non necessarie dello stesso file e mantiene la libreria multimediale più ordinata.
Controllare le immagini dei prodotti dopo il salvataggio #
Dopo aver aggiunto o modificato le immagini dei prodotti, dovresti salvare o aggiornare il prodotto e poi aprire la pagina prodotto effettiva.
Controlla lì in particolare:
- Viene visualizzata l'immagine principale corretta?
- Il prodotto è completo e chiaramente riconoscibile?
- Vengono visualizzate tutte le immagini della galleria?
- Ha senso l'ordine?
- Funziona la selezione delle immagini o la galleria?
- Le immagini delle varianti vengono cambiate correttamente?
- La visualizzazione risulta adeguata anche su uno smartphone?
Controlla inoltre una panoramica dei prodotti o una categoria. L'immagine principale lì può essere ritagliata in modo diverso o mostrata in una dimensione diversa rispetto alla singola pagina del prodotto.
Un semplice esempio di una buona struttura delle immagini #
Prendiamo uno zaino da trekking nero.
| Immagine | Compito |
|---|---|
| Immagine principale | Mostrare lo zaino completamente di fronte o leggermente di lato |
| Immagine galleria 1 | Mostra il retro e il sistema di trasporto |
| Immagine della galleria 2 | Mostra scomparto principale aperto |
| Immagine della galleria 3 | Mostrare tasche e cerniere nei dettagli |
| Immagine della galleria 4 | mostrare lo zaino indossato o in uso |
In questo modo, ogni immagine risponde a una diversa possibile domanda del cliente.
Cosa dovresti evitare nelle immagini di prodotti #
Alcuni problemi tipici possono essere evitati già durante la configurazione:
- immagini di output sfocate o troppo piccole
- file di immagine inutilmente enormi
- proporzioni d'immagine completamente diverse all'interno di una panoramica prodotti
- diverse immagini della galleria quasi identiche e senza alcun valore informativo aggiuntivo
- immagini di varianti errate
- nomi di file incomprensibili
- Testi alternativi costituiti esclusivamente da un elenco di parole chiave
- eliminazione precipitosa di file presumibilmente inutilizzati dalla libreria multimediale
L'importante non è usare il maggior numero possibile di immagini. Le immagini dovrebbero aiutare il cliente a valutare il prodotto nel modo migliore possibile.
Come procediamo? #
Una volta configurati le informazioni sul prodotto, le varianti, le caratteristiche e le immagini, dovresti occuparti della disponibilità di magazzino.
Nel prossimo articolo spieghiamo quindi come Gestisci inventario, SKU e stato di consegna in WooCommerce. Tra le altre cose, esamineremo la gestione automatica dell'inventario, lo stato del magazzino, gli ordini in sospeso e la gestione delle varianti di magazzino.
Riepilogo #
Il Immagine del prodotto è l'immagine principale di un prodotto WooCommerce. Tramite la Galleria prodotti puoi aggiungere viste aggiuntive, primi piani e altre immagini utili.
Utilizza immagini di dimensioni sufficientemente grandi e adatte al web, senza caricare file originali inutilmente enormi. Proporzioni uniformi garantiscono un aspetto visivo più ordinato, soprattutto nelle panoramiche dei prodotti.
Le immagini della galleria possono essere ordinate in WooCommerce tramite trascinamento (drag-and-drop). La rimozione di un'immagine da una galleria di prodotti non elimina automaticamente il file dalla libreria multimediale di WordPress.
Per i prodotti variabili, è possibile assegnare un'immagine specifica alle singole varianti. Tuttavia, una galleria completamente separata per ciascuna variante non rientra nelle funzionalità di base di WooCommerce.
Controlla le immagini dei prodotti direttamente nel negozio dopo ogni modifica importante: sulla pagina del prodotto, nelle panoramiche dei prodotti e su uno smartphone.
