Ottimizzazione immagini in maniera facile e veloce

Ottimizzazione immagini o come ottimizzare le immagini per favore i risultati di ricerca organici è un argomento piuttosto semplice da un punto di vista SEO, ma l’ottimizzazione delle immagini è tutt’altro che semplice dal punto di vista grafico applicato alla SEO. Per fare chiarezza su questo argomento, trattato da davvero moltissimi SEO ho chiesto l’aiuto di Nicolò, un vero esperto dell’ottimizzazione immagini dal punto di vista grafico, in questo articolo uniremo le competenze di ottimizzazione delle immagini di un fotografo professionista a quelle della SEO per le immagini.

L’articolo sull’ottimizzazione immagini sarà, come sempre, diviso in sezioni: la prima parte verterà sui vari tipi di formato da utilizzare per il Web, ognuno con le sue particolarità, pregi e difetti: impareremo a capire quale tipo di formato merita la nostra attenzione e in quali circostanze. La seconda sezione spiega perché bisogna ottimizzare le immagini e quali strumenti possiamo usare. La terza sezione si occupa dell’ottimizzazione immagini da un punto di vista SEO tecnico: ovvero come effettivamente ottimizzare un’immagine per la SEO, daremo delle linee guida per la dimensione e la compressione.

La conclusione dell’articolo (la quarta sezione di questa guida all’ottimizzazione immagini) svelerà un utile trucco che permetterà a chi di voi ha un sito particolarmente grande o particolarmente pieno di immagini, di posizionarle nella migliore maniera possibile e con il minimo sforzo.

Ottimizzazione immagini con il fotografo professionista

La prima sezione della guida all’ottimizzazione immagini contiene tutti i segreti che Nicolò, il professionista della fotografia che ha scattato tutte le foto e ha sviluppato tutta la grafica e le icone dei mie articoli, mi ha confidato in tutte queste giornate di lavoro fianco a fianco.

Una delle problematiche più classiche che un fotografo si trova ad affrontare sono sicuramente le immagini e la difficoltà di comunicare al cliente quanto l’ottimizzazione sia una delle più semplici e più efficaci strategie per trasformare un sito buono in un sito eccellente.

Ottimizzare in maniera sbagliata, è uno di quei fattori che permette ai tuoi concorrenti di crescere sul valore aggiunto che hai creato con tanta fatica, ed è in grado di danneggiare il tuo fatturato abbassando il tuo posizionamento organico suoi motori di ricerca.

La buona notizia è che non è mai stato così facile scegliere quale formato usare per le immagini, basta sapere quali sono e a che cosa servono: per questo ecco a voi una prima carrellata di informazioni sulle immagini e su come sceglierle.

Ottimizzare le immagini senza conoscere il formato è difficile

Se, come Nicolò, avete speso qualche ora della vostra vita su Photoshop, sapete che le possibilità di scelta quando si preme il pulsante salva come sono pressoché infinite, ma quando quelle nostre immagini vanno messe sul web, la scelta che abbiamo si riduce incredibilmente; a voler essere sintetici abbiamo a disposizione dolo due grandi categorie.

  1. Le immagini vettoriali
  2. Le immagini raster o a griglia

La nostra attenzione, quando parliamo di ottimizzazione immagini si concentrerà esclusivamente sulle immagini vettoriali, ma per capire il perché dobbiamo prima capire cosa intendiamo con questo termine.

Immagini vettoriali, cosa sono

Le immagini vettoriali sono generate tramite degli oggetti geometrici come delle linee o dei punti che hanno una ben precisa posizione direzione, questi vettori accompagnano le forme verso dei nodi, ognuno dei nodi occupa uno spazio nelle coordinate cartesiane e determina la direzione del percorso. Ovviamente ognuno dei percorsi hai un colore, una forma e così via. Ma perchè le immagini vettoriali sono così usate? Le motivazioni sono principalmente 3:

  1. Indipendenza tra qualità dell’immagine e risoluzione dell’immagine stessa
  2. Modifiche facili e senza perdita di qualità
  3. Dimensione ridotta dell’immagine

Analizzeremo questi punti in maniera schematica per far capire fin da subito perché i vettori sono il massimo. I vettori, per natura, possono essere modificati in lunghezza senza distorsione o diminuzione del dettaglio, questo li rende indipendenti dalla risoluzione della foto.

Proprio perché i vettori sono scalabili le modifiche ai file non richiedono un lavoro extra per recuperare la qualità, ciò significa che ogni modifica è facile da implementare e ha la stessa qualità dell’originale.

Ultimo punto, fondamentale per la parte SEO come vedrete poi, è la dimensione ridotta dell’immagine, data la natura matematiche delle immagini vettoriali, la loro dimensione è chiaramente minima.

Dalla nostra prima analisi sembra che i vettori siano imbattibili, motivo per cui per tutti i miei clienti chiedono loghi e grafica in vector graphics, ma c’è un problema.

Il problema della grafica è la compatibilità cross-piattaforma, ovvero a seconda del browser che usi, caricare un’immagine vector piuttosto che bitmap può essere un problema. Per questo motivo si è generata una pratica bislacca per cui noi designer sviluppiamo in vector con Illustrator, ma poi esportiamo in una varietà di file web imbarazzante, ovviamente non vettoriali.

Un esempio di SVG

La rivoluzione del vettoriale cavalca l’onda del formato SVGs, ovvero delle immagini vettoriali scalabili, native digitali che, se fossero adottate da tutti gli utenti, cambierebbero la qualità dell’offerta della rete in maniera radicale. Purtroppo, in termini di supporto browser siamo ancora lontani dalla compatibilità totale, ma siamo comunque molto vicini al cambiamento!

Anche se le statistiche sul supporto parlano chiaro, in Italia esportiamo ancora in raster.

Immagini raster, una panoramica

Quando parliamo di ottimizzazione immagini la quasi totalità del tempo di un grafico è assorbita dalle immagini raster o bitmap, sono ottimi del punto di vista della compatibilità sui browsers, ma richiedono un sacco di lavoro per essere ottimizzate. Tra questi formati siete sicuramente in grado di riconoscerne 3:

  1. Le GIFs
  2. Il formato JPEG
  3. Il mio preferito il PNG

Le GIFs sono recentemente tornate di moda, ma sono nate nella seconda metà degli anni 80, hanno dimensioni piccole, 356 colori e la possibilità di incorporare la trasparenza le ha rese la soluzione preferita per il web per le immagine che sono un mix di testo e aree colorate. Oggi l’evoluzione della GIF la potete spesso trovare sui vostri social, è diventata animata, ma non ha vinto la guerra del formato dominante.

Un esempio di GIF statica

Il formato JPEG è il formato classico per la visualizzazione delle immagini sul web (ovviamente non per la post-produzione grafica), oggi ancora il 70% dei siti lo usa. Sono facili da comprimere anche del 90% grazie al loro ampio spettro di colori e gradienti, la fregatura è che non supportano la trasparenza, una pecca grave per un sito web.

Una lunga esposizione scattata a Colonia da Nicolò

E ora il re della grafica, il PNG con compressione fantastica, supporto della trasparenza e resa stupenda dell’immagine. In base al formato usato (8 o 24 o addirittura 32 bit) sono un’alternativa ai due formati sopra elencati.

Notate la trasparenza del formato PNG

Ora che conosciamo i protagonisti di questa storia è ora di conoscere il responsabile di questa commistione di raster e vector e iniziare a risolvere il problema.

Ottimizzazione immagini, tutta colpa della rete

Con l’avvento della banda larga, l’approccio dei tecnici della fotografia è stato sicuramente contrario all’ottimizzazione immagini, non solo perché riduceva il nostro lavoro artistico ad un mero insieme di tecniche, ma perché tutti pensiamo che un risparmio di qualche megabyte sia nulla in confronto allo streaming della partita della Juve, perché mai dovremmo considerare come opzione l’ottimizzazione delle immagini?

Ho detto che la colpa è della rete, ma in realtà la colpa è dei cellulari, con l’utilizzo da smartphone che supera il desktop non possiamo negare che il cellulare è la direzione che il mondo di internet ha scelto come il futuro. Indipendentemente dalle considerazioni morali sull’argomento una cosa è certa, anzi due cose sono sicure sull’ottimizzazione immagini:

  1. Le immagini sono diventate un fattore che impatta sul fatturato di un’azienda in maniera rilevante
  2. I telefonini hanno ancora costi di download dati proibitivi, specialmente all’estero

In questo contesto ho sviluppato la mia filosofia nell’ottimizzare le immagini: ogni byte conta! Per questo oggi i mie clienti domandano tutti le stesse cose:

  1. Pagine che si caricano velocemente
  2. Siti Web in prima pagina
  3. Fatturato in aumento rispetto a quando non usavano le mie foto e grafiche

Uno dei motivi principali per cui si perdono utenti pronti all’acquisto è proprio la pesantezza dei file immagine, il 73% degli utenti ha problemi con il caricamento delle pagine web sui cellulari! Un dato altrettanto sconcertante è che chi lavora nel web può confermare è che tutti i miei clienti si aspettano che il sito web si carichi in un paio di secondi, ma quando da cellulare il tempo di caricamento sale fino a sette secondi si parla di aspettative non rispettate.

Il mio consiglio è sempre di tagliare corto con le immagini troppo pesanti, rischiate solamente di offrire un’esperienza deludente ai vostri visitatori, ancor prima che vi abbiano conosciuto di persona. Non entro nei dettagli sul tempo di caricamento o sulla mancata conversione dovuta alla lentezza della pagina perché saranno trattati di Alessandro in maniera più approfondita, ma una cosa è certa, ridurre la dimensione prima di caricare il file sul sito è sempre meglio che ottimizzare le immagini una volta già hostate sul sito.

Ottimizzazione immagini pre caricamento su sito

Perché ottimizzare le immagini quando il progresso tecnologico ci ha concesso fotocamere fenomenali? Purtroppo bisogna ammettere che le immagini di qualunque smartphone di alta gamma hanno una grandezza che van ben oltre quanto una piattaforma come WordPress richiede. Caricare foto di oltre 10Mb può essere fatto solo tramite FTP, un’operazione banale per chi lavora con il web, ma non scontata per l’utente medio, questo rende essenziale una compressione pre caricamento.

Chiaramente in questa sezione si svelerò quali sono i programmi per ottenere il risultato, ma come sempre, tutto dipende dal budget. Il principe dell’ottimizzazione è ovviamente Photoshop, ma se non vi occupate di grafica ecco delle soluzioni a buon mercato elencate in ordine di qualità crescente.

  1. Paint o Preview, rispettivamente per Windows e Mac
  2. Gimp, scaricabile gratuitamente e ottimo su ogni piattaforma
  3. Pixlr e Fotoflexer utilizzabili online e gratutit
  4. Pixelmator (Mac) e IrfanView (Windows) che sono prodotti commerciali

Indipendentemente dal programma che preferite ricordate di lavorare sempre su una copia (mai sull’originale) e assicuratevi di preservare i rapporti tra le varie dimensioni in modo da evitare le distorsioni.

Resizing e cropping sono i primi step da effettuare quando si ottimizza un’immagine, ma se volete andare sul semplice potete iniziare il processo di ottimizzazione direttamente con la compressione delle immagini.

Come fare cropping

La compressione è il processo di ottimizzazione tramite il quale vengono rimosse dalle immagini delle informazioni, queste informazioni non sono percettibili ad occhio nudo, ma non per questo sono da tralasciare. La compressione permette di ridurre drasticamente il peso delle immagini. ed è qui che le immagini JPEG fanno da padrone, mentre le PNG e le GIFs sono difficili da ridurre senza rinunciare alla qualità della foto.

Uno dei problemi più gravi che possono manifestarsi con la compressione sono gli artefatti visivi: la compressione cambia i colori delle immagini rendendole non reali e “quadrettate” Onde evitare la spiacevole quadrettatura è fondamentale controllare il file prima di caricarlo sul proprio sito.

Strumenti per l’ottimizzazione immagini

Sul web esistono una moltitudine di strumenti dedicati alla compressione, ecco qui una rassegna dei migliori:

  1. ImageOptim (Mac) e Trimage (Windows e Mac)
  2. TinyPNG e Kraken Image Optimizer  (entrambi disponibili online)
  3. Il plug-in WP Smush

Wp Smush è sicuramente la soluzione più efficiente in termini di ottimizzazione immagini e risparmio tempo. Non solo ottimizza direttamente dal proprio sito, senza ulteriori passaggi, ma perfette l’ottimizzazione simultanea di interi archivi fotografici in maniera automatica.

Ora che sapete cosa fare, prima di iniziare a caricare le immagini, è ora di sviluppare la vostra scheda di ottimizzazione lato SEO, e detto questo lascio la parola ad Alessandro.

Ottimizzazione immagini per la SEO

Abbiamo dedicato le prime due sezioni di questo articolo all’ottimizzazione grafica delle immagini, ma ora concentriamoci sul raggiungere i risultati che ci siamo posti in termini di visibilità con l’ottimizzazione immagini lato SEO. In caso non abbiate letto la Guida SEO Google ecco riassunta la base di partenza del nostro lavoro:

  1. I nomi dei files sul vostro PC devono essere descrittivi e contenere necessariamente la parola chiave, se parli di ottimizzazione immagini mi aspetto che le tue fotografie sull’argomento si chiamino “ottimizzazione-immagini.png” e non “DSCQaualcosa.JPEG”
  2. Gli utenti diversamente abili non possono vedere le immagini del tuo sito, per non escluderli è necessario inserire un attributo di testo alternativo che i lettori di schermi sono in grado di leggere e trasmettere agli utenti. Un testo alternativo come “alt= esempio di un’immagine ottimizzata” servirà a rendere i tuoi contenuti fruibili a tutti.

La parte difficile è capire come chiamare le nostre immagini in modo da generare traffico organico. Questa esigenza può sembrare banale per chi ha un sito molto semplice e con qualche immagine, ma non è assolutamente così per chi fa massiccio uso di contenuti media. Immaginate di aver organizzato un evento per il lancio della vostra realtà aziendale: la domanda è come chiamerete quelle 200 foto?

Provare a mischiare le parole chiave può funzionare fino ad un certo punto, ad esempio possiamo scrivere immagine ottimizzata o immagini ottimizzate ma se vogliamo evitare che le nostre immagini si cannibalizzino e causino un IMAGE BLOAT abbiamo bisogno di un metodo di lavoro diverso.

Il problema dell’image bloat è simile a quello dell’index bloat analizzato nell’articolo che spiega come Ottimizzare gli URL ed è per questo che sappiamo quanto è grave. Chiamando le immagini nello stesso modo scoraggiamo l’indicizzazione da parte dei motori di ricerca, che, davanti al disordine, semplicemente non svolgono un lavoro eccellente.

La soluzione c’è e, come al solito, è puntare sulle keyword di coda lunga: oggi la ricerca di immagini ha le sue prerogative e quello che conta è il contesto all’interno del quale l’immagine è inserita piuttosto che la keyword che contiene. Se riusciamo a creare il contesto anche dal punto di vista visivo siamo a cavallo.

Immaginiamo di voler rankare per la parola ottimizzazione immagini, dopo aver scelto la nostra immagine preferita la posizioniamo nella parte alta del nostro articolo, subito dopo le prime 200 parole di contenuto e le aggiungiamo i seguenti attributi.

 <  img title="ottimizzazione immagini" src="http://www.tuosito.it/wp-content/uploads/2015/11/ottimizzazione-immagini.png" alt="ottimizzazione immagini" >

Il secondo passaggio è creare contesto, se vogliamo che l’immagine scelta prima sia in prima pagina per la ricerca immagini dobbiamo aiutarla. Possiamo usare lo stesso sistema che avevamo per la risoluzione del problema “come trovare un titolo” adatto. Il sistema è trovare le keyword di coda lunga che appartengono al nostro argomento.

Il programma da usare è come al solito Keyword Researcher Pro come spiegato in Pagina ottimizzata. L’output che avremo sarà qualcosa del tipo


Le stelline servono a indicare le parole chiave di coda lunga che sono semanticamente correlate al nostro argomento. Non ci serve studiare il loro volume di ricerca, ricordiamoci che queste immagini non servono per ottenere visibilità, ma per dare contesto alla nostra immagine chiave, è lei che vogliamo in prima pagina!

Possiamo parlare degli argomenti suggeriti dalla nostra ricerca e inserire le nostre immagini, il risultato che daremo ai motori di ricerca è di un blocco di testo con un contesto chiaro e ben collegato, in termini visivi potete immaginarlo così.

Una volta creato il contesto, scelti titolo e attributo di testo alternativo possiamo inserire una caption, ovvero una descrizione dell’immagine (quest’ultima operazione va svolta a piacimento, ma non so tutte le foto). L’ultimo criterio è l’open graph protocol: la maggior parte dei siti web oggi lo incorpora automaticamente, ma in caso vogliate più informazioni circa la sua utilità eccole servite.

L’Open Graph Protocol permette che le vostre immagini siano incorporate nel link quando qualcuno lo condivide sui social, in questo modo la rilevanza dei vostri contenuti aumenterà e il vostro posizionamento organico non potrà che beneficiarne!

L’ultimo step è la creazione di una sitemap XML (per i robot) esclusivamente per le immagini, l’attribuzione di tag specifici per le immagini in una sitemap dedicata è una delle richieste su cui Google è particolarmente chiaro. Potete delegare questa task ai vostri sviluppatori o cercare un plug-in che risolva il problema, il mio consiglio è sempre di farla a mano, migliorerà l’indicizzazione senza rallentare il sito con un plug-in.

Ora che sappiamo le linee guida per definire direzione e contesto non abbiamo ancora risolto il problema dell’ottimizzazione immagini per chi fa massiccio uso di media e contenuti fotografici, l’ultima sezione di questo articolo svelerà due trucchi che vi faranno risparmiare decine di ore di lavoro e vi permetteranno di dimenticare l’ottimizzazione immagini lato SEO per un bel pezzo.

Ottimizzazione immagini il metodo segreto

L’ottimizzazione immagini richiede un lavoro immenso e per chi ha un sito di medie dimensioni questo significa un considerevole lavoro sottratto ad altre attività chiave, ma per fortuna ci sono due rimedi al problema, un rimedio classico e uno tecnologico.

Ottimizzazione immagini tramite scaletta

Il metodo classico è usare una sequenza di sei mosse per ottenere il massimo dal tuo sito web, senza devolvere un mese intero a risolvere la situazione delle tue immagini, e senza rischiare  l’image bloat.

  1. Scegli il giusto formato per il giusto tipo di contenuto
  2. Croppa e ridimensiona le immagini in modo da avere qualità visiva massima e peso minimo
  3. Inserisci delle varianti a doppia pixellatura per prevenire problemi sui dispositivi retina
  4. Usa WP Smush per assicurati che il tuo cliente non rovini il lavoro fatto
  5. Dedica del tempo ad ottimizzare lato SEO le immagini puntando alle code lunghe e otterrai più traffico
  6. Considera di usare un Contend Delivery Network per aumentare la velocità di caricamento del sito

Il metodo tecnologico ti permette di ottimizzare tutte le tue immagini lato SEO in un solo click, io non consiglio di saltare direttamente all’automazione delle procedure quando non si padroneggia la base dell’argomento, ma come promesso eccome come ottimizzare tutte le immagini senza fatica, ma con un semplice plug-in.

Ottimizzazione immagini automatica

SEO Friendly Images riempie in automatico il titolo e il testo alternativo delle tue immagini basandosi sui tag come elemento di contesto, ma non solo: eseguirà questo lavoro anche per le immagini che sono già caricate sul tuo sito!

Come opera in dettaglio SEO Friendly images? Semplicemente usa il titolo del post, il nome del file, le categorie e i tag associati al post e anche le parole che digiti al posto del titolo e dell’alt text. Una volta installato e attivato il Plug in vi basterà dirigervi nelle impostazioni (Settings) e configurarli.

L’ottimizzazione automatica non è di certo la tecnica più meticolosa di eseguire un lavoro di ottimizzazione immagini e di certo non assicura nessun risultato, ma se hai di fronte mille immagini, può essere difficile dedicare interi mesi ad ottimizzare per coda lunga.

Se usato in maniera intelligente, il plug-in permette di ottenere dei risultati per ogni immagine sul sito (e non solo per una, come visto sopra) e questo è sicuramente anni luce rispetto al lavoro amanuense di ottimizzazione manuale.

Se anche tu hai la gestione e la responsibilità di una grande piattaforma facci sapere la tua esperienza con l’ottimizzazione immagini e condividi questi trucchi con chi vuoi! Io rimango per l’ottimizzazione manuale, e tu? Quale preferisci?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.