Blog

Se ti interessa scoprire come ottimizzare le immagini per il tuo sito web, sei nel posto giusto!

In questa “Guida Definitiva” ti indicheremo quali sono e a cosa servono i vari formati di immagine, qual’è il più performante per i siti web, e come ottimizzarle da un punto di vista SEO (es. come inserire Alt Tag Immagine).

Leggi anche “Ottimizzazione SEO: on-page, off-page, tecnica” per avere una panoramica completa sulle attività SEO da svolgere e cominciare a scalare posizioni nella SERP!

Di seguito ti indicheremo come ottimizzare le immagini per siti web.

Ottimizzare immagini SEO: i fattori più importanti

Per ottimizzare in maniera corretta le immagini, sia dal punto di vista SEO che da quello dell’UX e della velocità di una pagina web, dovrai lavorare su alcuni determinanti parametri.

Tra i fattori più importanti da tener conto per ottimizzare le immagini per sito web, ci sono:

• Dimensioni;
• Compressione (rapporto peso/qualità);
• Alt Tag Immagine.

Nei paragrafi successivi analizzeremo tutti questi parametri uno ad uno, e ti indicheremo quali sono le migliori scelte da compiere per avere delle immagini performanti sia per la SEO che per la parte puramente grafica (quindi qualitativa).

Dimensioni del file (Peso)

La dimensione di un file immagine è il più importante fattore di cui tener conto. Si stima che il peso delle immagini influisca in media del 25% sul peso totale di una pagina web. Le immagini quindi occupano ¼ delle dimensioni totali della tua pagina web.

Avere quindi file “leggeri” non può che assicurarvi un peso ridotto della pagina web, con conseguente aumento delle performance in fatto di velocità e tempo di caricamento della pagina.

Per ottenere i due vantaggi appena citati, basterà utilizzare immagini leggere e che possano favorire la rapida visualizzazione di una pagina web. Infarcire la pagina di immagini non è sicuramente consigliato, ma al tempo stesso inserire 1 sola immagine anche se di alta qualità potrebbe risultare riduttivo.

La soluzione potrebbe essere 2 massimo 3 immagini, tutte di dimensioni ridotte.

Ovviamente dovrete trovare anche il giusto compromesso tra peso dell’immagine e qualità grafica della stessa. Infatti più il file è di piccole dimensioni più la qualità ovviamente dovrebbe essere bassa.

Per questo motivo sarà bene decidere il formato di immagine che vuoi utilizzare, punta su uno che ti garantisca una buona compressione e che allo stesso tempo non faccia perdere troppa qualità all’immagine durante la sua conversione.

Peso immagine per sito web:

• max 200/250 kb

Peso immagine consigliato da Uliber:

• 100 kb

Peso immagine TOP:

• tra 50 e 70 kb

Compressione (rapporto peso/qualità)

Come già anticipato, oltre alle dimensioni del file immagine, sarà bene scegliere con cura il formato che volete utilizzare e relativa compressione.

Ogni formato presenta una diversa compressione. Rendere il file più leggero spesso significa convertire un determinato file immagine in un altro formato, più leggero ma anche di qualità grafica più bassa. Ci sono poi alcuni formati in grado di comprimere un file mantenendo comunque un’alta qualità visiva.

Per questo motivo i formati di compressione delle immagini si dividono in lossy e lossless.

Compressione Lossy

La compressione lossy si basa principalmente su una maggiore compressione del file. Quindi per ottenere un file immagine di dimensioni ridotte, la compressione lossy sacrificherà parte delle informazioni che fanno parte del suddetto file. Ci sarà una perdita di qualità dell’immagine, sarà poi il formato (estensione) della stessa a stabilire in quale percentuale l’immagine perderà di qualità.

Formati con compressione Lossy:

• .jpeg;
• .gif (oltre i 256 colori).

Riduzione media qualità immagine:

• da 15 a 50%

Riduzione media peso (dimensioni file):

• dal 75% al 100%

Compressione Lossless

La compressione Lossless invece riesce a conservare tutti i dati contenuti nel file immagine originale, pur procedendo ugualmente con una compressione del suddetto file. Il risultato sarà un file di dimensioni sicuramente ridotte, ma non aspettatevi chissà di quanto. Al tempo stesso avrete però un file che a livello visivo non ha perso nulla (non ci sono state perdite di qualità dell’immagine durante al compressione). Dipenderà dal formato scelto il rapporto compressione/qualità.

Formati con compressione Lossness:

• .png;
• .tga;
• .tiff;
• .gif (fino a 256 colori).

Riduzione media qualità immagine:

• da 0% a 5%

Riduzione media peso (dimensioni file):

• da 30 a 50%

Il formato .webp (consigliato)

Il formato .webp (si legge “weppy”) è uno dei formati più recenti. E’ stato ideato da Google e introdotto nel mondo del web a partire dal 30 Settembre 2010.

Lo scopo della creazione di questo nuovo formato di immagine è chiaro, Big G ha voluto realizzare un formato destinato appositamente ai siti web. Utilizza una compressione sia di tipo Lossy che Lossness, è perfetto per ottimizzare i tempi di caricamento delle immagini sui siti web.

Segnaliamo però che questa ottimizzazione andrà a discapito della qualità dell’immagine e delle sue dimensioni. La stessa infatti risulterà più piccola, ma allo stesso tempo più performante.

E visto che la visualizzazione da Desktop è ormai superata (ora c’è il Mobile-First!) crediamo che utilizzare questo formato possa essere di grande aiuto per migliorare la velocità delle tue pagine web.

I file .webp sono di dimensioni ridotte, in media non superano gli 80-90 kb.

Alt Tag Immagine

Ed eccoci arrivati al tanto discusso Alt Tag, finalmente siamo pronti per ottimizzare le immagini.

C’è chi lo considera un fattore imprescindibile, ovvero un elemento che va assolutamente inserito e che è in grado di migliorare la struttura e l’accessibilità della pagina web, e soprattutto dare pertinenza al contenuto.

Dall’altro lato c’è chi invece non lo considera affatto (pratica ormai diffusissima) visto che di per sé non rappresenta un vero e proprio fattore di ranking. Sempre se rapportato alla SERP, ovvero i risultati di ricerca in cui comparirà la tua pagina.

Ma se lo rapportiamo invece alla SERP di Google Immagini cosa succede? Che cambia tutto.

Uscire tra i primi risultati nella SERP di Google Immagini porterà ovviamente maggiore traffico al sito. Ma non solo, perché a quanto pare Google è in grado di proporre le giuste immagini correlate sempre alla ricerca dell’utente.

Quindi posizionarsi bene su Google Immagini di conseguenza vi farà ottenere risultati migliori anche nella SERP “standard”.

Dove si trova l’Alt Tag Immagini

L’Alt Tag dell’immagine non è visibile all’utente e serve principalmente per dare un significato ad un contenuto visivo. Verrà invece letta dai crawler del motore di ricerca, che provvederanno poi a posizionare l’immagine nella SERP.

Inserire l’alt tag permette quindi ai crawler di riconoscere il contenuto di un’immagine pur non riuscendola tecnicamente a guardare. Come fanno? Beh è semplice, grazie alla descrizione che hai inserito come alt tag.

Per inserirla ti basterà andare nella Libreria Media (o caricare direttamente il file) e compilare il campo “Testo Alternativo” posto nella sezione destra (dove troverai tutte le info modificabili dell’immagine).

A questo punto non ti resta che inserire una breve descrizione dell’immagine, e il gioco è fatto. Segnaliamo inoltre che si tratta di uno strumento in grado di migliorare tantissimo l’accessibilità delle tue pagine web. Inserendo sempre il Testo Alternativo permetterai agli screen reader di Google di descrivere o leggere cosa viene rappresentato nell’immagine.

Rappresenta quindi un fattore determinante per persone con difficoltà visive. Inseritelo sempre!

Best Practices:

• lunghezza testo breve (max 60-70 caratteri);
• inserire keyword principale nell’alt tag di max 1 immagine;
• evita di inserire la stessa keyword;
• assicurati che descriva realmente di cosa si tratta.

I formati delle immagini

Esistono numerosi formati per le immagini, e sarà quindi possibile usare ognuno di essi in determinati ambiti. Le principali differenze tra i vari formati riguardano le dimensioni del file (ovvero il peso), la qualità dell’immagine ed il tipo (es. vettoriale).

E’ quasi impossibile conoscere tutti i formati di immagini disponibili, soprattutto se si pensa che ogni formato è destinato ad un determinato uso.

Ad esempio chi lavora nel campo della grafica digitale utilizzerà sicuramente il formato .raw, utile per ottenere file di immagini non compressi e magari attuare in seguito la gradazione di colore per renderla utilizzabile.

Si tratta di un formato molto conosciuto e utilizzato, ma sicuramente non adatto per i siti web. Lo stesso vale per i formati .tiff, .ai, .eps, .pict e così via.

Quindi, i migliori formati di immagini per siti web o che comunque possono rivelarsi utili sul web sono:

• Png;
• Jpeg;
• Gif;
• Bmp;
• Svg;
• Webp.

Formato PNG

Il formato PNG (Portable Network Graphics) è utilizzato per rappresentare immagini digitali di grafica raster. Supporta la compressione senza perdita di dati. Questo formato è stato creato per sostituire le immagini .gif.

Sviluppatore:

PNG Development Group

Anno di rilascio:

1996

Tipo di compressione:

Lossless

Uso principale:

immagini animate

Formato JPEG

Il formato Jpeg (Joint Photographic Experts Group) è molto probabilmente il più usato al mondo. E’ stato inoltre il primo standard internazione di compressione dell’immagine digitale a tono continuo. Utilizza quindi una compressione in grado di alleggerire notevolmente il file, a discapito della qualità. Più che un formato di immagine (o estensione) si tratta di un vero e proprio standard di compressione immagini.

Sviluppatore:

Joint Photographic Experts Group

Anno di rilascio:

1992

Tipo di compressione:

Lossy

Uso principale:

fotografie

Formato GIF

Il formato GIF (Graphics Interchange Format) è stato uno dei primi formati di immagine mai realizzati al mondo. Creato nel lontano 1987 da un team di esperti informatici capitanati da Steve Willhite, permette di creare immagini animate. E’ proprio questa caratteristica che lo ha reso famoso in tutto il mondo, e che per decenni gli ha permesso (insieme al .jpeg) di essere il formato più utilizzato sul web.

Sviluppatore:

CompuServe

Anno di rilascio:

1987

Tipo di compressione:

Lossless

Uso principale:

immagini animate

Formato SVG

Il formato SVG (Scalable Vector Graphics) ha rivoluzionato l’intero settore della grafica digitale. Uscito verso la fine del 2001, questo formato permette di visualizzare oggetti di grafica vettoriale e di modificarne la dimensione (intesa come “grandezza”) senza perdere nulla a livello qualitativo. In poche parole permette di ingrandire o rimpicciolire un’immagine vettoriale senza perdere niente in termini di risoluzione grafica.

Sviluppatore:

W3C

Anno di rilascio:

2001

Tipo di compressione:

nessuna

Uso principale:

grafiche vettoriali

Formato WEBP

Infine, c’è il formato Webp. E’ uno dei più recenti ed è stato sviluppato proprio da Google. E’ in grado di ridurre notevolmente le dimensioni (peso) di un file, può arrivare a comprimere il peso totale di un’immagine fino al 300%. In fatto di qualità può sia non perdere nulla a livello visivo, che perdere tantissimo. Tutto dipenderà da quanto vuoi comprimere il tuo file immagine.

Sviluppatore:

Google

Anno di rilascio:

2010

Tipo di compressione:

Lossy

Uso principale:

immagini digitali – fotografie