10 suggerimenti IMPORTANTI per ottimizzazione immagini

Se siete in procinto di aprire un negozio online, l’ottimizzazione immagini è un’arte che sicuramente volete imparare a padroneggiare al meglio. Dall’attrarre gli acquirenti che sfogliano le immagini di Google alla riduzione dei tempi di caricamento – l’ottimizzazione delle immagini è un’attività importante per la costruzione di un’attività e-commerce di successo.

Siete mai rimasti svegli la notte a pensare:

• Perché quando faccio una ricerca immagini su Google le foto dei miei prodotti non appaiono?
• Devo aggiungere il “Tag Alt” alle mie immagini?
• Qual è la differenza tra JPEG, GIF e PNG – dovrei usare un formato invece di un altro?

In questo articolo risponderò a queste domande e molto di più. Preparatevi ad un’immersione profonda nei 10 suggerimenti da conoscere assolutamente per ottimizzare le immagini:

1. Rinomina le immagini in maniera descrittiva e utilizzando un linguaggio semplice (italiano)

È davvero facile scorrere centinaia di foto di prodotti mantenendogli il nome di default assegnatogli dalla fotocamera. Ma prima che prendiate questa abitudine vediamo perché non è una buona idea lasciare il nome della fotocamera.
Quando si tratta di SEO, è importante usare parole chiave accettabili che aiutino il rank della vostra pagina web nei motori di ricerca. Creare dei nomi descrittivi e ricchi di parole chiave è cruciale per l’ottimizzazione delle immagini. I motori di ricerca non scansionano solo i testi della vostra pagina web, ma cercano anche le parole chiave inserite all’interno dei nomi dei file dell’ immagine.
Vediamo questa immagine come esempio:
Potete anche usare il nome generico che la fotocamera dà all’immagine (es. DCMIMAGE10.jpg), tuttavia sarebbe molto meglio se rinominaste il file in questo modo: 2012-Ford-Mustang-LX-Red.jpg.
Pensate anche a come i vostri i clienti cercano i prodotti nel vostro sito web. Quali modelli di denominazione usano quando fanno la ricerca? Nell’esempio sopra, un acquirente di auto potrebbe fare la ricerca inserendo questi termini:

• 500 Abart 2015
• Fiat 500 Abarth 2015
• 2015 Fiat 500 Abarth

Una buona abitudine è quella di fare un controllo all’interno dell’ account Google Analytics del vostro Sito Web  e vedere quali  frasi chiave utilizzano i vostri clienti quando fanno una ricerca. Una volta determinati i modelli più comunemente utilizzati, applicate quella formula al nome dell’immagine.
Se non volete fare questo sforzo, assicuratevi almeno di utilizzare delle buone parole chiave quando nominate le immagini (e cercate di essere descrittivi!).
Controllate queste domande e risposte, Q&A, del sito seomoz.org per capire l’importanza di nominare i file delle immagini del vostro sito. Può definitivamente incrementare la vostra SEO e aiutare il vostro sito web e le vostre immagini ad ottenere un alto rank.

2. Ottimizzare i vostri “Tag Alt” in modo intelligente

I Tag Alt sono un testo alternativo per le immagini, usato quando un browser non è in grado di renderizzarle adeguatamente.  Anche quando l’immagine è renderizzata, se si passa sopra con il puntatore del mouse, potete vedere il tag alt creato per quell’immagine (a seconda delle impostazioni del vostro browser).
L’attributo alt aggiunge valore SEO al vostro sito web. Aggiungendo alle immagini dei tag alt appropriati aiutate il vostro sito web ad ottenere un posizionamento migliore nei motori di ricerca, associando le parole chiave alle immagini. Che usando il tag “alt”, i vostri prodotti e-commerce abbiano più probabilità di apparire nella classifica immagini di Google e nella ricerca web è un dato di fatto.
Diamo uno sguardo al codice sorgente di un tag alt:

La priorità numero 1, quando si tratta di ottimizzazione delle immagini, è quella di compilare ogni tag alt per ogni singola immagine del vostro sito.
Ecco alcune semplici regole quando si parla di tag alt:

• Descrivete le vostre immagini con un linguaggio semplice, esattamente come fate per il nome del file immagine.
• Se vendete dei prodotti che hanno un numero di modello o un numero seriale, usateli nel tag alt.
• Non inserite parole chiave a caso nei vostri tag alt (ad esempio: alt=”Punto Fiat GT in vendita a prezzi bassi”).
• Non usate i tag alt per le immagini decorative. I motori di ricerca potrebbero penalizzarvi per eccesso di ottimizzazione.

Infine, fate sempre un controllo periodico del vostro sito web.

Visionate il codice delle vostre pagine web e controllate che i tag alt siano compilati Oppure se su WordPress potete controllare dal media Manager.

3. Elaborate delle Strategie per le Dimensioni delle Immagini e per le angolazioni visuali del prodotto

Una tendenza comune in questi giorni è quella di mostrare diverse angolazioni di un prodotto. Torniamo all’esempio della 500 Abarth, di sicuro non volete mostrare un solo scatto della vettura – specialmente se state cercando di venderla. Per cui è nel vostro interesse mostrare foto:

• Degli interni
• Della parte posteriore,
• Della parte Laterale
• Con i primi piani dei cerchioni
• Dentro il cofano.

E il modo migliore di sfruttare al meglio queste foto extra del prodotto e compilare i tag alt. Per farlo dovete creare dei tag alt univoci per ogni singolo scatto del prodotto:

• 500-Fiat-Abarth-Interni-Rossi-Pelle.jpg -> usando il tag alt: alt = ” Fiat 500 Abarth Interni rossi Pelle”
• 500-Fiat-Abarth-Visione-Laterale-Destra.jpg -> usando il tag alt: alt = “2012 500 Fiat Abarth Visione Laterale Destra”

La chiave qui sta nell’aggiungere delle descrizioni al tag alt di base in modo tale che i potenziali navigatori arrivino al vostro sito. Se fate questo extra lavoro un pò noioso, Google vi ricompenserà con centinaia di navigatori affamati.

Un pò di cautela con le Immagini di grandi proporzioni

Ora, vi piacerebbe fornire, ai vostri visitatori, delle immagini grandi, che significa un grande miglioramento dell’esperienza utente – ok, solo fate attenzione.
Qualsiasi cosa facciate, non mettete dentro la pagina del sito e-commerce l’immagine più grande che avete, riducendone semplicemente le dimensioni scalandola a mano o con il codice.

Questa azione incrementerà i tempi di caricamento della pagina a causa delle grandi dimensioni del file associate all’immagine.
Piuttosto, rimpicciolite l’immagine e fornite la possibilità di visualizzarla in grande in un pop-up(o lightbox) o in un’altra pagina web.

4. Riducete le Dimensioni del File delle Vostre Immagini

Considerate questo:

• La maggior parte dei consumatori attende circa per 3 secondi il caricamento di un sito web su un computer desktop o un portatile.
• …e per circa 5 secondi sui dispositivi mobili.
• Amazon ha rilevato che se le sue pagine rallentassero il caricamento di 1 secondo, perderebbe $1.6 miliardi l’anno.
• Google utilizza il tempo di caricamento delle pagine come un importante fattore nell’algoritmo del ranking.

Se avete immagini che lentamente “sbavano” caricandosi verso il basso per lo schermo e richiedono più di 10-15 secondi per caricare – beh, allora potete dire addio al cliente!

Quindi cosa si può fare?

Quando un cliente va nel vostro sito, potrebbe dover aspettare un po’, e questo dipende dalla grandezza dei vostri file. Specialmente con le immagini, più grande è la dimensione del file e più tempo è richiesto alla pagina per caricare.

Con WordPress avete un Tool per ridurre le immagini dall’interno dell’area amministrativa
Se riuscite a diminuire la dimensione dei file delle immagini nella vostra pagina web e aumentare la velocità di caricamento della pagina, perderete meno visitatori.
Un modo per ridurre la dimensione del file immagine è utilizzare il comando “Salva per il Web” di Adobe Photoshop. Utilizzando questo comando, potete ridurre la dimensione dell’immagine alla più bassa accettabile facendo però sempre attenzione alla qualità dell’immagine stessa.

E se non avete Photoshop?

Se non siete in possesso di Adobe Photoshop ci sono tantissimi strumenti online che potete utilizzare per modificare le immagini. Anche Adobe ha un’applicazione online per la modifica delle immagini su photoshop.com. Questo strumento online non possiede tutte le funzionalità presenti nella versione desktop di Adobe Photoshop, ma copre lo stesso tutte le opzioni base e soprattutto non vi costa un rene.
Altri notevoli strumenti di editing online sono:

• PicMonkey – è stato descritto dagli esperti come un “incredibile strumento di fotoritocco”.
• Pixlr – è user-friendly ed è disponibile l’app per smartphone gratis al 100%.
• FotoFlexer-  è un altro editor di immagini online piuttosto avanzato. FotoFlexer vi permette persino di lavorare con i livelli!
• Infine, c’è sempre GIMP. GIMP è un programma open-source e gratuito, di editing delle immagini eseguibile su Windows, Linux e Mac. Può fare tutto quello che fa Photoshop, ma è un po’ pesante. Però per essere un editor di immagini gratuito è imbattibile.

Quanto Dovrebbero Essere Grandi i File delle mie Immagini?

Una buona regola dell’ottimizzazione immagini . Per le immagini usate nell’e-commerce è quella di cercare di mantenere le dimensioni del file al di sotto dei 70kb. A volte può essere difficoltoso, in particolare con le immagini grandi, ma tra un attimo ne parleremo.

5. Sapere Quale Tipo di File Immagine Usare nelle Giuste Situazioni

Ci sono tre tipi di formati file immagine  più comuni che vengono utilizzati per inserire le immagini: JPEG, GIF e PNG.

Diamo un’occhiata ai tre tipi di file e a come influenzano la stessa immagine:
Le immagini JPEG (o .jpg) sono un vecchio tipo di file e sono diventate di fatto le immagini standard di internet. Le immagini JPEG possono essere considerevolmente compresse, e ciò si traduce in immagini di qualità con piccole dimensioni. Nell’immagine sopra, il formato JPEG offre una buona qualità e una dimensione piccola del file.

Le GIFs (.gif) sono immagini di qualità più bassa rispetto alle JPEG e sono utilizzate per immagini più semplici come le icone o le immagini decorative. Le GIF supportano anche le animazioni (as I’m sure all you Redditors know). Per quanto riguarda l’ottimizzazione dell’immagine, è fantastico usare le GIF per le immagini semplici della pagina web, che hanno pochi colori, ma per le immagini più complesse e le foto, il formato GIF non è sempre l’ideale – in particolare se si parla di immagini molto grandi.

L’immagine GIF del MacBook qua sopra è uno di quei casi in cui ce la scampiamo perché l‘immagine è abbastanza piccola da andar bene anche in formato GIF.

Le immagini PNG stanno diventando più popolari e si offrono come alternativa alle GIF.
Il formato PNG supporta più colori del formato GIF, e non si degradano nel tempo come quando salviamo più volte le immagini JPEG. Anche se ultimamente il formato PNG si usa sempre più spesso, le dimensioni del file sono ancora troppo grandi rispetto a quelle dei file in formato JPEG.

Da notare come l’immagine PNG-24 avrà una dimensione superiore oltre 3 volte  rispetto all’immagine nella versione PNG-8. Ecco perché dovete fare attenzione con il formato PNG.

Come potete vedere, il formato JPEG è chiaramente il vincitore. I GIF e i PNG invece devono degradare la qualità per mantenere una dimensione bassa del file.
Ecco alcuni suggerimenti da tenere a mente quando dovete scegliere il formato del file:

• Per la maggior parte delle situazioni nell’e-commerce – il format JPEG è il migliore. Offre la migliore qualità con la dimensione più piccola.
• Non usate mai il format GIF per le immagini di grandi dimensioni. La dimensione del file sarebbe molto grande e non c’è nessun modo per diminuirne la grandezza. Usate il GIF per i thumbnail e le immagini decorative.
• Il formato PNG può essere una buona alternativa sia al JPEG che al GIF. Se riuscite ad ottenere foto dei prodotti solo in formato PNG allora cercate di usare la versione PNG-8 invece che la versione PNG-24. Il PNG eccelle nelle immagini decorative a causa delle dimensioni estremamente ridotte del file.

La maggior parte dei software di editor di ottimizzazione immagini possono salvare i file in uno qualsiasi dei formati appena descritti.

6. Sapere come gestire i Thumbnail

Molti siti e-commerce utilizzano immagini in miniatura.  I thumbnail sono delle immagini in miniatura che indicano una categoria prodotto o una serie di prodotti all’interno di una pagine, e permettono all’utente di spostarsi velocemente su tali categorie senza grande dispendio di spazio.

I Thumbnail sono fantastici, ma fate attenzione – possono rivelarsi un killer silenzioso per il tempo di caricamento della pagina. In genere i Thumbnail vengono mostrati in un momento molto critico del processo di acquisto e se impediscono alle vostre pagine categoria di caricare – beh, avete perso un altro cliente.

• Rendete più piccola possibile la dimensione del file del thumbnail. Può valer la pena sacrificare la qualità della slide a favore di una dimensione più piccola del file. Ricordate, l’effetto cumulativo dei thumbnail ha un impatto enorme sui tempi di caricamento della pagina.
• Variate il testo del tag alt così da non avere un duplicato che usereste per le immagini più grandi del prodotto. Di fatto, create un testo alt completamente differente. L’ultima cosa che volete è vedere il thumbnail indicizzato al posto dell’immagine più grande. Un caso può essere lasciare il testo alt interamente vuoto.

7. Utilizzate le Sitemap per le immagini

Se il vostro sito usa gallerie JavaScript, immagini pop-up o altre vie “appariscenti” per migliorare l’esperienza d’acquisto – le Google sitemap per le immagini vi aiuteranno a far notare a Google le vostre immagini.
I web crawler non possono analizzare le immagini non richiamate dal codice sorgente della pagina web. Quindi per far sì che vengano a sapere di queste immagini, dovete elencare la loro posizione in una sitemap per le immagini.
Google mette a disposizione molte linee guida, che potete trovare qui, per la pubblicazione di una immagine che possono aiutarvi ad elevare il Posizionamento del vostro sito web nei motori di ricerca. Inoltre, è possibile utilizzare l’estensione per le immagini su Google Sitemaps così da fornire a Google più informazioni riguardo alle immagini presenti nel vostro sito web.

Facendo questo Google è in grado di trovare più immagini di quelle che altrimenti troverebbe attraverso i suoi motori di ricerca.
Sebbene l’utilizzo delle Sitemap non garantisca che le vostre immagini vengano indicizzate da Google, potete assolutamente incrementare l’ottimizzazione del vostro sitoweb e in particolare delle immagini.

Google Webmaster Tools ha molti suggerimenti per una corretta formattazione della vostra Sitemap e delle vostre immagini (per la Sitemap).
Con Google Sitemap è importante che aggiungiate dei specifici tag per tutte le immagini. Potete creare anche una Sitemap separata per elencare le immagini. La cosa importante è che vengano aggiunte tutte le informazioni necessarie, durante l’utilizzo di specifici tag, ad ogni Sitemap che avete creato o che creerete. Seguite queste linee guida suggerite da Google per creare la Sitemap con le informazioni delle immagini.

8. Prestate attenzione alle immagini decorative

I siti web presentano spesso un assortimento di immagini decorative come le immagini di sfondo, i pulsanti e i bordi. Qualsiasi cosa non inerente al prodotto può essere considerata un’immagine decorativa.
Sebbene le immagini decorative possono dare un certo fascino estetico alla pagina web, spesso risultano combinate a file di grandi dimensioni e rallentano i tempi di caricamento.  Pertanto è bene dare uno sguardo più da vicino a questo tipo di immagini in modo che non pregiudichino la capacità del vostro sito web di convertire i visitatori in clienti.

Prima di tutto, dovete controllare le dimensioni dei file di tutte le immagini decorative presenti nelle vostre pagine web e usare un template per ridurne al minimo le dimensioni.
Ecco alcune dritte per ridurre le dimensioni dei file delle immagini decorative:

• Per quanto riguarda le immagini chef anno parte dei bordi o dei pattern, trasformatele in PNG-8 o in GIF. Avrete delle belle immagini grandi poco più di un centinaio di byte!
• Se possibile usate il CSS per creare aree colorate da sostituire alle immagini. Utilizzatelo il più possibile per sostituire qualsiasi immagine decorativa. Riducetele il più possibile senza rovinare la qualità dell’immagine.
• Date un’occhiata più da vicino a quell’enorme immagine nello sfondo in stile carta da parati (at that large wallpaper-style background image). Questi possono essere file di enormi dimensioni.
• Riducetele il più possibile senza rovinare la qualità dell’immagine.

Un trucco che potete usare per ridurre la dimensione dell’immagine di sfondo è quello di tagliare al centro dell’immagine e metterci un colore piatto o trasparente. In questo modo la grandezza del file si riduce sostanzialmente.

9. Fate attenzione quando usate il Content Delivery Network

I commercianti di Shopify non devono preoccuparsi di questo dato che noi abbiamo una hosted solution, ma gli altri devono fare attenzione. I Content delivery networks (CDNs) stanno velocemente diventando il luogo in cui vengono ospitate le vostre immagini e gli altri media. Possono incrementare i tempi di caricamento della pagina e aiutano a risolvere i problemi correlati alla larghezza di banda.
L’unico inconveniente si ha quando si tratta di backlink. Come forse saprete, i backlink sono fondamentali per la SEO e più backlink avete meglio si comporta il vostro sito nei motori di ricerca.
Inserendo le vostre immagini su un CDN, state rimuovendo l’immagine dal vostro dominio e la state spostando sul dominio del CDN. Quindi, quando qualcuno clicca sulla vostra immagine, di fatto sta cliccando sul link del contenuto del CDN.
Pertanto la migliore regola generale è:

• Solo perché qualcosa è “trendy” non significa che dobbiate seguirlo come pecore. Stabilite prima se è davvero la mossa migliore da fare per la vostra attività.
• Se il vostro sito sta facendo un sacco di attività ogni mese, allora appoggiarsi ad un CDN è una buona idea dato che risolve i problemi di banda larga.
• Se il vostro sito rimane nel “migliaio” di visite al giorno, c’è la possibilità che il vostro attuale hosting sia in grado di gestire il carico corrente.

Ci sono dei modi per aggirare i problemi SEO associate al CDN, ma prima di fare qualcosa assicuratevi di avere il supporto di un professionista.

10. Testate le Vostre Immagini!

Il perno centrale dell’ottimizzazione delle immagini è quelli di contribuire ad incrementare i vostri profitti. Abbiamo parlato di come ridurre delle dimensioni e di come ottenere l’indicizzazione da parte dei motori di ricerca – ma che dire riguardo al testare le immagini e vedere che cosa si converto in maggiore attività? (but what about testing images to see what converts into more business?)

• Verificate il numero delle immagini del prodotto per pagina: dato che il tempo di caricamento è un problema per alcuni siti e-commerce non-hosted, è possibile che riducendo il numero delle immagini in una pagina aumentino i click-through rates and sales. Ma è anche possibile che fornendo molte immagini per pagina, come differenti angolazioni del prodotto, si migliori l’esperienza utente e che questo porti a maggiori vendite. L’unico modo per scoprire tutto questo è testando.
• Verificate quali angolazioni preferiscono i vostri clienti: potreste scoprire che fornendo la visuale che vuole vedere il cliente, questo aumenti la fedeltà complessiva. Un bel modo per scoprirlo è quello di intervistare i vostri clienti circa quello che preferiscono quando guardano gli scatti fotografici dei prodotti. In generale, intervistare i vostri clienti è una buona abitudine per ottenere informazioni.
•  Verificate quanti prodotti dovreste avere nell’elenco delle pagine categoria: 10, 20, 100 prodotti? Verificate il numero dei prodotti nella lista per vedere cosa funziona meglio per i vostri clienti e la loro esperienza di acquisto.