come ottimizzare le immagini per il web

Come ottimizzare le immagini per il web

Indice

L’ottimizzazione seo di un sito prevede molteplici attività, tra cui l’ottimizzazione delle immagini per il web.

Questa operazione è molto spesso sottovalutata e questo è un grave errore. Si perdono molti vantaggi come per esempio la possibilità di posizionarsi su Google immagini e inoltre si contribuisce a rendere il sito “pesante” e quindi lento nel caricamento. Inoltre, questa operazione richiede degli interventi ben più incisivi rispetto al semplice inserimento dell’alt tag e della descrizione (testo alternativo) dell’immagine.

Per evitare di dover correre ai ripari e intervenire in seconda battuta il consiglio è di adottare una procedura standard ogni qualvolta ci troviamo a dover caricare un’immagine su un sito web.

Ottimizzazione immagini: step consigliati

1. Rinominare le immagini

Quando scarichiamo le immagini dalla macchina fotografica o dal cellulare, notiamo che il nome attribuito alla foto è IMG seguito da una sequenza numerica es: img01234 e molte volte sono presenti anche caratteri speciali negli url delle foto, come gli underscore ecc.

John Muller di Google ha affermato: In genere consiglio di evitare caratteri speciali come virgole, punti e virgola, due punti, spazi, virgolette ecc. Negli URL, per mantenere le cose semplici” 

Come scegliere perciò il nome adatto all’immagine?

Il consiglio è di operare in modo semplice, descrivendo brevemente l’oggetto della foto. Il nome del file dovrebbe perciò:

    • descrivere l’immagine
    • essere breve con le parole separate da un trattino
    • evitare le stop words
    • comprendere una keyword, che contribuirà al posizionamento su google immagini. Per esempio: se rinomino l’immagine di una tartaruga di terra razza hermanni la salverò come “tartaruga-hermanni”

2. Ridimensionare le immagini

Limitare il peso delle immagini è fondamentale, per contribuire a mantenere le prestazioni del sito ad un livello ottimale. Assieme al caricamento di un numero limitato di plugin e all’utilizzo di un servizio di hosting performante è essenziale ridurre le dimensioni delle immagini. Come agire? Innanzitutto bisogna scegliere il giusto formato: le immagini che scarichiamo dalle macchine fotografiche o dai cellulari sono molto più grandi rispetto alle dimensioni massime previste dal sito.

3. Ridurre il "peso" delle immagini

Trovando un giusto compromesso tra qualità e velocità di caricamento. Io opero in questo modo: innanzitutto agisco sulla dimensione dei file immagine, riducendo la stessa a seconda delle necessità e per questo in genere utilizzo il tool gratuito Be Funky oppure Gimp. Dopo aver ridotto le dimensioni, mi occupo del peso e “passo” le immagini sul tool Shortpixel.

4. Inserimento del tag alt

Sfatiamo innanzitutto un mito, l’alt delle immagini non deve necessariamente contenere la keyword secca, se la stessa non è descrittiva e rappresentativa dell’immagine. Il tag alt non è altro che un testo alternativo il cui scopo è di  descrivere il contenuto dell’immagine, affinchè diventi comprensibile per Google, per i non vedenti e per chi utilizza i lettori di schermo. Certo del il tag alt contiene in modo naturale una keyword, ciò favorisce il suo posizionamentoche possa posizionarsi in modo pertinente si Google immagini e in modo anche da collegarsi al contenuto testuale della nostra pagina web. Se in una pagina utilizziamo più immagini, possiamo utilizzare la keyword principale in una/due immagini all’interno di una testo descrittivo, sempre che ci sia uno stretto rapporto di pertinenza. Per esempio se la keyword è tartaruga hermanni e ho un’immagine di una tartaruga che mangia insalata scriverò: alt=”esemplare di tartaruga hermanni mentre magia l’insalata”

5. Inserimento della didascalia

Un’altra pratica poco usata è quella di inserire la didascalia, cioè un breve testo descrittivo che compare sotto l’immagine, nella pagina web. Questo campo ha lo scopo di descrivere al lettore l’immagine e contribuisce ad aumentare il numero della parole del contenuto. 

6. Creare una sitemap per le immagini

Generare una sitemap delle immagini consente di segnalare a Google tutte le immagini presenti dul tuo sito web, che in tal modo potrebbero posizionarsi su Google Ricerca Immagini e vengano visualizzate nei risultati di ricerca.

7. Creare una sitemap per le immagini

In questo caso i file delle immagini vengono memorizzate dal browser dell’utente che ha visitato il tuo sito. Quando tornerà a farvi visita, non dovrà scaricarli nuovamente e la pagina verrà caricata in modo più rapido. Questo beneficio è particolarmente grande per i siti che possiedono molti visitatori “di ritorno”

8. Attivare il lazy loading

Come affermato da Google, questo strumento, a fronte di pagine contenenti molte immagini nella loro parte bassa, consente il caricamento delle stesse in base alle esigenze. In tal modo si evita il caricamento massivo delle immagini nel momento in cui l’utente accede alla pagina e il risultato è una maggiore velocità di caricamento della pagina stessa.

Strumenti per misurare il grado di ottimizzazione delle immagini

Quando ci troviamo di fronte a un sito già in essere e dobbiamo effettuare una Site Audit, uno degli elementi fondamentali da verificare sono proprio le immagini.

Gli strumenti a disposizione sono molti. Personalmente mi affido a Screaming Frog, per quanto riguarda la presenza dell’attributo alt e al peso delle immagini. Successivamente PageSpeed insight fornisce indicazioni utili in merito all’impatto delle immagini non ottimizzate sulle performance dedlla pagine. Questo tool gratuito di Google, inoltre, dà instruzioni per ottimizzare le immagini.

Anche Semrush, con il suo strumento di verifica del sito, individua le immagini che non possiedono l’attributo alt e inoltre segnala la presenza di immagini con link rotti (404). 

Plugin per ridurre il peso delle immagini

Sebbene la prassi migliore sia quella di intervenire prima di caricare le immagini, ci sono delle situazioni in cui  necessario agire in un secondo momento.

Questo potrebbe essere il caso in cui siamo chiamati ad intervenire su un sito già in essere contenente un numero elevato di immagini. Scaricarne ed ottimizzarne una ad una richiederebbe tempi molto lunghi e un aumento dei costi di ottimizzazione. 

Accorrono in nostro aiuto allora dei plugin come Smush Image Optimization, facile da configurare e consente di ridurre in modo massivo le immagini già presenti e agisce anche sui nuovi caricamenti. 

Un altro plugin molto efficace è Imagify, che oltre a ridurre il peso delle immagini consente di trasformarle in formato in WebP, sviluppato da Google. Questo consente di rendere le immagini ancora più leggere.

Anche Shortpixel Image Optimizer è estremamente utile e possiede anche una versione che consente di caricare le immagini sulla CDN di Shortpixel. Il plugin in questione è Shortpixel Adaptive Images.

Conclusioni

Nel 2021 Google rilascerà l’annunciato update Web Core Vitals, che avrà come suo obiettivo principale l’ottimizzazione dello user experience dell’utente. Possedere delle immagini ottimizzate sarà fondamentale: sappiamo che immagini pesanti possono influire in modo sostanziale in questo processo. Anche immagini e video con attributi di dimensioni non definite hanno effetti negativi sulla user experience, generando il movimento della pagina anche quando la stessa sembra essere completamente caricata.

Torna su