Che tu abbia un sito aziendale o un eCommerce, l’ottimizzazione delle immagini è sicuramente qualcosa che dovresti dominare.
Dall’attrarre gli utenti grazie alla ricerca per immagini di Google, al ridurre il tempo di caricamento delle pagine, l’ottimizzazione delle immagini è sicuramente una parte importante per costruire un sito web o un eCommerce di successo.
Ricerca per immagini, alt tag e formati sono sono alcuni degli spunti per i più classici dubbi proprio in materia di immagini.
Con questo post proverò a rispondere a tutti i tuoi dubbi. Troverai tutte le regole da applicare assolutamente!
1. Rinomina le tue immagini in modo descrittivo e in un italiano semplice (e, ovviamente, corretto)
Durante gli shooting fotografici si hanno sempre mille cose a cui pensare e rinominare i file non è sicuramente tra le priorità. Caricare centinaia di foto, magari tutto il tuo catalogo prodotti, tenendo il nome di default del file, assegnato direttamente dalla fotocamera è facile e, nella maggior parte dei casi è la scelta più frequente.
Prima di continuare con questa (brutta) abitudine, vediamo insieme perché non è poi una soluzione così saggia.
Quando si parla di SEO è importante usare keyword valide per migliorare il tuo posizionamento nella SERP. Utilizzare nomi descrittivi contenenti le parole chiave legate alle immagini è parte integrante dell’ottimizzazione.
I crawler di Google non analizzeranno soltanto i contenuti testuali delle tue pagine, ma scansioneranno e valuteranno la tua pagina in base alle keyword per cui ti vorrai posizionare, anche le tue immagini, proprio a partire dal nome del file.
Facciamo un esempio.
- DCIM001_HD.jpg è una soluzione per questa immagine
- Ford-Mustang-LX-rossa.jpg è tutta un’altra cosa
Lo so, costa del tempo, come tutto quello che si fa per ottenere risultati.
Immagina che un utente stia cercando uno specifico prodotto nel tuo sito. Quali termini potrebbe usare? Rifacendoci all’esempio sopra e immaginando di essere i fortunati venditori di un’auto simile, l’utente potrebbe usare termini come:
- 2012 Rossa Ford Mustang LX
- Ford Mustang LX Rossa 2012
- Rossa Ford Mustang LX 2012
Una buona abitudine è quella di utilizzare Google Analytics per verificare quali chiavi di ricerca utilizzino gli utenti per cercare i prodotti nel tuo sito. Osservando un periodo sufficientemente ampio di ricerche potrete ricavare una linea guida come modello delle ricerche e utilizzarla per rinominare le tue immagini di conseguenza.
Un altro strumento davvero utile è Google Keywords Planner, gratuito e abbastanza semplice, vi permette di trovare le parole chiave che meglio definiscono il tuo prodotto.
Se non vuoi essere così preciso e dettagliato, assicurati però di utilizzare le giuste parole chiave rinominando le tue immagini (e cerca di essere più descrittivo possibile)
2. Ottimizza i tuoi Alt Tags con furbizia
Gli alt tags non sono altro che “testo alternativo” all’immagine che, come saprai, non può essere letta da Google in quanto immagine in sé.
L’attributo alt aggiunge informazioni e valore SEO al tuo sito. Aggiungendo un alt tag appropriato alle immagini presenti nel tuo sito favorirai il posizionamento dei tuoi contenuti, associando così le immagini a parole chiave specifiche.
Dopo tutto usare gli alt tags è probabilmente il miglior modo per posizionare i tuoi prodotti, in particolare se hai un ecommerce, in una ricerca Google immagini o più in generale in una ricerca nel web.
Diamo un’occhiata al codice, questo è quello che vedrai quando aggiungi un attributo alt ad un’immagine.
< img src “2012-Ford-Mustang-LX-rossa.jpg” alt= “2012 Rossa Ford Mustang LX”>
La priorità numero uno, quando si tratta di ottimizzare le immagini, è quella di inserire gli alt tag ad OGNI immagine importante del tuo sito.
Quindi, vediamo un po’ di semplici regole per gli alt tags:
- Usa termini chiari, semplici e descrittivi, proprio come hai fatto per il nome del file
- Se hai un eCommerce e i tuoi prodotti hanno uno specifico numero di modello o numero seriale, usali nel loro alt tag.
- NON inserire keyword a casaccio. Niente “gratis prezzo specialissimo in saldo” sono assolutamente inutili ed anzi penalizzanti.
- Non essere lezioso, le immagini puramente decorative non serve che abbiano l’alt tag. Potresti essere penalizzato per una sovra-ottimizzazione.
- Ultima regola, sempre valida: controlla. Puoi farlo in modo manuale guardando il codice sorgente della tua pagina e controllando tutti gli alt=“..”, oppure utilizzare uno strumento molto semplice ma efficace che trovi a questo link . Questo tool ti permette, semplicemente inserendo l’URL della pagina che vuoi controllare, di verificare con un colpo d’occhio quali immagini non abbiano l’attributo alt.
3. Dimensioni delle immagini e angolazione delle foto: pianifica le strategie migliori
Una prassi molto comune ultimamente è quella di mostrare i prodotti, in siti web o eCommerce, da più angolazioni. Perché si è diffusa questa prassi? Semplice: Amazon. Siamo tutti oramai abituati agli standard Amazon per le immagini e quindi pretendiamo che ci sia un’immagine del prodotto, che lo rappresenti nella sua interezza e ci faccia subito capire tutto e poi cerchiamo le immagini con tutti gli altri dettagli.
Per tornare al nostro esempio di prima, la Mustang, non vorresti mostrare solo un’immagine dell’auto, specialmente se stai cercando di venderla. Sarà nel tuo interesse mostrare degli scatti particolari come:
- Gli interni
- I particolati che la rendono unica
- I dettagli ben a fuoco
- Il motore
- Tutti i dettagli che ti vengono in mente
Quindi, quando verrà il momento di inserire le immagini dei tuoi prodotti tieni a mente alcune regole fondamentali:
- non riciclare foto da cataloghi in PDF
- non sperare che le foto fatte 5 anni fa vadano ancora bene, saranno di qualità troppo bassa
- rivolgiti ad un professionista, quantomeno chiedigli un preventivo
- non scattare una sola foto per prodotto, altrimenti dovrai rifare tutto il lavoro a qualche mese di distanza.
Il miglior modo per capitalizzare tutti questi scatti ulteriori è arricchire queste immagini con gli alt tags. Ancora meglio se, nell’inserire questi alt tags, li rendi specifici per ciascuna immagine:
- 2012-Ford-Mustang-LX-rossa-interni-pelle.jpg usando alt = ” 2012 Ford Mustang LX rossa Interni in pelle “
- 2012-Ford-Mustang-LX-rossa-alettone.jpg-> usando alt = ” 2012 Ford Mustang LX rossa alettone “
Il segreto è quindi aggiungere una descrizione all’alt tag di partenza così che gli utenti che cercano quel prodotto/servizio arrivino sul tuo sito. Se ti impegni in questo lavoro, Google ti ripagherà con utenti affamati del tuo prodotto.
Volendo poi parlare di “angolazione” in senso figurato allora è bene ricordare che Google apprezza e quindi, in termini più scientifici, attribuisce, un punteggio maggiore, a pagine coerenti. Questo significa che, riuscendo a capire il contesto della pagina, il punteggio sarà maggiore se anche l’immagine e quindi l’alt tag di questa, sarà coerente con l’argomento trattato.
Un avvertimento sulle immagini di grandi dimensioni
Schermi in full HD e reti sempre più veloci potrebbero farti propendere per immagini di grandi dimensioni, soluzione che sicuramente rende sempre più coinvolgente ed entusiasmante la user experience dei tuoi utenti – fai attenzione però, per dirla all’inglese “just be careful”.
Qualsiasi sia la tua decisione, non caricare un’immagine di grandi dimensioni nell’archivio media del tuo sito per poi ridimensionarle nel momento in cui le carichi nella pagina o direttamente dal codice sorgente. Questa soluzione infatti aumenterà inevitabilmente il tempo di caricamento della pagina perché il file inserito è sempre collegato con l’immagini di più grandi dimensioni caricata in precedenza.
Al contrario una soluzione ben più saggia può essere quella di inserire immagini di dimensioni più piccole e offrire ad esempio la possibilità di ingrandire l’immagine in una finestra popup o direttamente in un’altra pagina.
4. Riduci il peso dei file delle tue immagini
Consideriamo alcuni punti:
- la maggior parte degli utenti attende circa 3 secondi per il caricamento completo di un sito da desktop o laptop
- …e circa 5 secondi su dispositivo mobile
- Amazon ha stimato che se il caricamento delle sue pagine fosse rallentato di 1 secondo, il fatturato scenderebbe di $1.6 miliardi all’anno
- Google utilizza la velocità di caricamento di una pagina come uno dei fattori nell’algoritmo di posizionamento.
Se il tuo sito si apre come pagina bianca e lentamente compaiono, pixel dopo pixel, le immagini e si completano il circa 15 secondi…prova per un attimo a metterti nei panni del visitatore.
Quindi, cosa puoi fare?
Quando un utente arriva sul tuo sito, per il caricamento può volerci un po’, in base alla dimensione dei file contenuti. Nello specifico, più grandi saranno le dimensioni dei file più tempo ci vorrà per il caricamento completo della pagina.
A maggior ragione, se parliamo di un ecommerce di prodotti, magari con centinaia di prodotti, ciascuno con almeno due immagini, puoi ben comprendere l’importanza che assume la dimensione delle immagini.
#Nota Importante_ Se ti appoggi ad una piattaforma come Shopify non ignora questa parte, le tue immagini verranno automaticamente ridimensionate e non dovrai più preoccupartene.
- Salva per il web = Photoshop
Parole d’ordine per tutti i grafici e web designer, che dovrebbe entrare nel tuo vocabolario quotidiano. Il comando “Salva per il Web” di Photoshop è forse il metodo più comune per ridurre le dimensioni si un’immagine. In un solo passaggio potrai regolare le dimensioni e allo stesso tempo controllare la qualità dell’immagine.
- Non hai Photoshop. Non disperare
Photoshop non solo è un tool a pagamento ma è anche abbastanza complesso da scoraggiare anche i più volonterosi.
Fortunatamente esistono numerosi tool online per editare le foto. Primo tra tutti un utilissimo tool proprio di Photoshop > http://www.photoshop.com/tools. Non sperare di trovare le stesse funzioni del programma classico ma c’è tutto quello che serve per ridurre le dimensioni delle immagini (e sistemarne i parametri principali)
Altri tool di editing immagini sono:
- PicMonkey – descritto dagli esperti come il tool di editing che lascia senza parole. Salvatelo tra i preferiti e utilizzatelo, ne varrà la pena.
- Pixlr– 100% gratis, immediato e user friendly. Uno strumento da tenere sempre presente.
- FotoFlexer– un altro editor mediamente avanzato, permette addirittura di lavorare sui livelli, funzione non da poco se vuoi avventurarti con modifiche più complesse.
E non dimenticare GIMP, il famoso software open-source, gratuito e che ti fornisce tutti gli strumenti per modificare le tue foto. Nella pratica può fare tutto quello che fa Photoshop ma in modo un po’ maldestro. Se stai cercando qualcosa di gratuito non pensarci nemmeno, è la scelta che fa per te.
Quando grande dovrebbero essere le mie immagini?
Dipende. Risposta scontata, lo so. Immaginiamo che tu sia un fotografo professionista, il tuo sito offre un servizio indissolubilmente legato alle immagini, avrai slideshow e immagini a schermo intero e quindi le dimensioni minime saranno 1920×1080, minime dicevamo.
Se, come accennato prima, hai un eCommerce, una regola sempre valida è quella di cercare di rimanere, per quanto possibile, al di sotto dei 70kb. Ovviamente come sempre non esiste una risposta unica.
Hai ridotto tutte le tue immagini e vuoi capire se hai margini di manovra? Pingdom è un ottimo tool per misurare le prestazioni di caricamento del tuo sito.
5. Utilizza il giusto formato in ogni situazione
Ci sono 3 principali (e più comuni) formati per le immagini: JPEG, GIF e PNG.
Per capire come e quando utilizzarli è bene capire quali sono le principali caratteristiche tecniche di ciascun formato.
E in effetti in rete si trovano davvero tante spiegazioni dettagliate, articoli su articoli di dettagli sul numero di pixel e resa del colore. Informazioni davvero interessanti ma ora ci serve vendere il nostro prodotto, questo è l’importante.
Quindi, per essere quanto più efficace e diretta posso dirti che:
JPEG: tutte le tue immagini
PNG: loghi, immagini con trasparenze
GIF: immagini animate
Ricordati sempre di salvare per web e cerca di caricare immagini che abbiano dimensioni congrue all’utilizzo che ne farai. Se l’immagine serve nel catalogo prodotti non servirà sicuramente più grande di 2000px.
Per non sorvolare troppo sulla parte tecnica, ecco un esempio, forse estremo, ma molto esemplificativo. Queste tre immagini sono state ridimensionate per pesare 24kb, in ciascun formato.
Come vedi, è chiaro che a vincere questa sfida è il formato JPEG. GIF e PNG, per mantenere lo spesso peso, diminuiscono sensibilmente la qualità dell’immagine.
6. Come scegliere le immagini in evidenza
La maggior parte di siti eCommerce utilizza le immagini in evidenza o thumbnail (miniature). L’utilizzo di queste immagini permette all’utente di scansionare velocemente i contenuti della pagina individuando facilmente i prodotti cui è interessato.
Se è vero che questo tipo di immagini sono molto utili per presentare il tuo prodotto al meglio, dall’altro sono dei killer silenziosi della tua pagina.
Troviamo infatti queste immagini in punti nevralgici del processo d’acquisto e se queste aumentano il tempo di caricamento della pagina allora stai perdendo in cliente.
- Assicurati che le tue immagini in evidenza siano quanto più piccole possibile, soprattutto se nella pagina in questione ci sono più immagini thumbnail.
- Nell’inserire l’alt tag scegli un testo diverso da quello che hai utilizzato per l’immagine grande del prodotto, l’ultima cosa che vuoi è infatti che venga indicizzata il thumbnail invece che la migliore e più grande foto prodotto.
La cosa davvero importante e comune a tutte queste regole è: dai importanza alle immagini. Sono parte integrante del tuo sito, insieme ai testi e ai contenuti. Dedica tempo alle piccole azioni, il tuo tempo sarà ripagato.
