Le immagini rappresentano in media oltre il 50% del peso di una pagina web. Eppure, nella maggior parte dei siti che analizziamo, l'ottimizzazione visuale e l'ultimo aspetto a ricevere attenzione. Il risultato sono pagine lente, punteggi Core Web Vitals insufficienti e un'enorme opportunita di traffico sprecata: Google Images genera miliardi di ricerche al mese e chi si posiziona bene ottiene visite qualificate a costo zero.
In questa guida affrontiamo ogni aspetto della SEO per immagini, dai formati moderni all'alt text, dal lazy loading alle immagini responsive. L'obiettivo e fornirvi un metodo completo per ottimizzare le immagini del vostro sito, sia per i motori di ricerca sia per l'esperienza utente.
Perche la SEO per immagini e importante
Le immagini influiscono sul posizionamento in almeno tre modi distinti. Primo: il peso delle immagini determina in larga parte la velocita di caricamento, che e un fattore di ranking diretto attraverso i Core Web Vitals. Un'immagine hero da 3 MB puo da sola far fallire il test LCP.
Secondo: Google Images e un motore di ricerca a se stante. Le best practice ufficiali di Google per le immagini spiegano chiaramente che immagini ben ottimizzate e correttamente descritte possono apparire sia nei risultati immagine sia nei rich result della ricerca principale.
Terzo: le immagini migliorano l'esperienza utente. Un articolo con immagini pertinenti, grafici e screenshot trattiene il lettore piu a lungo, riduce la frequenza di rimbalzo e aumenta le possibilita di condivisione. Tutti segnali che Google interpreta positivamente.
Formati moderni: WebP e AVIF
Se ancora servite immagini esclusivamente in JPEG e PNG, state lasciando performance sul tavolo. I formati di nuova generazione offrono una compressione nettamente superiore a parita di qualita percepita.
WebP, sviluppato da Google, riduce il peso delle immagini del 25-35% rispetto a JPEG con compressione lossy, e fino al 26% rispetto a PNG con compressione lossless. Il supporto browser e ormai universale: tutti i principali browser lo gestiscono dal 2020.
AVIF, basato sul codec video AV1, va ancora oltre: in molti test offre una riduzione del 50% rispetto a JPEG a parita di qualita. Il supporto browser e cresciuto rapidamente e nel 2026 copre Chrome, Firefox, Safari e Edge. L'unico svantaggio e che la codifica e piu lenta, il che puo essere un problema per siti con migliaia di immagini da convertire in tempo reale.
La strategia consigliata e servire AVIF come prima scelta, WebP come fallback e JPEG/PNG come ultimo ricorso, utilizzando l'elemento HTML <picture>:
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Descrizione">
</picture>
Compressione senza perdita di qualita
La compressione e l'intervento con il miglior rapporto sforzo-risultato. Molte immagini caricate sui siti contengono metadati EXIF inutili, profili colore non necessari e livelli di qualita eccessivi per l'uso web.
Alcune linee guida pratiche:
- Per le fotografie, una qualita JPEG tra 75 e 85 e generalmente indistinguibile dal 100% a occhio nudo, con un risparmio di peso del 40-60%.
- Per grafici, icone e screenshot, il formato PNG resta appropriato, ma passate sempre le immagini attraverso un ottimizzatore come pngquant o OptiPNG.
- Rimuovete i metadati. Le foto scattate con smartphone contengono dati GPS, modello del dispositivo e parametri di scatto che aggiungono peso senza valore per il web.
- Ridimensionate prima di caricare. Un'immagine da 4000x3000 pixel visualizzata a 800x600 spreca banda. Servite immagini nelle dimensioni effettive di visualizzazione.
La documentazione su web.dev dedicata all'ottimizzazione delle immagini approfondisce le tecniche di compressione con esempi e confronti visivi.
Alt text: scrivere per utenti e motori di ricerca
L'attributo alt e il ponte tra il contenuto visivo e il contenuto testuale. Serve a tre scopi fondamentali: descrivere l'immagine agli utenti che utilizzano screen reader, fornire contesto ai motori di ricerca e apparire come testo sostitutivo quando l'immagine non viene caricata.
Regole per un alt text efficace:
- Siate descrittivi ma concisi. Un buon alt text ha tra 5 e 15 parole. Descrivete cosa mostra l'immagine, non cosa vorreste che mostrasse.
- Includete la keyword quando e naturale. Se l'immagine mostra un grafico sui Core Web Vitals, scrivete
alt="Grafico che confronta i punteggi LCP prima e dopo l'ottimizzazione". Non forzate keyword irrilevanti. - Evitate "immagine di" o "foto di". Il browser sa gia che e un'immagine. Andate dritti al contenuto.
- Non lasciate l'alt vuoto sulle immagini informative. Un
alt=""e corretto solo per immagini puramente decorative che non aggiungono informazione al contenuto. - Contestualizzate. Lo stesso prodotto puo avere alt text diversi a seconda della pagina. In una pagina di categoria:
alt="Scarpa da running Nike Air Zoom". In una guida alla scelta:alt="Suola della Nike Air Zoom con dettaglio della tecnologia di ammortizzazione".
Lazy loading nativo
Il lazy loading ritarda il caricamento delle immagini fino a quando non stanno per entrare nel viewport dell'utente. E una delle tecniche piu semplici e piu efficaci per migliorare il tempo di caricamento iniziale della pagina.
HTML offre un attributo nativo che non richiede JavaScript:
<img src="foto.jpg" alt="Descrizione" loading="lazy" width="800" height="600">Attenzione a due errori comuni:
- Non applicate il lazy loading alle immagini above-the-fold. L'immagine hero o il logo devono caricarsi immediatamente. Aggiungere
loading="lazy"a queste risorse peggiora l'LCP, come spieghiamo nella guida ai Core Web Vitals. - Specificate sempre width e height. Senza dimensioni esplicite, il browser non puo riservare lo spazio corretto prima del caricamento, causando layout shift (CLS).
Il supporto browser per loading="lazy" e completo su tutti i browser moderni. Non servono librerie JavaScript aggiuntive.
Image sitemap
Le immagini possono essere incluse nella sitemap XML del sito per aiutare Google a scoprirle e indicizzarle. Questo e particolarmente utile per immagini caricate dinamicamente via JavaScript o per siti con una struttura complessa dove il crawler potrebbe non raggiungere tutte le risorse.
La struttura e semplice. All'interno di ogni elemento <url> della sitemap potete aggiungere uno o piu tag <image:image>:
<url>
<loc>https://esempio.it/prodotto/</loc>
<image:image>
<image:loc>https://esempio.it/img/prodotto.jpg</image:loc>
</image:image>
</url>
Non e necessario creare una sitemap separata per le immagini: potete integrarle nella sitemap principale. Google consiglia di includere nella sitemap le immagini piu importanti, non necessariamente tutte.
CDN per le immagini
Una Content Delivery Network distribuisce le immagini da server geograficamente vicini all'utente, riducendo la latenza di rete. Per un sito con pubblico italiano, un CDN con nodi in Europa puo ridurre il tempo di download delle immagini del 30-50% rispetto a un server singolo.
I CDN moderni offrono anche funzionalita avanzate:
- Conversione automatica dei formati. Il CDN rileva il browser dell'utente e serve automaticamente AVIF, WebP o JPEG.
- Ridimensionamento on-the-fly. Invece di generare manualmente ogni variante, passate i parametri nell'URL e il CDN crea la versione richiesta.
- Compressione intelligente. Algoritmi che adattano il livello di compressione al contenuto dell'immagine, mantenendo la qualita dove serve.
Se gestite la SEO tecnica di un sito con molte immagini, un CDN dedicato e un investimento che si ripaga rapidamente in termini di performance e posizionamento.
Immagini responsive con srcset
Gli utenti accedono al vostro sito da schermi che vanno dai 320 pixel di un telefono ai 2560 pixel di un monitor 4K. Servire la stessa immagine a tutti e uno spreco per chi naviga da mobile e un compromesso per chi ha uno schermo ad alta risoluzione.
L'attributo srcset risolve il problema indicando al browser le varianti disponibili:
<img
src="foto-800.jpg"
srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Descrizione">
Il browser sceglie automaticamente la variante piu appropriata in base alla larghezza del viewport e alla densita di pixel dello schermo. L'attributo sizes aiuta il browser a fare questa scelta prima di scaricare l'immagine, evitando download inutili.
Per la SEO on-page, le immagini responsive migliorano sia la velocita su mobile sia l'esperienza utente, due fattori che Google valuta esplicitamente nel ranking.
Nomi dei file: un dettaglio che conta
Prima ancora dell'alt text, Google legge il nome del file. Un'immagine chiamata IMG_20260215_143022.jpg non comunica nulla. Una chiamata ottimizzazione-immagini-seo.jpg fornisce contesto immediato.
Regole semplici:
- Usate parole descrittive separate da trattini.
- Evitate caratteri speciali, spazi e lettere maiuscole.
- Mantenete i nomi ragionevolmente brevi: 3-5 parole bastano.
- Se avete migliaia di immagini prodotto, create una convenzione di naming coerente (es.
categoria-nome-prodotto-variante.webp).
Conclusione
L'ottimizzazione delle immagini e uno di quegli ambiti dove piccoli interventi producono risultati sproporzionati. Convertire le immagini in WebP, aggiungere alt text descrittivi, implementare il lazy loading nativo e servire varianti responsive non richiede settimane di lavoro, ma puo migliorare drasticamente sia le performance del sito sia il traffico da Google Images.
L'approccio che consigliamo e partire dalla compressione e dai formati, che offrono il guadagno piu immediato, poi passare all'alt text e infine alle tecniche avanzate come srcset e CDN. Ogni passo costruisce sul precedente, e il risultato complessivo e un sito piu veloce, piu accessibile e meglio posizionato.
Per verificare l'impatto delle vostre ottimizzazioni sulle metriche di performance, la nostra guida ai Core Web Vitals vi mostra esattamente come misurare i miglioramenti con PageSpeed Insights e Lighthouse.