Come ottimizzare le immagini

10 consigli per ottimizzare le tue immagini per la SEO

Con la proliferazione di interfacce e connessioni Internet, le prestazioni di un sito Web e il tempo di caricamento della pagina stanno diventando questioni sempre più importanti. Che si tratti di migliorare l’esperienza dell’utente o di ottimizzare le ricerche organiche, la gestione dei file di immagine è una leva con cui lavorare in modo rigoroso. Risponderemo insieme alla domanda che molti dei nostri clienti ci fanno: come ottimizzare le immagini per il web?

Gli sforzi per migliorare le tue immagini devono essere fatti parallelamente su due assi: l’ ottimizzazione del peso delle tue immagini e la rilevanza delle informazioni trasmesse ai robot dei motori di ricerca.

Che cos’è l’ottimizzazione delle immagini?

L’ottimizzazione delle immagini consiste nel ridurre il più possibile le dimensioni del file delle immagini senza sacrificare la qualità, in modo che i tempi di caricamento della pagina siano ridotti. Questo perché le immagini dei tuoi prodotti e le immagini decorative sono classificate su Google e su altri motori di ricerca di immagini.

Ti sei mai posto le seguenti domande?

• Perché le foto dei miei prodotti non vengono mai visualizzate quando eseguo una ricerca di immagini su Google?
• Devo aggiungere attributi alt alle mie immagini e perché?
• Qual è la differenza tra JPEG , GIF e PNG ? Quando dovrei usare l’uno o l’altro?

Come ottimizzare le immagini per il web:

• Assegna un nome alle tue immagini in modo descrittivo e in un linguaggio semplice
• Ottimizza attentamente i tuoi attributi alt
• Aggiungi una didascalia alle tue immagini
• Scegli con saggezza le dimensioni della tua immagine
• Riduci il peso delle tue immagini
• Scegli il formato file giusto
• Ottimizza le tue miniature
• Usa sitemap di immagini
• Gestire le immagini “decorative”
• Metti alla prova le tue immagini

Dai un nome alle tue immagini in modo descrittivo e in un linguaggio semplice

È molto facile caricare centinaia di foto di prodotti sul tuo sito e mantenere i nomi di file predefiniti assegnati dalla fotocamera .

Quando si tratta di SEO delle immagini, è importante utilizzare parole chiave pertinenti per aiutare la tua pagina web a posizionarsi sui motori di ricerca. I motori di ricerca non analizzano solo il testo della tua pagina web, ma anche i nomi delle tue immagini.

Prendi questa immagine, per esempio.

Puoi utilizzare il nome generico assegnato all’immagine dalla tua fotocamera (ad esempio, DCMIMAGE10.jpg). Tuttavia, sarebbe molto più intelligente nominare il file 2018-Mazda-3-ambition-rouge.jpg.

Pensa a come i tuoi clienti cercano i prodotti sul tuo sito web . Quali modelli di denominazione usano quando fanno una ricerca? Nell’esempio sopra, gli acquirenti di auto possono cercare termini come:

• Mazda 3 ambizione 2018 rossa
• Mazda 3 Red ambizione 2018
• 2018 Mazda 3 ambizione rossa

Determina i modelli di denominazione più comuni che utilizzano e applica questa formula al processo di denominazione dei file.

Se non disponi ancora di dati statistici per il tuo sito web, assicurati di utilizzare parole chiave pertinenti e utili quando dai un nome alle tue immagini.

Ottimizza attentamente i tuoi attributi alt

Gli attributi ALT vengono utilizzati per fornire il testo alternativo alle immagini quando un browser non è in grado di visualizzarle. Sono utilizzati anche per l’ accessibilità al web per i non vedenti. Quindi, anche quando viene visualizzata l’immagine, se ci passi sopra con il mouse, vedrai apparire il testo dell’attributo alt.

L’attributo alt aggiunge anche valore SEO al tuo sito web. Ricorda che Google non è in grado di riconoscere un’immagine e l’aggiunta di attributi alt appropriati può aiutarti a posizionarti meglio nei motori di ricerca. L’utilizzo degli attributi alt è probabilmente il modo migliore per mostrare i tuoi prodotti di e-commerce nelle ricerche di immagini di Google.

La prima priorità nell’ottimizzazione delle immagini è compilare ogni attributo alt di ogni immagine sul tuo sito.

Ecco alcune semplici regole per gli attributi alt:

• Descrivi le tue immagini in un linguaggio semplice, proprio come hai fatto per i nomi dei file.
• Se vendi prodotti con numeri di modello o numeri di serie, utilizzali negli attributi alt.
• Non abusare delle parole chiave (ad es. alt = “auto mazda3 acquista ora il miglior prezzo in vendita”).
• Non utilizzare attributi alt per immagini decorative *. I motori di ricerca possono penalizzarti per un’eccessiva ottimizzazione.

Le immagini decorative sono le immagini di “design” del tuo sito come sfondi, bordi, pittogrammi, ecc. o elementi di navigazione come ad esempio le frecce. (vedi consiglio n° 8)

Visualizza la fonte delle tue pagine web o usa un’applicazione esterna come la rana urlante e controlla se i tuoi attributi alt sono compilati correttamente.

Aggiungi una didascalia alle tue immagini

Un altro punto importante per la SEO è l’aggiunta di didascalie alle immagini. In effetti, il contenuto che circonda direttamente l’immagine fornisce un contesto aggiuntivo ai motori di ricerca. Google determinerà quanto l’immagine corrisponde all’argomento della pagina.

Scegli con saggezza le dimensioni della tua immagine.

È comune mostrare più immagini del tuo prodotto. Tornando all’esempio Mazda, non vorrai mostrare solo una parte dell’auto, specialmente se stai cercando di venderla. Sarebbe nel tuo interesse mostrare immagini di:

• Interni
• Il retro
• I cerchi
• Petto

Il modo migliore per sfruttare quelle foto extra è inserire i tuoi attributi alt. E lo faresti creando attributi alt unici per ogni scatto del prodotto.

2018-Mazda-3-ambition-Rouge-Cuir-Interieur.jpg -> utilizzando l’attributo alt di: alt = “Mazda 3 ambizione 2018 interni in pelle rossa”
2018-Mazda-3-ambition-Rouge-Vue-trunk.jpg -> utilizzando l’attributo alt di: alt = “Mazda 3 ambition 2018 rouge vue-trunk”

La chiave qui è aggiungere descrizioni al tuo attributo alt di base in modo che i potenziali utenti di Internet arrivino al tuo sito web.

Per fornire una migliore esperienza utente ai tuoi visitatori, potresti voler visualizzare immagini di grandi dimensioni, ma fai attenzione. Non posizionare l’immagine più grande sulla tua pagina web, aumenterà il tempo di caricamento della pagina. Preferibilmente inserisci un’immagine più piccola e offri la possibilità di visualizzarne una più grande in una finestra pop-up o su una pagina web separata.

Riduci il peso delle tue immagini

Quasi il 50% dei consumatori non aspetterà il caricamento di un sito per più di 3 secondi. Amazon ha scoperto che se le sue pagine rallentassero di un secondo, perderebbero 1,6 miliardi di dollari all’anno.

Google utilizza il tempo di caricamento di una pagina come fattore di ranking nel suo algoritmo. Se hai immagini che si caricano lentamente e impiegano diversi secondi per caricarsi… beh, puoi dire addio a quel potenziale cliente!

Come ridurre il peso di un’immagine?

Quando un cliente arriva sul tuo sito, potrebbe volerci un po’ di tempo prima che tutti i file vengano caricati, a seconda delle dimensioni dei tuoi file. Maggiore è la dimensione dei file, maggiore è il tempo necessario per caricare una pagina web.

Se riesci a ridurre le dimensioni dei file immagine sulla tua pagina web e ad aumentare la velocità di caricamento della pagina, eviterai di perdere visitatori non appena arrivano sul sito.

Un modo per ridurre il peso delle immagini è utilizzare il comando “Salva per Web” in Adobe Photoshop . Quando si utilizza questo comando, è possibile regolare l’immagine sulla dimensione del file più bassa possibile tenendo d’occhio la qualità dell’immagine .

Regola la qualità , la dimensione del file , l’ ottimizzazione , il colore, la dimensione dell’immagine osservando le variazioni del peso dell’immagine in base alle tue regolazioni.

Come ottimizzare le immagini senza Photoshop

Se non disponi di Adobe Photoshop, ci sono molti strumenti online che puoi utilizzare per modificare le immagini. Adobe offre anche un’applicazione gratuita di modifica delle immagini per smartphone e tablet, Photoshop Express. Questo strumento non ha tutte le funzionalità della versione desktop di Adobe Photoshop, ma copre tutte le basi dell’editing delle immagini e non costa un occhio della testa.

Ci sono molti strumenti di modifica delle immagini online come Canva , PXLR e, naturalmente, c’è sempre GIMP .

GIMP è un software di editing di immagini gratuito che può essere eseguito su Windows, Mac o Linux e può fare lo stesso di Photoshop.

Quanto devono essere grandi i file di immagine?

Come regola generale per le immagini di e-commerce, cerca di mantenere la dimensione del file al di sotto di 70 KB, anche se a volte può essere difficile, soprattutto per le immagini più grandi. Per le immagini di tipo banner, sarà sicuramente possibile essere intorno ai 150kb, ma ricorda che è la moltiplicazione delle immagini su una pagina che può rallentare notevolmente le prestazioni del tuo sito.

Scegli il formato file giusto

Per la pubblicazione di immagini sul Web vengono utilizzati tre formati di file comuni: JPEG , GIF e PNG .

Diamo un’occhiata ai tre formati di file e al loro impatto:

Nel corso degli anni, il formato JPEG (.jpg) è diventato di fatto il formato immagine standard di Internet. Le immagini JPEG possono essere notevolmente compresse, ottenendo immagini di qualità con file di piccole dimensioni. Lo svantaggio è che il formato jpg non supporta la trasparenza . Si consiglia di utilizzare il formato png per le immagini con trasparenza.

Le immagini GIF (.gif) sono di qualità inferiore rispetto alle immagini JPEG e vengono utilizzate per immagini più semplici, come icone e immagini decorative. Le GIF supportano anche l’ animazione .

Per immagini e foto complesse, le GIF non sono sempre così attraenti. Ciò è particolarmente vero per le immagini di grandi dimensioni.

Le immagini PNG sono molto popolari come alternativa alle GIF. I file PNG supportano molti più colori rispetto ai file GIF e non si degradano nel tempo in caso di nuove registrazioni, a differenza del formato JPEG. Lo svantaggio delle immagini png è la dimensione dei file, che può essere maggiore di .jpg.

In sintesi, usa .jpg per immagini di tipo foto, png quando devi incorporare foto con trasparenza e gif se vuoi un’immagine in movimento.

La maggior parte dei software di modifica delle immagini può salvare le immagini in uno qualsiasi dei formati di file descritti sopra.

Ottimizza le tue miniature

Molti siti di e-commerce utilizzano immagini in miniatura, soprattutto nelle pagine delle categorie . Presentano rapidamente i prodotti senza dare troppa importanza al sito.

Le miniature sono fantastiche, ma fai attenzione, possono sabotare il tuo sito. Le miniature vengono in genere mostrate nei punti critici del processo di acquisto. Se impediscono il caricamento rapido delle pagine delle tue categorie, rischi di perdere un potenziale cliente.

• Rendi le tue miniature il più piccole possibile. In questo caso, potrebbe valere la pena ridurre la qualità a favore di un file di dimensioni inferiori. Ricorda che l’impatto cumulativo delle tue miniature avrà un enorme impatto sul tempo di caricamento della tua pagina!
• Varia il testo del tuo attributo alt in modo da non duplicare il testo che useresti per versioni più grandi della stessa immagine. Non vuoi che la miniatura indicizzi meglio dell’immagine grande, vero?

Usa sitemap di immagini

Se il tuo sito utilizza gallerie JavaScript , immagini pop-up o simili, le sitemap di immagini ti aiuteranno a inserire le tue immagini su Google.

Il crawler Web non può analizzare le immagini che non sono specificatamente nominate nel codice sorgente della pagina. Pertanto, affinché i crawler vengano avvisati di immagini non identificate, è necessario elencare la loro posizione in una mappa del sito di immagini.

Puoi inserire una riga nel tuo file robots.txt, indicando il percorso della tua mappa del sito, oppure puoi anche inviare la mappa del sito a Google utilizzando la console di ricerca.

Google ha molti consigli per la pubblicazione di immagini , che possono aiutare il tuo sito web a posizionarsi più in alto nelle SERP (Risultati di ricerca di Google, Bing, ecc…). Inoltre, puoi utilizzare le mappe del sito di Google per fornire a Google maggiori informazioni sulle immagini sul tuo sito Web, il che può aiutare Google a trovare più immagini di quante ne faresti da solo.

Gestire le immagini “decorative”

I siti web spesso offrono il proprio set di immagini decorative , come immagini di sfondo , pulsanti e bordi . Tutto ciò che non è correlato al prodotto può probabilmente essere considerato un’immagine decorativa.

Le immagini decorative possono causare file di grandi dimensioni e tempi di caricamento lenti. Pertanto, dovresti dare un’occhiata da vicino alle tue immagini decorative in modo che non compromettano la capacità del tuo sito web di convertire i visitatori in clienti.

Vuoi controllare le dimensioni dei file di tutte le immagini decorative sul tuo sito e utilizzare un modello che ne riduca al minimo le dimensioni?

Ecco alcuni suggerimenti per ridurre la dimensione del file delle tue immagini decorative:

• Per le immagini che formano bordi o motivi semplici, creale in formato PNG-8 . Puoi creare bellissime immagini della dimensione di poche centinaia di byte.
• Se possibile, usa CSS per creare aree colorate invece di usare immagini. Quando possibile, usa gli stili CSS per sostituire le immagini decorative.
• Presta particolare attenzione alle immagini di sfondo. Ridurli il più possibile, curando la qualità dell’immagine.

Metti alla prova le tue immagini

L’obiettivo dell’ottimizzazione delle immagini è migliorare i risultati. Abbiamo parlato di ridurre le dimensioni dei file e fare in modo che i motori di ricerca indicizzino le tue immagini, ma che ne dici di testarle per vedere cosa converte in più clienti?

• Testa il numero di immagini del prodotto per pagina: poiché i tempi di caricamento sono un problema per alcuni siti di e-commerce, potresti scoprire che la riduzione del numero di immagini su una pagina porterà ad un aumento della percentuale di clic e delle vendite . È anche possibile che avere molte immagini per pagina migliori l’ esperienza dell’utente e aumenti le vendite . L’unico modo per scoprirlo è testarlo.
• Metti alla prova le visualizzazioni preferite dei tuoi clienti: potresti vedere un aumento della fedeltà dei tuoi clienti fornendo le visualizzazioni che i tuoi clienti vogliono vedere. Un ottimo modo per capirlo è chiedere ai tuoi clienti cosa gli è piaciuto di più durante la visualizzazione delle foto dei tuoi prodotti. Indagare e parlare con i tuoi clienti è una buona abitudine da sviluppare.
• Verifica quanti elenchi di prodotti dovresti avere nelle pagine delle categorie: 10, 20, 100 prodotti? Prova il numero di prodotti che elenchi nelle pagine delle categorie per vedere cosa funziona meglio per i tuoi clienti.

Punti importanti da ricordare

• Scegli i nomi dei file rilevanti nel giusto formato di immagine
• Usa gli attributi alt sulle immagini
• Aggiungi una didascalia alle tue immagini per dare a Google un contesto aggiuntivo
• Regola le dimensioni e il peso delle tue immagini garantendone la qualità
• Usa le mappe del sito
• Prova, prova e prova ancora

Ora conosci le basi dell’ottimizzazione delle immagini per una buona SEO sul web, ma ci sono ancora molti punti che non sono stati trattati in questo articolo. Come ottimizzare le tue immagini per un rendering ottimale su dispositivi mobili? Il tuo sito è responsive?