Come ottimizzare le immagini per la SEO: tecniche e best practice

Una illustrazione sul tema come ottimizzare le immagini per la SEO

Ottimizzare le immagini per la SEO è cruciale per qualsiasi sito web.

Le foto non solo migliorano l’aspetto e l’attrattiva di una pagina, ma, se ottimizzate in modo corretto, possono anche contribuire ad incrementare gli accessi e le conversioni.

Di seguito, esploreremo le migliori pratiche per l’ottimizzazione SEO delle immagini al fine di migliorare il posizionamento nei motori di ricerca e l’esperienza utente.

Se vuoi saperne di più sulla ottimizzazione per i motori di ricerca, dai un’occhiata alla nostra guida sul posizionamento SEO!

Di cosa parliamo

Scegliere il formato giusto

Scegliere il formato giusto per i tuoi file di immagine è un passo cruciale. Ogni tipo di file ha i suoi vantaggi specifici. Scopriamoli assieme!

JPEG (Joint Photographic Experts Group)

  • Vantaggi: supporta una vasta gamma di colori, è ideale per le fotografie. Offre una buona compressione che riduce la dimensione del file mantenendo una qualità accettabile.
  • Ottimizzazione: utilizza la compressione di Photoshop o Gimp per ridurre le dimensioni del file. Attenzione a non esagerare, poiché una compressione eccessiva può degradare la qualità dell’immagine.

PNG (Portable Network Graphics)

  • Vantaggi: supporta la trasparenza del background e mantiene la nitidezza delle linee e dei testi. E’ l’ideale per loghi e icone.
  • Ottimizzazione: i file PNG tendono ad avere dimensioni di file maggiori rispetto ai JPEG. Usa questo formato con parsimonia, e solo quando è necessario.

WebP

  • Vantaggi: un formato moderno sviluppato da Google che offre compressione sia lossy (con perdita) che lossless (senza perdita). I file WebP hanno dimensioni di file molto più piccole rispetto a JPEG e PNG a parità di qualità visiva.
  • Ottimizzazione: ideale per il web grazie alla sua efficienza nella compressione. Assicurati che il tuo server web e i browser dei tuoi utenti supportino il formato WebP.

SVG (Scalable Vector Graphics)

  • Vantaggi: perfetto per grafiche vettoriali come loghi e icone. Gli SVG sono basati su XML, il che possono essere indicizzati dai motori di ricerca e sono scalabili senza perdita di qualità.
  • Ottimizzazione: ottimizza i file SVG eliminando i dati inutili con strumenti come SVGO. Questi file possono anche essere compressi per ridurre ulteriormente le dimensioni.

Ottimizzare la dimensione reale e il peso delle immagini

L’ottimizzazione SEO delle immagini passa per la ottimizzazione della dimensione e del peso. In questo modo potrai migliorare la velocità di caricamento delle pagine, l’esperienza utente e, di conseguenza, la SEO del tuo sito.

Ridurre le dimensioni reali

Prima di caricare foto sul tuo sito, assicurati che siano ridimensionate in base allo spazio in cui saranno visualizzate.

Non ha senso caricare un’immagine di 4000 pixel di larghezza se verrà visualizzata in un contenitore largo massimo 800 pixel.

Può essere utile adoperare software di editing grafico (Photoshop) o strumenti online per ridimensionare i file senza perdere qualità.

Effettuare la compressione dei file

La compressione riduce la dimensione del file eliminando informazioni non necessarie, con un minimo o nullo impatto visivo sulla qualità dell’immagine.

Esistono due tipi di compressione:

  • Lossy: riduce la dimensione del file eliminando alcuni dati dell’immagine, potenzialmente riducendo la qualità. È efficace per le fotografie.
  • Lossless: riduce la dimensione del file senza eliminare dati, mantenendo la qualità originale. È ideale per grafiche con testo o icone.

Utilizzare strumenti di ottimizzazione

Oltre a Photoshop, ci sono molti strumenti e servizi online che possono aiutarti a comprimere e ottimizzare i tuoi file. Tra i più popolari abbiamo:

  • TinyPNG/TinyJPG: ottimo per la compressione lossy di file PNG e JPEG, riduce le dimensioni del file con una minima perdita di qualità.
  • ImageOptim: una soluzione desktop per utenti Mac che supporta la compressione sia lossy che lossless.
  • Kraken.io: un potente strumento online che offre sia compressione lossy che lossless, oltre a un’API per l’automazione del processo di ottimizzazione.

Sfruttare le funzionalità del CMS

Se il tuo sito è basato su un CMS come WordPress, Joomla o Shopify, ci sono plugin o estensioni che possono ottimizzare in automatico le foto quando le carichi.

Questi strumenti possono convertire i file in formato Webp e ottimizzare in massa le foto, velocizzando le operazioni.

Ad esempio, su WordPress è disponibile l’ottimo EWWW Image Optimizer. Questo plugin, oltre ad effettuare la conversione in Webp, alleggerisce il peso dei file operando una compressione lossly o lossless, sia in blocco che di volta in volta.

Utilizzare nomi di file descrittivi

Un seo specialist lo sa bene: i nomi dei file di immagine dovrebbero essere descrittivi e includere parole chiave pertinenti per migliorare la SEO. Ecco alcuni suggerimenti.

Scegliere nomi di file descrittivi, pertinenti e concisi

Quando salvi un’immagine, usa un nome di file che descriva chiaramente il contenuto usando parole chiave per cui vuoi che l’immagine sia trovata.

Ad esempio, invece di nominare un’immagine con una serie casuale di numeri o lettere come “DSC10024.jpg”, usa un nome che rifletta il contenuto dell’immagine, come “gelato-artigianale-roma.jpg”.

Sebbene sia importante essere descrittivi, cerca anche di mantenere i nomi dei file relativamente brevi.

Nomi di file eccessivamente lunghi possono essere troncati o gestiti male da alcuni browser o CMS. Cerca di trovare un buon equilibrio tra brevità e descrizione.

Utilizzare i separatori corretti

Per separare le parole nel nome del file, utilizza i trattini (-) invece degli underscore (_).

Google tratta i trattini come spazi, permettendo di interpretare meglio le parole chiave. Ad esempio, “gelato-artigianale-roma.jpg” è preferibile a “gelato_artigianale_roma.jpg”.

Evitare caratteri speciali e maiuscole

I caratteri speciali, quando disponibili, possono causare problemi con alcuni browser e CMS.

L‘uso coerente delle minuscole è consigliabile per ragioni di chiarezza e leggibilità.

Rinominare file di immagine esistenti in modo sicuro

Cambiare il nome di una foto già caricata richiederà di aggiornare anche tutti i link esistenti che puntano a quella risorsa.

Inoltre, potresti voler impostare reindirizzamenti 301 dai vecchi URL ai nuovi per preservare il valore SEO e garantire che gli utenti e i motori di ricerca vengano indirizzati correttamente alle foto.

Se il tuo sito è fatto con WordPress, potresti fare tutto questo con Phoenix Media Rename.

Aggiungere testo alternativo (alt text)

L’aggiunta di testo alternativo (alt text) è una pratica essenziale nell’ottimizzazione delle immagini per la SEO, oltre a essere cruciale per l’accessibilità web.

Il testo alternativo aiuta i motori di ricerca a comprendere il contenuto di una immagine e migliora l’esperienza degli utenti che utilizzano lettori di schermo.

Si parla erroneamente di “tag alt”. In realtà è un attributo del tag img.

<img src="immagine.jpg" alt="Descrizione dell'immagine">

Se hai sviluppato il tuo sito con WordPress o un qualsiasi CMS non dovrai preoccuparti di scrivere il codice dell’alt text (e neppure, come vedremo sotto, title e caption). Ti basterà sfruttare gli appositi campi del CMS.

Ecco come scrivere alt text efficaci e utili per l’ottimizzazione SEO delle immagini.

Sii descrittivo, conciso e specifico quando necessario

Il testo alternativo dovrebbe descrivere accuratamente l’immagine, utilizzando un linguaggio chiaro e diretto. Cerca di essere conciso, così gli screen reader potranno leggerlo facilmente senza interruzioni.

È implicito che il testo alternativo si riferisca a un’immagine, quindi iniziare con queste frasi è ridondante. Invece, vai direttamente alla descrizione dell’immagine.

Se l’immagine contiene informazioni cruciali, come grafici o infografiche, il tuo alt text dovrebbe fornire una descrizione dettagliata che trasmetta lo stesso valore informativo dell’immagine stessa agli utenti che non possono vederla.

Usa parole chiave pertinenti

Includi parole chiave pertinenti nel tuo alt text, ma fai attenzione a non fare keyword stuffing (l’inserimento eccessivo e forzato di parole chiave).

Il tuo obiettivo principale è descrivere il contenuto dell’immagine in modo naturale, integrando le parole chiave in modo che abbia senso nel contesto.

Non trascurare gli elementi decorativi e i pulsanti

Per gli elementi puramente decorativi, che non aggiungono informazioni importanti al contenuto, è comunque buona pratica utilizzare l’attributo alt, ma puoi lasciarlo vuoto (alt=””). Ciò indica ai lettori di schermo che possono ignorare l’immagine.

Se utilizzi foto o elementi grafici come pulsanti di navigazione, il testo alternativo dovrebbe descrivere l’azione del pulsante o la pagina a cui conduce, aiutando a guidare gli utenti che utilizzano assistenti alla navigazione.

Ottimizzare title e caption (didascalie) dell’immagine

L’ottimizzazione degli attributi title e caption (didascalia) è un altro aspetto importante dell’ottimizzazione delle immagini per la SEO.

Anche se non hanno un impatto diretto sul ranking quanto il testo alternativo, possono migliorare l’esperienza utente e precisare meglio il contesto ai motori di ricerca.

Ecco il loro aspetto:

<figure>
  <img src="immagine.jpg" alt="Descrizione dell'immagine">
  <figcaption>Qui la didascalia dell'immagine.</figcaption>
</figure>

Ottimizzare il title

  • Cos’è il tag title: il tag title viene visualizzato quando un utente passa il mouse sopra un’immagine. È un’opportunità per aiutare il motore di ricerca a comprendere il contesto della pagina.
  • Come ottimizzarlo: includi parole chiave pertinenti nel tag title in modo naturale, ma assicurati che la descrizione sia utile e informativa per l’utente. Evita di riempire il tag title con una lista di parole chiave, poiché il suo obiettivo è anzitutto quello di migliorare l’esperienza utente.

Ottimizzare i caption

  • Importanza dei caption: i caption, o didascalie, appaiono sotto l’immagine e sono visibili direttamente sulla pagina. I dati mostrano che i caption vengono letti in media 300% più spesso del corpo del testo stesso. Sono elementi cruciali per l’engagement dell’utente.
  • Come ottimizzarli: usa i caption per fornire contesto o spiegazioni aggiuntive per l’immagine. Come per il tag title, includi parole chiave pertinenti in modo naturale. Un buon caption dovrebbe arricchire l’immagine e il contenuto circostante, aggiungendo valore per l’utente.

Best practices comuni

  • Coerenza e pertinenza: assicurati che sia i tag title che i caption siano pertinenti al contenuto dell’immagine e alla pagina in cui si trova. La coerenza tra il testo dell’immagine e il contesto della pagina aiuta i motori di ricerca a capire meglio il contenuto e il suo valore per gli utenti.
  • Utilizzo strategico delle parole chiave: è importante includere parole chiave, ma la priorità dovrebbe essere sempre fornire valore agli utenti. I motori di ricerca premiano i contenuti che offrono la migliore esperienza utente.
  • Breve e informativo: mantieni i tag title e i caption concisi ma informativi. Un buon equilibrio tra brevità e descrizione aiuta gli utenti a comprendere il contesto dell’immagine senza essere sopraffatti da testo eccessivo.
  • Migliorare l’accessibilità: oltre alla SEO, considera come i tag title e i caption possano migliorare l’accessibilità del tuo sito. Fornire descrizioni chiare e utili può aiutare tutti gli utenti, inclusi quelli con disabilità visive che utilizzano tecnologie di lettura assistita.

Sfruttare il lazy loading

Il lazy loading è una tecnica efficace per migliorare i tempi di caricamento delle pagine e, di conseguenza, l’esperienza utente e la SEO del tuo sito.

Il lazy loading ritarda il caricamento di una immagine fino a quando non è necessario, cioè fino a quando non entrano nel viewport dell’utente. Può applicarsi anche ai video e agli iframe.

Questo risorse vengono caricate solo quando l’utente può vederle scorrendo lo schermo verso il basso, riducendo il tempo di caricamento iniziale.

Implementare il lazy loading

HTML

Recentemente, il lazy loading è diventato ancora più semplice grazie al supporto nativo in HTML.

Puoi aggiungere l’attributo loading="lazy" a qualsiasi tag <img> o <iframe> per abilitare il lazy loading senza la necessità di JavaScript. Ecco un esempio:

<img src="immagine-esempio.jpg" loading="lazy">

JavaScript

Per un controllo più granulare o per supportare browser che non implementano ancora l’attributo loading, puoi utilizzare librerie JavaScript come Lozad.js o LazySizes, che offrono varie opzioni di configurazione.

Plugin

Se hai un sito WordPress, per il lazy loading puoi usare plugin come EWWW Image Optimizer o Wp Rocket.

Leggi anche: Creare un sito con WordPress: la guida completa

Vantaggi del lazy loading

  • Miglioramento dei tempi di caricamento: il tempo di caricamento iniziale della pagina si riduce notevolmente.
  • Risparmio di banda: il lazy loading può aiutare gli utenti con connessioni limitate o lente, poiché riduce la quantità di dati consumati durante la navigazione.
  • Miglioramento del SEO: poiché per Google e altri motori di ricerca la velocità di caricamento di una pagina web è un fattore di ranking, il lazy loading può contribuire in modo positivo al posizionamento del tuo sito.

Considerazioni

  • Il lazy loading migliora la velocità di caricamento, ma devi assicurati che ciascuna immagine sia sempre accessibile ai crawler dei motori di ricerca.
  • Verifica, inoltre, che l’implementazione del lazy loading non comprometta l’accessibilità del tuo sito.
  • Infine, dato che il supporto può variare, è importante testare il lazy loading su una gamma di dispositivi e browser per assicurare una buona esperienza utente ovunque.

Utilizzare immagini responsive (srcset)

Utilizzare l’attributo srcset è essenziale per avere foto che si adattino ai diversi dispositivi e dimensioni di schermo.

Questa tecnica consente di fornire varie versioni di un’immagine, permettendo al browser di selezionare la più adatta in base alla larghezza dello schermo o alla risoluzione del dispositivo.

Come funziona srcset: implementazione di base

L’attributo srcset si usa dentro al tag <img> per specificare un elenco di file con le loro larghezze in pixel. Il browser sceglie quale immagine scaricare basandosi sulla dimensione dello schermo, la densità dei pixel del dispositivo e le impostazioni di zoom dell’utente.

<img src="immagine-piccola.jpg" srcset="immagine-piccola.jpg 500w, immagine-media.jpg 1000w, immagine-grande.jpg 1500w" alt="Descrizione dell'immagine">

In questo esempio, 500w, 1000w e 1500w indicano la larghezza di ciascuna immagine. Il browser sceglie l’immagine in base alla larghezza dello schermo e alla risoluzione.

Uso con sizes

Per avere più controllo, puoi combinare srcset con l’attributo sizes per indicare al browser come verranno dimensionati file a varie larghezze della viewport:

<img src="immagine-piccola.jpg" srcset="immagine-piccola.jpg 500w, immagine-media.jpg 1000w, immagine-grande.jpg 1500w" sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px" alt="Descrizione dell'immagine">

Qui sizes dice al browser di usare l’immagine da 500px se la viewport è larga fino a 600px, quella da 1000px se larga fino a 900px e quella da 1500px per viewport più larghe.

Vantaggi delle immagini responsive

  • Migliorare l’esperienza utente: srcset fornisce un’esperienza visiva ottimale su un’ampia gamma di dispositivi, assicurando che le foto siano chiare e non più grandi del necessario.
  • Efficienza nel caricamento: questa tecnica riduce i tempi di caricamento delle pagine scegliendo file adeguati al dispositivo in uso.
  • Migliorare la SEO: Google premia i siti che offrono una buona esperienza utente, inclusa la velocità di caricamento e l’usabilità su dispositivi mobili. Usare srcset contribuisce in modo positivo a questi fattori.

Creare una sitemap delle immagini

Creare una sitemap delle immagini è un passaggio cruciale per aiutare i motori di ricerca a trovare tutte le foto sul tuo sito.

Una sitemap delle immagini può essere integrata nella sitemap generale del tuo sito o creata come un file a parte. Ecco come fare.

Aggiungere immagini alla sitemap generale

Se hai già una sitemap per il tuo sito web, puoi aggiungere informazioni sulle immagini utilizzando il namespace xmlns:image di Google Sitemap.

Ecco come potrebbe essere strutturato un esempio:

<url> <loc>http://www.esempiosito.it/pagina-esempio/</loc> <image:image><image:loc>http://www.esempiosito.it/upload/esempio.jpg</image:loc><image:caption>Descrizione dell'immagine qui</image:caption> <image:title>Titolo immagine qui</image:title> <image:geo_location>Città, Paese</image:geo_location><image:license>http://www.esempiosito.it/licenza/</image:license> </image:image> </url>

In questo frammento, per ogni elemento <image:image>, puoi specificare:

  • <image:loc>: L’URL dell’immagine.
  • <image:caption>: Una descrizione o didascalia dell’immagine.
  • <image:title>: Il titolo dell’immagine.
  • <image:geo_location>: La posizione geografica dell’immagine, se pertinente.
  • <image:license>: Un URL che punta alla pagina della licenza dell’immagine, se disponibile.

Creare una sitemap delle immagini separata

Se preferisci, puoi creare una sitemap dedicata esclusivamente alle immagini.

Può essere utile se il tuo sito è molto grande o se vuoi dare priorità all’indicizzazione delle immagini.

Il processo di creazione è simile, ma in questo caso, il file XML conterrà solo informazioni relative alle foto. Ecco come iniziare:

  1. Genera un elenco di tutti i file di immagine che vuoi includere nella sitemap. Puoi farlo manualmente o utilizzare strumenti come crawler di siti web.
  2. Crea il file XML seguendo lo schema sitemap di Google, come mostrato nell’esempio sopra.
  3. Carica la sitemap sul tuo server web e inviala a Google tramite Google Search Console. Questo aiuterà Google a scoprire e indicizzare le tue foto più efficacemente.

Usa un plugin

Se il tuo sito è sviluppato con WordPress, puoi adoperare un plugin come Yoast SEO, che genera una sitemap.xml comprensiva di immagini.

In alternativa, puoi usare un plugin come Simple Image XML Sitemap.

Aumentare la velocità di caricamento tramite CDN

Integrare una Content Delivery Network (CDN) nell’ottimizzazione SEO delle tue immagini può migliorare significativamente la velocità di caricamento del sito e l’esperienza utente.

Una CDN memorizza le tue foto su server situati in diverse aree geografiche, riducendo i tempi di latenza. Questo significa che le immagini vengono caricate più velocemente perché vengono servite dal server più vicino all’utente che richiede la pagina.

Scopri qui le migliori CDN per WordPress.

Sfruttare il caching delle immagini

Sfruttare il caching delle immagini è una tecnica efficace per migliorare la velocità di caricamento delle pagine del tuo sito e, conseguentemente, la SEO.

Il caching permette ai browser dei visitatori di memorizzare localmente copie di risorse statiche, come file di immagine, CSS e file JavaScript, riducendo così la necessità di scaricarle nuovamente in visite successive. Ecco come puoi attivare un sistema di caching.

Impostare header HTTP per il caching

Puoi controllare il caching dei tuoi file attraverso gli header HTTP, che dicono al browser per quanto tempo memorizzare in cache una risorsa.

Utilizza header come Cache-Control per specificare la massima età (max-age) di una risorsa nella cache prima che debba essere nuovamente scaricata.

Ad esempio, potresti impostare un’immagine per essere memorizzata in cache per un anno, dato che le immagini di solito non cambiano frequentemente.

Cache-Control: public, max-age=31536000

Utilizzare la validazione delle risorse

Per le risorse che potrebbero cambiare più di frequente, considera l’utilizzo della validazione delle risorse.

Questa tecnica permette al browser di verificare con il server se una versione memorizzata in cache di una risorsa è ancora valida, utilizzando gli header Last-Modified o ETag.

Se la risorsa non è cambiata, il server risponderà con uno stato 304 (Non modificato), evitando così un download inutile.

Ottimizzazione delle immagini per il caching

  • Minimizza le variazioni: cerca di riutilizzare le stesse foto in più pagine del tuo sito, per massimizzare i benefici del caching.
  • Versioning delle risorse: quando aggiorni una foto, cambia il suo nome file (ad esempio, aggiungendo un numero di versione o un timestamp) per invalidare la cache precedente. Questo assicura che gli utenti carichino la versione più recente.
  • Utilizza un plugin WordPress: se non sei pratico di sviluppo o hai un sito WordPress, puoi usare un plugin come WpRocket.

Monitorare l’efficacia con strumenti analitici

Monitorare l’efficacia dell’ottimizzazione SEO delle immagini è fondamentale per assicurarsi che contribuiscano alla visibilità e al ranking del tuo sito.

In particolare, puoi adoperare Google PageSpeed Insights e GTmetrix.

Questi strumenti valutano, tra le altre cose, l’efficacia della compressione delle foto, il corretto uso del lazy loading e la scelta dei formati di immagine, offrendo suggerimenti pratici per miglioramenti.

Conclusioni

Implementando queste strategie avanzate, puoi ottimizzare le immagini del tuo sito non solo per migliorare il posizionamento sui motori di ricerca ma anche per offrire una migliore esperienza agli utenti, indipendentemente dal dispositivo o dalla connessione internet che utilizzano.

L’ottimizzazione delle immagini è un processo in continua evoluzione, quindi è importante rimanere aggiornati sulle ultime tendenze e best practice.

Hai bisogno di aiuto? Richiedi l’intervento di un consulente SEO esperto!