In questo articolo andiamo ad analizzare come aumentare le vendite semplicemente migliorando le immagini, questo per fattori che riguardano la SEO e la qualità a livello grafico del sito.
Quasi nella totalità degli e-commerce che abbiamo sviluppato il cliente si è trovato in difficoltà con l’ottimizzazione delle immagini, hanno tutti sottovalutato la mole di tempo necessario per ottimizzarle nonostante la loro importanza.
Innanzitutto bisogna premettere che le foto devono essere di buona qualità, senza loghi, immagini, banner o filigrane (sono concesse solo in alcuni casi) e con sfondo neutro, preferibilmente bianco.
Per essere di buona qualità vuol dire che la foto non deve essere “sgranata”: deve poter essere ingrandita per permettere agli utenti di vedere i dettagli del prodotto.
Per rispettare i requisiti minimi, una foto deve essere grande almeno 600px sul lato lungo.
Infatti anche Amazon e Ebay non accettano immagini con una qualità inferiore a 500px sul lato lungo, quindi immagina di aver fatto un lavoro lunghissimo, ma frettoloso, e di doverlo rifare tutto per poter vendere sui marketplace?
Come fare per ottimizzare le foto di un e-commerce?
Tagliare e proporzionare
Le immagini hanno bisogno di proporzioni standard, altrimenti nella pagina catalogo le miniature dei prodotti possono apparire sproporzionate e poco ordinate come nell’immagine:
Questo accade quando si specifica solo la larghezza massima a cui ridurre le miniature e l’altezza resta variabile in base alle proporzioni originali dell’immagine.
Un altro caso possibile è che l’immagine venga tagliata, andando a nascondere parte dell’oggetto, accade quando viene specificata l’altezza massima oltre alla larghezza.
Le proporzioni e la grandezza delle immagini varia in base alla tipologia di prodotti che vendi, ad esempio, se hai un’enoteca le immagini dovranno avere l’altezza più grande della larghezza per adattarsi alla forma delle bottiglie, mentre se vendi biciclette può essere migliore l’opposto.
Se si ha un prodotto con molti particolari piccoli e che quindi ha bisogno di essere ingrandito molto, dovrà essere di dimensione maggiore rispetto a un prodotto senza particolari da dover ingrandire.
Per proporzionare le immagini si può usare Photoshop se disponibile o una valida alternativa gratuita:
GIMP
É il più famoso software di fotoritocco gratis è open-source, fornisce tutti gli strumenti necessari a ritoccare le tue foto e in pratica può fare tutto quello che fa Photoshop, solo in modo leggermente “meno professionale”, ma abbastanza per i ritocchi necessari.
Puoi scaricarlo gratuitamente e in totale sicurezza cliccando qui.
Online è pieno di tutorial e guide gratis su come utilizzarlo al meglio, quindi andiamo a vedere solo i passaggi che interessano a noi:
Creiamo una nuova immagine
Dopo aver aperto il programma premi CTRL+N sulla tastiera o clicca su “File”, sopra a sinistra e poi su “Nuova”, si aprirà una piccola scheda dove si possono andare ad inserire la larghezza e l’altezza in pixel, cliccando su “opzioni avanzate” si può scegliere il colore di riempimento dal menu a tendina “Riempi con:”.
Ok, abbiamo la nostra immagine, è vuota. E ora?
Importare le foto dei prodotti
Ora bisogna importare le foto dei prodotti, per farlo basta andare sulla cartella dei file, selezionarle e trascinarle all’interno dell’immagine di GIMP.
Mi raccomando, per evitare perdite di dati, dovute a spegnimenti improvvisi o altri problemi, ogni tanto, mentre lavori salva il file di GIMP, che avrà estensione .xcf, può tornare utile anche per lavorare in più step alle immagini.
Per salvarlo puoi utilizzare CTRL+S o cliccare su “File”>”Salva”, si aprirà una scheda dove selezionare la cartella in cui verrà salvato e il nome del file, una volta scelti puoi cliccare su “Salva”.
Le foto dei prodotti sono diventate dei livelli (Clicca qui per saperne di più sui livelli), sono gestibili e modificabili all’interno della finestra livelli, quello che interessa a noi è solo: la visibilità del livello e il livello attivo.
La visibilità permette di rimuovere un livello da un’immagine senza eliminarlo definitivamente, lo si va a nascondere in pratica. È possibile facendo clic sul simbolo dell'”occhio aperto” nella finestra di dialogo dei livelli.
Scalare le immagini
Rendi un livello alla volta visibile e poi seleziona lo strumento “Scala”, clicca sull’immagine e ridimensionala semplicemente trascinandola fino ad arrivare alla grandezza desiderata, poi clicca su scala.
Puoi passare all’immagine successiva rimuovendo la visibilità alla prima e dandola alla seconda, per poter utilizzare lo strumento scala bisogna rendere attivo il livello successivo, basta cliccare sul livello della seconda immagine.
Una volta terminata l’operazione con lo Strumento Scala bisognerà centrare le immagini, si lavora sempre su un solo livello alla volta, quindi bisogna rendere invisibili tutti gli altri e rendere attivo il livello interessato cliccandoci sopra.
Centrare le immagini
Utilizziamo lo strumento Allinea, cliccaci sopra e nelle Opzioni Strumento nel menu a tendina “Relativo a” seleziona “Immagine”.
Ok, ora clicca sulla foto del prodotto e poi sempre nelle opzioni strumento clicca sulle icone centrali delle prime due righe per allineare il livello in orizzontale e verticale.
Può rendersi necessario anche lo strumento “Sposta”, spesso l’oggetto non è perfettamente centrato nella foto, quindi bisogna centrarlo manualmente, basta selezionare lo strumento (ha 4 frecce opposte in verticale e orizzontale) e poi cliccare e trascinare il livello fino alla posizione desiderata.
Ora abbiamo tutti i livelli ben proporzionati e centrati, cosa facciamo?
Esportazione e formato
Ora va fatta l’esportazione e una prima ottimizzazione dei file:
Per esportare basta premere sulla tastiera CTRL+Maiusc+E, altrimenti si può cliccare su “File” e su “Esporta come”, attenzione a non cliccare su “Esporta” o digitare CTRL+E senza MAIUSC, altrimenti le immagini verranno sovrascritte ad ogni clic/digitazione.
Si aprirà una finestra in cui va selezionata la cartella dove verranno salvati i file e il nome.
Le foto vanno rinominate con nomi adeguati e parole chiave, utilizzando il simbolo meno (-) o l’underscore (_) per separare le parole, Google per determinare il ranking del tuo sito nei risultati di una ricerca, oltre al testo, analizza anche i nomi dei file all’interno della pagina.
Viene spiegato meglio successivamente.
Il formato da scegliere in genere varia tra gif, jpeg e png, in breve:
- JPEG: è un formato adatto per quasi tutte le immagini
- PNG: è adatto a loghi ed immagini con trasparenze
- GIF: è adatto per le immagini animate
per capire qual è il più adatto ai tuoi prodotti basta seguire questo schema:
Le due estensioni che interessano a noi sono JPEG e PNG.
Al contrario di Photoshop, GIMP non ha una funzione nativa per ottimizzare le immagini per il web in automatico, ma si può installare un plugin aggiuntivo,
Dopo aver cliccato esporta si aprirà una finestra dove va cliccato nuovamente esporta.
L’operazione va ripetuta con tutti i livelli.
Ora che abbiamo tutte le immagini ridimensionate e ben proporzionate cosa si fa?
Riduzione del peso
Questa ottimizzazione serve a rendere le immagini più leggere riducendo le dimensioni senza intaccarne la qualità, sono proprio le immagini una delle cause più comuni dei siti lenti e quasi tutti potrebbero essere ottimizzati mantenendo la qualità totalmente inalterata.
- Se il caricamento delle sue pagine dovesse rallentare di un solo secondo, Amazon ha calcolato che perderebbe 1,6 miliardi di dollari l’anno.
- Per l’algoritmo di Google il tempo di caricamento delle immagini è un fattore di ranking
Come fare?
Ci sono molti tool gratuiti online, quello che ti consiglio è Image Compressor, semplice e gratuito, permette di ottimizzare fino a 20 immagini per volta.
Vediamo come utilizzarlo:
Per prima cosa bisogna andare sul sito, puoi cliccare qui per raggiungerlo, poi ti basterà cliccare su “Carica i file” e selezionarli o trascinarli nell’area indicata.
Appena caricate il tool inizierà il lavoro di riduzione, subito dopo potrai scaricarle tutte insieme come cartella compressa cliccando su “Scarica tutto” o scaricarle singolarmente cliccando su “Scarica” sotto le miniature delle immagini.
Ottimizzazione SEO delle immagini
Per i motori di ricerca, Google in primis, un’immagine non è composta solo dall’immagine, suona strano, vero?
Ovviamente non riescono a “capire” a cosa sono relative le fotografie dal contenuto dell’immagine, ma sono pensati per leggere testo HTML, questo è quello che vede un motore di ricerca:
<img src=”url/immagine.jpg” alt=”Descrizione dell'immagine” title=”Descrizione visibile con l'hover del mouse” />
Da questo codice il motore di ricerca riesce a capire cosa contiene l’immagine, lo fa attraverso 4 fattori:
- il nome del file
- il tag ALT (Testo alternativo)
- l’attributo TITLE del tag IMG (Titolo)
- il testo attorno all’immagine (Didascalia)
Non bisogna saper programmare, WordPress permette di lavorare su questi fattori dalla finestra di gestione dei Media in modo semplice ed intuitivo.
Analizziamo e vediamo compilare questi campi nel dettaglio:
Premessa: Non bisogna esagerare con le parole chiave, Google potrebbe penalizzarti, tutti i campi vanno compilati con correttezza, inoltre è sconsigliato utilizzare testi uguali nei campi, questo perché sarebbe uno spreco di spazio dove poter inserire preziose parole chiave.
Nome del file
Come già detto in precedenza, le foto vanno rinominate con nomi adeguati e parole chiave, utilizzando il simbolo meno (-) o l’underscore (_) per separare le parole.
Infatti Google per determinare il ranking del tuo sito nei risultati di una ricerca, oltre al testo, analizza anche i nomi dei file all’interno della pagina.
Inoltre durante la ricerca per immagini, utilizzata da molti per la ricerca di prodotti, Google restituisce come risultato le immagini contenenti le parole chiave giuste e i
Il nome del file è quello che attribuiamo durante l’esportazione dei file durante il passaggio relativo al ridimensionamento delle immagini.
Se invece le tue immagini sono già state ottimizzate per quanto riguarda dimensioni, formato e peso dovrai semplicemente rinominarle.
Tag ALT
Il tag Alt corrisponde al campo di WordPress “Testo Alternativo” ed è quello più importante poiché è quello che lo spider di Google legge per capire cosa rappresenta l’immagine.
Didascalia
Viene utilizzato per inserire una didascalia che appare sotto l’immagine, negli articoli di blog come questo ad esempio, mentre negli e-commerce viene nascosta in genere. Anche se spesso non visibile sui prodotti degli e-commerce, può essere utilizzato per rafforzare il contesto semantico dell’immagine e aumentare la rilevanza.
Ha anche il vantaggio di aumentare il conteggio delle parole che fanno parte del testo ed essendo una frase singola può essere ben ottimizzata a livello SEO.
Gli altri elementi nell’editor dei media di WordPress
Sull’editor dei media di WordPress troverete anche altri due campi di cui il primo ha un’influenza marginale rispetto a quelli descritti prima e il secondo invece non influisce per niente, i campi sono:
• Attributo Title: L’attributo Title corrisponde al campo “Titolo” di WordPress, è quella frase che si vede quando si passa con il mouse sopra ad una foto. É nato per permettere a persone con difficoltà visive di poter ascoltare, attraverso dei browser appositi, il titolo delle immagini e poter comprendere il punto previso della pagina in cui è posizionata e quello che rappresenta. Google ha deciso di renderne marginale l’influenza sulla SEO poiché in molti inserivano molte parole chiave che rendevano le frasi necessarie per essere ascoltate incomprensibili.
• Descrizione: Non ha nessuna rilevanza a livello SEO, viene utilizzato internamente da WordPress per tenere traccia di ciò che contengono le immagini nella lista dei media;
Come impostare le proporzioni su Woocommerce
Hai seguito tutti i passaggi alla lettera, le foto sono di buona qualità e tutte della stessa dimensione, ma vengono tagliate nella pagina catalogo?
Molto probabilmente il problema è riconducibile alle impostazioni di WordPress, può essere risolto facilmente andando a configurare tramite “Personalizza” i parametri relativi alla miniatura e alle foto dei prodotti, ecco come fare:
Innanzitutto bisogna andare in “Personalizza”, poi cliccare su “Woocommerce” e “Immagini del prodotto”, qui possiamo andare a settare le proporzioni e la dimensione delle immagini.
Proporzioni immagine prodotto
Per quanto riguarda l’immagine del prodotto non viene ritagliata, infatti si va a specificare solo la larghezza massima e l’altezza viene calcolata in automatico in base alla dimensione originale dell’immagine.
Proporzioni miniatura
Le miniature invece, sono le foto utilizzate per i prodotti nel catalogo, possono essere ritagliate in base alle proporzioni desiderate o lasciarle secondo le proporzioni originali. Come primo campo è presente quello per definire la larghezza massima, in genere si utilizza 300px. Se nei passaggi precedenti hai tagliato e ridimensionato le tue foto, ad esempio, a 1000×1200 puoi inserire come ritaglio personalizzato 300×400, selezionando l’opzione “Nessun ritaglio” si hanno le stesse dimensioni, ma con il rischio che ci possa essere qualche foto con proporzioni diverse che renderebbe disordinata e poco armoniosa la disposizione dei prodotti.
