10 suggerimenti per ottimizzare foto e immagini sui motori di ricerca

Per chi gestisce un negozio online, è essenziale saper ottimizzare foto e immagini sui motori di ricerca. Volete attrarre gli acquirenti che consultano le immagini su Google o ridurre i tempi di caricamento del vostro sito? In ogni caso, dovete provvedere a ottimizzare foto e immagini per riuscire nell’obiettivo.

Cosa significa “ottimizzare foto e immagini” di un sito web?

Ottimizzare foto e immagini consiste nel ridurre al minimo le dimensioni dei file senza comprometterne la qualità grafica, per velocizzare il caricamento delle pagine. In più, la SEO delle immagini è volta a favorire il posizionamento su Google e sugli altri motori di ricerca.

Vi è mai capitato di porvi le seguenti domande e di non riuscire a rispondere?

• Perché quando cerco su Google non appaiono le foto dei miei prodotti?
• Devo aggiungere gli attributi “alt” alle mie immagini?
• Qual è la differenza tra JPEG, GIF e PNG? E quale formato è meglio usare?

Oggi avrete finalmente delle risposte, perché stiamo per approfondire questi ed altri argomenti.

Ecco come ottimizzare foto e immagini per il web:

1. Nominate i file immagine in modo semplice e descrittivo.
2. Ottimizzate attentamente gli attributi alt.
3. Scegliete con cura le dimensioni dell'immagine e le angolazioni del prodotto.
4. Riducete le dimensioni dei file di immagine.
5. Scegliete il formato giusto.
6. Ottimizzate le miniature.
7. Usate una sitemap di immagini.
8. Attenzione alle immagini decorative.
9. Prestate attenzione se utilizzate reti di distribuzione dei contenuti (CDN).
10. Testate le vostre immagini.

 

1. Nominate i file immagine in modo semplice e descrittivo

Un errore frequente è quello di importare sul sito centinaia di foto prodotto mantenendo il nome del file assegnato dalla videocamera.

In ottica SEO, è importante nominare i file immagine utilizzando parole chiave pertinenti, che favoriscano il posizionamento della pagina web sui motori di ricerca. Attribuire ai file nomi descrittivi e ricchi di parole chiave è fondamentale per ottimizzare foto e immagini, perché i motori di ricerca non si limitano a scansionare il testo sulla vostra pagina web, ma scansionano anche i nomi dei file immagine.

Esempio:

Prendete questa immagine.

Potete mantenere il nome generico assegnato dalla vostra videocamera (ad esempio, DCMIMAGE10.jpg). Ma è molto meglio rinominare il file in “2012-Ford-Mustang-LX-Rossa.jpg”.

Pensate a come i clienti cercano i prodotti sul vostro sito web. Quali termini usano più spesso nella ricerca? Facendo riferimento all’'esempio sopra, chi vuole comprare un’auto potrebbe cercare:

• 2012 Ford Mustang LX Rossa
• Ford Mustang LX Rossa 2012
• Ford Mustang LX 2012 Rossa

Consultate i dati analitici del vostro sito per individuare i termini più utilizzati dai clienti nel cercare i vostri prodotti. Determinate le frasi di ricerca più comuni e usatele per la denominazione dei file immagine.

Non volete rinominare i file sulla base dei dati? Almeno assicuratevi di denominare le immagini con termini pertinenti, utili e il più possibile descrittivi.

Per comprendere l'importanza di assegnare un nome strategico ai file delle immagini sul vostro sito, date un'occhiata alle domande e risposte nella Community di Moz. Senza dubbio si tratta di un accorgimento che può migliorare la vostra SEO on page, aiutando le vostre pagine e immagini a raggiungere un migliore posizionamento tra i risultati di ricerca.

 

2. Ottimizzate attentamente gli attributi alt

Un attributo “alt” è il testo alternativo che il browser mostra quando non riesce a riprodurre un’immagine. Gli attributi alt sono usati anche per l'accessibilità web. Inoltre, se le impostazioni del browser lo consentono, il testo dell’attributo alt viene mostrato passando col mouse sull’immagine.

Tra le altre cose, la presenza degli attributi alt aggiunge valore SEO al vostro sito web. In particolare, l’inserimento di un testo alternativo appropriato, che includa parole chiave pertinenti alle immagini, può aiutarvi ad ottenere un migliore posizionamento sui motori di ricerca. Di fatto, l'uso di attributi alt è probabilmente il miglior modo per rendere visibili i vostri prodotti di ecommerce tra le immagini di Google e nella ricerca sul web.

Diamo un'occhiata al codice di un attributo alt.

Se volete ottimizzare foto e immagini di prodotto del vostro sito, la priorità numero uno è corredare ciascuna di esse di un attributo alt.

Ecco alcune semplici regole per gli attributi alt:

• Descrivete l’immagine in un linguaggio semplice, proprio come avete fatto per i nomi dei vostri file immagine.
• Se vendete prodotti con numeri di modello o numeri di serie, utilizzateli nei vostri attributi alt.
• Non riempite gli attributi alt di parole chiave (es. "ford mustang auto sportiva acquista ora al miglior prezzo economico in vendita").
• Meglio non utilizzare gli attributi alt per le immagini decorative; altrimenti, i motori di ricerca potrebbero penalizzarvi per l'ottimizzazione eccessiva.

Infine, fate delle verifiche periodiche sul codice delle vostre pagine web, assicurandovi che tutti i campi degli attributi alt siano compilati correttamente. Rimarrete sorpresi nel constatare quanti dettagli possono sfuggire quando ci si muove alla velocità degli imprenditori.

 

3. Scegliete con cura le dimensioni dell'immagine e le angolazioni del prodotto

È prassi comune mostrare più angolazioni del prodotto. Tornando all'esempio della Ford Mustang, non conviene mostrare l'auto da una sola angolazione, specialmente se l’intento è quello di venderla. È nel vostro interesse mostrare finiture interne, parte posteriore e in particolare lo spoiler, cerchi e motore.

Il modo migliore per sfruttare le foto aggiuntive è compilare i campi con gli attributi alt, creando un testo alternativo unico per ogni foto.

Esempi:

• Per il file nominato “2012-Ford-Mustang-LX-Rossa-pelle-finiture-interne.jpg”, potremmo usare l'attributo alt “2012 Ford Mustang LX Rossa pelle finiture interne”.
• Mentre, per il file “2012-Ford-Mustang-LX-Rossa-Parte-Posteriore-Spoiler.jpg”, potremmo usare l'attributo alt di: alt = “2012 Ford Mustang LX Rossa Parte Posteriore Spoiler”.

In sostanza, la chiave per attrarre potenziali clienti sul vostro sito web è aggiungere termini descrittivi all’alt di base delle immagini. Se fate questo lavoro extra, Google vi ricompenserà in termini di traffico.

Attenzione con le immagini grandi

Forse volete pubblicare anche delle immagini grandi, per fornire una visuale più particolareggiata ai vostri visitatori. Certo, questo può contribuire a migliorare l’esperienza utente.

Ma attenzione: evitate di pubblicare la versione grande dell’immagine sulla vostra pagina web semplicemente riducendo le sue dimensioni tramite il codice sorgente. Ciò rallenterebbe il caricamento della pagina, per via della notevole dimensione del file associato all'immagine.

Piuttosto, pubblicate sulla pagina un’immagine piuttosto piccola e offrite la possibilità di vederla in grande attraverso una finestra di pop-up o in una pagina web separata.

 

4. Riducete le dimensioni dei file di immagine

Considerate questi dati:

• Quasi il 50% dei visitatori non attende neanche 3 secondi per il caricamento di un sito ecommerce.
• ... e, a livello globale, il tempo medio di caricamento delle pagine web è in aumento.
• Amazon ha scoperto che, se il caricamento delle sue pagine dovesse rallentare di un solo secondo, perderebbe 1,6 miliardi di dollari l'anno.
• Google utilizza il tempo di caricamento delle pagine come fattore di ranking nel proprio algoritmo.

Quindi, cosa accade se le immagini del vostro sito faticano ad apparire sullo schermo e impiegano oltre 15 secondi a caricarsi? Semplice: i potenziali clienti tendono ad allontanarsi!

Come ottimizzare foto e immagini riducendo le dimensioni dei file?

Quando un cliente atterra su una pagina del vostro sito, può servire del tempo per il caricamento, a seconda della dimensione dei file sulla pagina. Più grandi sono i file, più tempo occorre.

Se siete commercianti Shopify, pensiamo noi a comprimere le immagini automaticamente, quindi non dovreste avere di questi problemi.

Se riuscite a ridimensionare le immagini e a velocizzare il caricamento delle pagine, meno visitatori abbandoneranno il vostro sito.

Come ottimizzare foto e immagini con Photoshop

Un modo per ridurre le dimensioni dei file immagine è utilizzando il comando “Salva per web” in Adobe Photoshop, che si trova su: “File”, “Esporta”, “Salva per web (versione precedente)”. Con questa opzione, si regola l'immagine in modo che la dimensione del file diventi più bassa possibile, tenendo presente la qualità dell'immagine.

• Qualità: regolabile dal menu a tendina in alto a destra (ad esempio 70).
• Formato file: selezionabile dal menu a tendina in alto a destra (ad esempio JPEG).
• Ottimizzazione: opzione selezionabile dalla casella di controllo in alto a destra “Ottimizzato”.
• Colore: trovate la casella di controllo sulla destra (“converti in sRBG”).
• Ridimensionamento e nitidezza: regolabili nell'angolo in basso a destra (L: e A :).
• Dimensione del file prevista: trovate questo nell'angolo in basso a sinistra (ad esempio 97,52 K).

Potete anche scegliere di utilizzare la funzione “Esporta come”.

Come ottimizzare foto e immagini senza Photoshop

Non avete Adobe Photoshop? Esistono numerosi strumenti online che potete usare per modificare le immagini. Adobe ha anche un'applicazione gratuita destinata all'editing delle immagini per smartphone e tablet: Photoshop Express. Questo strumento non offre tutte le funzionalità di Adobe Photoshop in versione desktop, ma permette di apportare modifiche di base alle immagini, senza dover spendere una fortuna.

Altri straordinari strumenti online per l’editing delle immagini:

• PicMonkey è stato descritto dagli esperti come uno “sbalorditivo strumento di fotoritocco”.
• PIXLR è decisamente user-friendly; è un'app al 100% gratuita per lo smartphone, che consente di modificare le foto ovunque ci si trovi.
• Canva è un altro editor di immagini online piuttosto avanzato.

Infine, c'è sempre GIMP. È un'applicazione software open source gratuita per la modifica delle immagini, compatibile con Windows, Mac e Linux. Può modificare le immagini al pari di Photoshop, anche se è uno strumento un po’ meno avanzato. Comunque, come applicazione gratuita per l'editing delle immagini è imbattibile.

Qual è la dimensione ideale dei file immagine?

Con le immagini per ecommerce, una buona regola è cercare di mantenere la dimensione dei file sotto i 70kb. A volte può essere difficile, specialmente nel caso delle immagini più grandi.

 

5. Scegliete il formato giusto

I tipi di file comunemente utilizzati per pubblicare immagini sul web sono 3: JPEG, GIF e PNG.

Vediamo le caratteristiche di questi 3 formati e quale effetto hanno sulla stessa immagine:

JPEG, dimensioni immagine: 30kb

Il formato JPEG (o .jpg) è in uso da moltissimo tempo. Di fatto, è diventato il formato standard per le immagini in internet. Le immagini JPEG possono essere notevolmente compresse, il che si traduce in immagini di qualità con file di dimensioni ridotte. Nell'immagine sopra, il formato JPEG consente una qualità decente con dimensioni di file ridotte.

GIF, dimensioni immagine: 35kb

Le immagini GIF (.gif) sono di qualità inferiore rispetto alle immagini JPEG. Questo formato è utilizzato per le immagini più semplici, come icone ed elementi decorativi. Il GIF supporta anche l'animazione, come sicuramente già saprete.

Per ottimizzare foto e immagini, il formato GIF è perfetto nel caso di elementi semplicissimi e con pochi colori. Ma le immagini complesse e le fotografie non si presentano al meglio nel formato GIF, specialmente se sono di grandi dimensioni.

Finché la foto è piccola, come nel caso del MacBook qui sopra, possono non esserci problemi di visualizzazione col GIF.

PNG-8, dimensioni immagine: 30kb

PNG-24, dimensioni immagine: 107kb

È in aumento la popolarità delle immagini PNG come alternativa a quelle in formato GIF. Il formato PNG supporta molti più colori rispetto al GIF e non si deteriora nel tempo con i salvataggi, come avviene per il JPEG. Malgrado l’utilizzo crescente del PNG, va detto che i file salvati in questo formato hanno una dimensione maggiore di quelli salvati in JPEG.

Il formato PNG-24 presenta un file di dimensioni 3 volte maggiori rispetto a quelle nel formato PNG-8. Questo è il motivo per cui occorre prestare attenzione con i file PNG.

Ecco un esempio estremo, in cui la dimensione del file è stata mantenuta costante a 24kb per tutti e tre i tipi di file:

Come potete vedere, il file JPEG è chiaramente il “vincitore”, in questo caso. Per mantenere la dimensione del file altrettanto ridotta, le immagini in GIF e PNG perdono in termini di qualità.

Ecco alcuni suggerimenti da ricordare quando si sceglie il formato delle immagini:

• Per ottimizzare foto e immagini dei siti ecommerce, i file JPEG sono spesso la soluzione migliore. Offrono la migliore qualità con dimensioni dei file più piccole.
• Non utilizzate mai il formato GIF per le immagini di prodotto grandi. La dimensione del file sarà molto grande e non c'è un buon modo per ridurla. Usate il GIF solo per miniature e immagini decorative.
• Il formato PNG può essere una buona alternativa sia al JPEG che al GIF. Se disponete solo di foto prodotto in formato PNG, cercate di usare il formato PNG-8 anziché il PNG-24. Il PNG è molto adatto per le immagini decorative semplici, con dimensioni estremamente ridotte.

Con la maggior parte dei software di photo editing, è possibile salvare le immagini in uno qualsiasi dei formati di cui abbiamo parlato.

 

6. Ottimizzate le miniature

Molti siti di ecommerce utilizzano le miniature, specialmente nelle pagine di categoria. È una soluzione per presentare rapidamente i prodotti senza occupare troppo spazio.

Miniature

Le miniature vanno benissimo, ma attenzione; possono rappresentare un “killer silenzioso”. La vittima? La velocità di caricamento delle vostre pagine. Le miniature vengono solitamente presentate nei punti critici del processo di acquisto. E se impediscono il caricamento rapido delle pagine di categoria, potreste trovarvi a perdere dei potenziali clienti. (Nota: i commercianti Shopify non devono preoccuparsi dell'ottimizzazione delle miniature; siamo noi a provvedere a questo aspetto per voi).

Come ottimizzare le miniature?

• Riducete al minimo le dimensioni dei vostri file di anteprima. In questo caso può valere la pena di rinunciare in parte alla qualità delle immagini, in favore di una dimensione ridotta dei file. Ricordate: l'impatto cumulativo delle miniature sul tempo di caricamento della vostra pagina sarà enorme.
• Variate il testo dell’attributo alt rispetto a quello che utilizzerete per la versione più grande delle stesse immagini. Differenziate nettamente il vostro alt text. L'ultima cosa che volete è che la miniatura venga indicizzata al posto dell'immagine più grande. Per evitare questa evenienza, potrebbe essere addirittura meglio omettere il testo alternativo.

 

7. Usate una sitemap di immagini

Il vostro sito utilizza gallerie Javascript, immagini pop-up o altri modi "appariscenti" per migliorare l'esperienza di acquisto complessiva? Allora, ricorrete alle sitemap di immagini: vi aiuteranno a far notare le vostre immagini a Google.

I web crawler non possono eseguire la scansione di immagini che non vengono richiamate specificamente nel codice sorgente della pagina web. Pertanto, per consentire ai crawler di rilevare le immagini non identificate, dovete elencare la loro posizione in una sitemap dedicata alle immagini.

Potete inserire la seguente riga nel vostro file robots.txt, mostrando il percorso della vostra sitemap:

Sitemap: http://esempio.com/sitemap_location.xml

In alternativa, potete inviare la sitemap a Google attraverso la Search Console.

Google offre varie linee guida per la pubblicazione delle immagini, utili per far ottenere al vostro sito web un migliore posizionamento nelle SERP. Tra l’altro, potete utilizzare le stesse sitemap di Google per fornire al motore di ricerca ulteriori informazioni sulle vostre immagini. E questo potrà aiutare Google a trovare ancora più immagini del vostro sito.

L'uso delle sitemap non garantisce che le vostre immagini vengano indicizzate da Google; ma, per quel che riguarda la SEO, è certamente un passo nella direzione giusta. Gli strumenti per i webmaster di Google offrono molti suggerimenti per la formattazione corretta delle sitemap.

È importante aggiungere tag specifici a tutte le vostre immagini. Ed è possibile creare una sitemap separata per elencare esclusivamente le immagini. L'importante è aggiungere tutte le informazioni necessarie, utilizzando tag specifici, a qualsiasi sitemap già esistente o futura. Seguite queste linee guida di Google per creare una sitemap con informazioni sulle immagini.

 

8. Attenzione alle immagini decorative

I siti web hanno spesso un assortimento di immagini decorative: immagini di sfondo, pulsanti, bordi, ecc. Qualunque elemento visivo non correlato al prodotto può essere considerato un'immagine decorativa.

Sebbene le illustrazioni possano aggiungere fascino estetico ad una pagina web, la mole di risorse può diventare voluminosa, causando tempi lunghi di caricamento. Perciò, valutate con attenzione la necessità delle immagini decorative; evitate che possano compromettere la capacità del vostro sito web di convertire i visitatori in clienti.

Controllate le dimensioni di tutte le immagini decorative sul vostro sito e utilizzate un template che riduca al minimo le dimensioni dei file.

Ecco alcuni suggerimenti per ridurre le dimensioni dei file delle illustrazioni:

• Per le immagini che compongono bordi o semplici motivi, utilizzate il formato PNG-8 o il formato GIF. È possibile creare immagini di buona qualità dalle dimensioni estremamente ridotte.
• Cercate di usare il CSS per creare delle aree colorate, invece di usare le immagini; e usate il più possibile lo stile CSS per sostituire le immagini decorative.
• Verificate con attenzione la grande immagine di sfondo in stile “carta da parati”. Può trattarsi di un file enorme. Riducetelo il più possibile senza deteriorare la qualità dell'immagine.

Un trucco che potete utilizzare per ridurre le dimensioni dell'immagine di sfondo è quello di risparmiare sulla parte centrale, facendola diventare a tinta unita o addirittura trasparente. Così, potrete ridurre notevolmente le dimensioni del file.

 

9. Prestate attenzione se utilizzate reti di distribuzione dei contenuti (CDN)

In realtà i commercianti Shopify non devono preoccuparsi di questo aspetto, dato che la nostra piattaforma offre una soluzione hosted; ma altri dovrebbero prestare molta attenzione. Le reti di distribuzione dei contenuti (CDN, Content Delivery Networks) sono un luogo ideale per ospitare immagini e altri file multimediali. Possono aumentare la velocità di caricamento della pagina e aiutare a risolvere i problemi di larghezza di banda.

L'unico inconveniente riguarda i link esterni. Come forse saprete, questi sono fondamentali per la SEO: più backlink avete, migliore è il vostro posizionamento sui motori di ricerca.

Collocando le vostre immagini su un CDN, è molto probabile che rimuoviate l'immagine dal vostro dominio, posizionandola sul dominio del CDN. Quindi, quando qualcuno si collega alla vostra immagine, in realtà si sta collegando al dominio del CDN.

Perciò, ecco le best practice da osservare:

• Solo perché qualcosa è trendy non significa doverla seguire pedissequamente. Valutate se usare una rete CDN sia davvero la mossa migliore per la vostra attività.
• Se il vostro sito web produce grandi entrate ogni mese, allora il CDN è molto probabilmente una buona idea, dal momento che può contribuire a risolvere i problemi di larghezza di banda.
• Se il vostro sito riceve solo migliaia di visitatori al giorno in questo momento, è probabile che il vostro hosting attuale sia in grado di gestire il carico (la nostra guida ai migliori hosting, in caso stiate pensando di cambiare).

Esistono delle soluzioni per aggirare i problemi SEO associati alle reti CDN; ma assicuratevi che sia un esperto a consigliarvi sulla strategia migliore.

 

10. Testate le vostre immagini

Fondamentalmente, ottimizzare foto e immagini deve contribuire ad aumentare i vostri profitti. Abbiamo parlato di come ridurre le dimensioni dei file e far sì che i motori di ricerca indicizzino le vostre immagini. Ma perché non testare le immagini per vedere quali generano più conversioni?

• Verificate il numero di immagini prodotto per pagina. I tempi di caricamento sono un problema per alcuni siti di ecommerce. Perciò, è possibile che ridurre il numero di immagini per pagina aumenti la percentuale di clic e le vendite. Viceversa, per aumentare le vendite, potrebbe essere opportuno migliorare la user experience presentando molte immagini su ogni pagina. In definitiva, l'unico modo per scoprire quale sia la soluzione migliore è condurre dei test.
• Provate quali sono le angolazioni preferite dai vostri clienti. Mostrando ai clienti ciò che vogliono vedere, potreste fidelizzarli maggiormente. Un ottimo modo per capire le loro preferenze è condurre un sondaggio. Chiedete ai clienti quali tra le foto dei vostri prodotti preferiscono. Interagire con i clienti è buona abitudine da prendere, in generale. Anche in questo caso, verificate i dati raccolti, mediante dei test.
• Testate quanti prodotti è meglio includere nelle pagine di categoria. Quanti prodotti elencare nelle pagine di categoria: 10, 20, 100? Fate dei test, per vedere cosa funziona meglio secondo i vostri clienti.

Ottimizzare foto e immagini significa renderle funzionali, mantenendole belle

Ora finalmente sapete come ottimizzare foto e immagini di prodotto del vostro sito ecommerce. Conoscete alcune strategie SEO per far sì che le foto dei vostri prodotti appaiano tra le immagini di Google. Sapete come sfruttare appieno gli attributi alt. Distinguete i diversi formati di file e sapete quando scegliere l’uno o l’altro.

Fateci sapere nei commenti se avete altri consigli utili.

---

Articolo originale di Mark Hayes, tradotto da Maria Teresa Cantafora.