Axura Logo
Axura Blog

SPUNTI E CONVERSAZIONI DI UN’AGENZIA
SPECIALIZZATA IN INTERAZIONI DIGITALI

SPUNTI E CONVERSAZIONI

Home » Formazione » Consigli SEO: l’importanza di ottimizzare le immagini di un sito web

Consigli SEO: l’importanza di ottimizzare le immagini di un sito web

Alessandro Fumagalli

Tempo di lettura: 10′

website loading
fonte immagine: http://bit.ly/2FSWLo3

Qual è una delle esperienze più fastidiose che si possa fare quando si visita un sito internet? Se state pensando che sia “un tempo di caricamento troppo lungo”, sappiate che non siete soli.

Secondo una recente ricerca, infatti, 53 persone su 100 “tappano” su “indietro” se una pagina web impiega più di 3 secondi a caricare.

Anche i motori di ricerca si stanno dimostrando particolarmente sensibili alla velocità di caricamento di un sito, tanto che Google (il motore usato in più di 8 casi su 10) la considererà un fattore di posizionamento nell’ormai vicinissima attivazione dell’indice “mobile-first”.

Da cosa dipende la velocità di caricamento?

fattori peso pagina web
fonte immagine: http://bit.ly/2DOv3bK

Oltre che dalla qualità della connessione (che sappiamo essere non dappertutto eccelsa, specie in Italia), la velocità di caricamento di una pagina web dipende anche dal suo peso: infatti quando accediamo a una pagina web il nostro dispositivo scarica i dati che la compongono e, in base ad una statistica di dicembre 2017, nella media il 54% di questi dati è rappresentato da immagini.

Se il peso – come abbiamo visto – è un fattore fondamentale per definire la velocità di caricamento di una pagina web, allora ridurlo non può che aiutarci a migliorare il nostro sito sotto questo punto di vista.

Il primo passo da fare per “metterlo a dieta” è intervenire sulle immagini, proprio perché mediamente da sole pesano più di metà del totale. Come si può fare?

Le possibilità che abbiamo a disposizione per ottimizzare le immagini sono tante, eppure questo aspetto viene sottovalutato ancora troppo spesso.

Trascurare l’ottimizzazione delle immagini, però, può vanificare anche gran parte degli altri sforzi che si fanno per comparire tra i primi risultati di ricerca, ad esempio realizzando dei contenuti o ricorrendo a tante altre tecniche di SEO.

Un vero peccato, anche perché, per avere una buona base di partenza, talvolta bastano alcuni accorgimenti che non richiedono particolari competenze tecniche.

Come sono fatte le immagini sul web

Per sapere come muoversi è importante anzitutto sapere cosa determina il peso di un’immagine.

Principalmente esso è dovuto al numero di pixel che la compongono, dato che per ognuno di essi devono essere codificate delle informazioni: a parità di fattore di compressione (aspetto su cui torneremo tra poco), più numerosi sono i pixel più alto sarà il peso di un’immagine.

Facciamo allora un esempio concreto, vicino all’esperienza di tante persone: proviamo a scattare un’immagine per caricarla sul nostro sito!

Abbiamo preso una macchina fotografica da 20,4 megapixel e scattato questa foto (l’originale è disponibile cliccandoci sopra).

La risoluzione dell’immagine originale è di 5184 pixel di larghezza e 3888 di altezza, mentre il peso è di 3,8 megabyte.

L’errore che spesso si fa è quello di prenderla così com’è e caricarla sul proprio sito, ma si può fare di meglio.

Per chiarire questo aspetto ci affidiamo ancora a una statistica: è quella che rivela che la media del peso delle pagine web attualmente presenti in rete, sebbene sia in continua crescita, nel 2016 si aggirava intorno ai 2.5 megabyte: sarebbe bastato pubblicare questa foto in originale, insomma, per “sforare” pesantemente.

Proviamo allora a prendere la nostra immagine e comprimerla, riducendone il peso.

Per farlo abbiamo bisogno di usare uno strumento di compressione, e online ci sono ottime risorse anche gratuite (come Compressor.io, Image Optimizer, CompressNow, etc.) che ce lo consentono.

Come comprimere un’immagine, Lossy o Lossless?

Quando comprimiamo un’immagine, dobbiamo scegliere tra un approccio lossy oppure uno lossless: cosa cambia?

Nel primo caso, lo strumento di compressione elimina alcuni dati dei pixel, in una percentuale che può essere definita da noi stessi. Con le immagini, così come con i file video, spesso si può fare senza che i nostri occhi (tutt’altro che perfetti) si accorgano della differenza.

Usare un algoritmo di compressione lossless, invece, vuol dire elaborare l’immagine comprimendo i dati contenuti nei diversi pixel, dunque alleggerirli senza che però si perdano delle informazioni.

Nel nostro caso scegliamo di usare il metodo “lossy” e, con CompressNow, impostiamo un livello di compressione del 30%. Ecco il risultato (anche in questo caso, per vedere l’originale serve cliccarci sopra):

Notiamo delle differenze? A parte piccoli dettagli si direbbe di no, ma nel frattempo abbiamo portato la nostra immagine a pesare 0,53 MB (o 534 kilobyte) contro i 3,8 MB iniziali. Praticamente abbiamo ridotto il suo peso di circa l’85%, ottenendo sostanzialmente lo stesso risultato visivo!

Piccolo consiglio

Per chi usa “il re dei CMS”, ossia WordPress (un caso piuttosto comune, visto che è in uso da 6 siti su 10 che hanno un sistema di Content Management), esistono anche dei plugin sviluppati ad hoc per questa specifica esigenza.

Uno dei più famosi è EWWW Image Optimizer, che comprime automaticamente le immagini non appena vengono caricate a gestionale. La sua versione gratuita ricorre a un approccio lossless, quindi non riesce ad avere un grande impatto sul peso delle immagini, ma consente di risparmiare se non altro il tempo necessario per una compressione manuale.

In alternativa ci sono altri strumenti come Kraken.io (gratis per tutte le immagini fino a 1 MB, altrimenti a pagamento) o TinyPNG, che – come rivela il nome – serve solo per comprimere dei file PNG ma è gratuito fino a 500 ottimizzazioni al mese (ed è meglio usarlo nella versione web, visto che il plugin è stato pesantemente bocciato da chi l’ha provato).

L’importanza della (giusta) risoluzione

Possiamo fare ancora meglio.

Abbiamo detto, infatti, che il peso delle immagini dipende anche da quanti sono i pixel che le compongono, e da quanti sono i byte contenuti in ogni pixel.

Se guardiamo alla homepage del nostro blog, per esempio, vediamo che c’è uno schema preimpostato per cui le immagini in evidenza per ogni post sono di dimensioni standard: nello specifico stiamo parlando di 300 pixel di larghezza.

La nostra immagine originale, anche compressa, ne misura sempre 5184 x 3888.

Qualcuno si limita a chiedere al computer di mostrarla a una risoluzione inferiore (ossia, in gergo tecnico, a “scalarla in HTML”), senza però intervenire sull’immagine originale.

Ridimensionandola prima di caricarla, invece, possiamo renderla ancora più leggera andando a eliminare i pixel in eccesso, anziché lasciare che sia qualcun altro (nello specifico il browser) a farlo al posto nostro, impiegando tempo e consumando risorse.

Dove sta la differenza? Con un’immagine con un numero inferiore di pixel anche il peso da trasferire dal server ai dispositivi dei visitatori della pagina sarà inferiore, con un ridimensionamento HTML i dati trasferiti sono quelli dell’immagine originale, anche se poi viene mostrata più piccola.

Anche in questo caso intervenire è facile: con un Mac basta aprire l’immagine con l’anteprima, andare su “Strumenti” e selezionare “regola dimensione”, ma si può fare anche con il caro e vecchio Paint (seguendo la guida del sempre ottimo Salvatore Aranzulla, se serve), oppure con risorse online come ILoveImg e tante altre, che consentono di ridimensionare anche più immagini in una volta sola.

Nel nostro caso, siamo arrivati a far pesare l’immagine 6 KB, praticamente solo l’1,5% dell’originale. Poco più di un centesimo! Un risultato notevole, che aiuterà il nostro sito ad essere più “leggero” e veloce da scaricare.

Consiglio numero 2, sempre per chi usa WordPress

La piattaforma mette a disposizione alla voce “Media” del menù “Impostazioni”, uno strumento che crea automaticamente tre copie dell’immagine che viene caricata in altrettante diverse dimensioni standard, che possono essere preimpostate dall’utente.

Chi naviga il sito trarrà sicuramente giovamento da questo ridimensionamento automatico, almeno in termini di tempo di caricamento delle diverse pagine; se però l’immagine “base” resta molto pesante, a farne le spese potrebbe essere il server a cui ci appoggiamo, e che spesso non ci mette a disposizione uno spazio infinito. Per arginare questo rischio c’è un altro plugin, Imsanity.

Ricapitolando: se comprimiamo la nostra immagine e stiamo attenti alla risoluzione stiamo già facendo due cose molto importanti per caricare immagini ottimizzate.

La scelta del colore

Continuiamo con un po’ di teoria e tocchiamo un altro aspetto importante: al di là di come appaiono a chi le guarda, non tutte le immagini sono uguali.

RGB vs CMYK
fonte immagine: http://bit.ly/2DsczzW

Se, per esempio, avete a che fare con un’immagine pensata per la stampa, fate attenzione al metodo colore: in quel caso viene usato il CMYK, ma per le pagine web è necessario che le immagini siano basate sul metodo colore RGB.

Un altro punto su cui è possibile intervenire per ottimizzare le immagini di un sito è la riduzione della palette di colori.

Ogni pixel di un’immagine digitale ha un colore proprio, che viene descritto usando un certo numero di bit.

A un numero più alto di bit corrisponde una migliore definizione del colore, perché ogni singolo pixel contiene più informazioni di dettaglio rispetto al colore che deve riprodurre.

Lo standard di uso più comune oggi è di 8 bit per canale (quindi 256 possibili variazioni per il rosso, 256 per il verde e 256 per il blu); in alcuni casi potrebbe convenire semplificare questa palette, corrispondente a 16 milioni di colori, riducendola a un numero inferiore. Per certe situazioni bastano 256 colori, in altre addirittura solo 128, e anche l’immagine ne risulta alleggerita.

Il formato delle immagini: vettoriali, JPEG, PNG o… WebP?

Un ulteriore aspetto di primaria importanza da considerare è il formato delle immagini, che può essere vettoriale o raster.

Nel primo caso si tratta di immagini (generalmente semplici, come loghi, icone, linee) che vengono create basandosi su formule matematiche.

Il formato “principe” in questo caso è SVG, acronimo di Scalable Vector Graphic, che consente di rimpicciolire o ingrandire le immagini senza perdere alcuna informazione.

Questo aspetto è assolutamente importante quando si deve pensare alla visualizzazione multidispositivo, visto che le dimensioni e le caratteristiche dello schermo cambiano di volta in volta: i file SVG hanno sempre la stessa resa, riproporzionata.

I formati raster, invece, sono più “rigidi” da questo punto di vista, e ognuno di loro ha caratteristiche diverse dagli altri che vengono ben riepilogate in questa tabella pubblicata da Google.

 

GIF, PNG e JPEG sono riconosciuti da tutti i browser, mentre i più recenti JPEG XR e WebP (formato proposto da Google stessa) consentono una compressione migliore: WebP ad esempio arriva a diminuire le dimensioni dei file fino a un ulteriore 30% rispetto alla stessa immagine in formato JPEG.

Ogni formato ha le sue caratteristiche:

  • PNG è adatto alle immagini più semplici e a quelle situazioni in cui c’è bisogno di conservare i dettagli in maniera fedele. Si può comprimere solo con un algoritmo lossless, quindi mediamente le immagini pesano di più rispetto a quelle realizzate nei formati alternativi: è bene tenerne conto e usarlo solo quando strettamente necessario;
  • JPEG si presta per tutti quei casi in cui non è necessario avere un’immagine ricca di dettagli e al massimo della risoluzione: grazie a una compressione che può essere lossless, ma anche lossy, è possibile arrivare a ridurre di molto il peso dell’immagine, ma bisogna essere disposti a rinunciare ai dettagli (soprattutto negli ingrandimenti).
fonte immagine: http://bit.ly/2DndsKN

Lasciamo per ultimi JPEG XR e WebP perché il loro limite sta proprio nel non essere universalmente riconosciuti: scegliere di usare un’immagine WebP significa accettare che chi naviga con Internet Explorer, Microsoft Edge, Firefox o Safari non possa vederla: le statistiche più recenti ci dicono che stiamo parlando di una fetta ancora significativa utenti.

Al momento, quindi, JPEG XR e WebP non possono essere usati come codifica principale di un’immagine, ma al massimo come alternativa rispetto ai formati standard quando il supporto è garantito: se pensiamo a quanto è diffuso Chrome, può valere la pena ottimizzare nello specifico per questo browser alcuni aspetti della propria pagina web.

A completare la panoramica aggiungiamo, infine, il formato HEIF (o .heic), che è stato “sdoganato” in grande stile con la sua introduzione in iOS 11 per iPhone e iPad.

HEIF è stato sviluppato per offrire una qualità delle immagini e una compressione delle stesse decisamente maggiore rispetto al comune JPEG: si parla perfino di un 50% di peso in meno per foto praticamente identiche (anzi, anche migliori in formato HEIF).

Del resto l’acronimo dice molto: significa High Efficiency Image File Format. E pensare che la Alliance for Open Media sta sviluppando un formato ancora più efficiente

Aggiornamento del 4 marzo 2019

Uno degli strumenti più completi disponibili online per l’ottimizzazione delle immagini è Squoosh, una web app lanciata a novembre 2018 da Google.

Nelle ultime settimane l’abbiamo testata anche noi, mettendola alla prova in più di un’occasione, e dobbiamo dire che permette di ottenere risultati davvero ottimi.

In una sola interfaccia, molto semplice e “pulita”, offre la possibilità di intervenire su un’immagine – che può essere caricate anche con la modalità del “drag and drop” – e modificata in pochi click nelle dimensioni, nel formato e nel colore, ottenendo compressioni per valori percentuali spesso a doppia cifra.

 Squoosh funziona con un’immagine per volta (e questo per qualcuno potrebbe un limite), ma la praticità d’uso e la qualità dei risultati sono sicuramente di ottimo livello: è una soluzione, gratuita, che vi consigliamo quantomeno di provare.

In ottica SEO ci si potrebbe addentrare poi in altre ottimizzazioni, come ad esempio la scelta di nomi significativi per le immagini (evitando di ricorrere all’ormai deprecato keyword stuffing): invece di immagine-01.jpg i motori di ricerca apprezzeranno foto-logo-axura.jpg per la nostra immagine di esempio.

Volendo spingersi ancora più in là, nelle situazioni più competitive può aiutare appoggiarsi ad una c.d. CDN (Content Delivery Network, rete di consegna dei contenuti in italiano) per servire le risorse statiche come appunto le immagini: è un accorgimento che ha un certo costo e va quindi valutato nel contesto del sito web di cui ci si sta occupando.

Al di là comunque di situazioni estremamente competitive, già gli accorgimenti di base esposti in questo articolo ci aiutano ad alleggerire le nostre pagine web, pubblicando immagini dal peso più contenuto, giusto per l’uso che ne deve essere fatto.

E’ importante comunque “non eccedere”: una compressione troppo spinta ci porterebbe lontano da un risultato accettabile, come in questo esempio:

Come in tante altre cose, va cercato il giusto compromesso 😉