Ottimizzare le Immagini per la SEO: Guida Pratica

Le immagini del tuo sito portano visite da Google o rallentano le pagine? Dipende da come le prepari. Ottimizzare le immagini per la SEO significa aiutare Google a capire cosa mostrano, con il nome del file, il testo alternativo e il testo che le circonda; poi farle caricare in fretta, con il formato, il peso e le dimensioni giuste.

Perché Ottimizzare le Immagini per la SEO?

Ottimizzare le immagini per la SEO serve a tre cose: ricevere visite dalle ricerche visive, rendere le pagine più veloci e renderle comprensibili anche a chi non può vederle.

• Visite: le immagini compaiono in Google Immagini, nei risultati principali, in Discover e nelle ricerche fatte con Google Lens, che a ottobre 2024 secondo Google veniva usato per quasi 20 miliardi di ricerche visive al mese.
• Velocità: le immagini sono spesso le risorse più pesanti della pagina; l’immagine principale, poi, è spesso l’elemento che determina il Largest Contentful Paint.
• Accessibilità: il testo alternativo è ciò che i lettori di schermo leggono al posto dell’immagine. Per molti negozi online l’accessibilità è anche un obbligo: l’atto europeo sull’accessibilità si applica dal 28 giugno 2025 anche al commercio elettronico, con alcune esenzioni, come quella per le microimprese che forniscono servizi.

Come Fa Google a Capire Cosa Mostra un’Immagine?

Google capisce il soggetto di un’immagine combinando il testo alternativo, algoritmi di visione artificiale e il contenuto della pagina in cui l’immagine si trova. Per questo conta anche il testo che circonda un’immagine.

Due condizioni tecniche vengono prima di tutto il resto. Google indicizza le immagini inserite con il tag <img> e l’attributo src, anche dentro un elemento <picture>, mentre non indicizza le immagini di sfondo caricate dal CSS. I formati supportati sono BMP, GIF, JPEG, PNG, WebP, SVG e AVIF; l’estensione del file deve corrispondere al tipo di file. Le best practice di Google per le immagini danno queste indicazioni.

Come Ottimizzare le Immagini per la SEO?

Per ottimizzare un’immagine per la SEO scegline una pertinente, esportala alla larghezza a cui viene mostrata, comprimila in WebP o AVIF, dalle un nome descrittivo, scrivi il testo alternativo e inseriscila nella pagina con gli attributi width e height. Ecco i passaggi uno per uno.

Quali Immagini Scegliere?

Scegli immagini originali e legate al testo che accompagnano: le foto dei tuoi prodotti, del tuo lavoro e dei tuoi spazi dicono agli utenti molto più di una foto di repertorio che si trova uguale su tanti altri siti. Mettile vicino al testo che ne parla ed evita di affidare all’immagine testi importanti, come titoli, prezzi o voci di menu: il testo dentro un’immagine non si seleziona, gli strumenti di traduzione non lo leggono e sugli schermi piccoli diventa illeggibile.

Che Dimensioni Devono Avere le Immagini?

Un’immagine non dovrebbe essere più grande di quanto serve per mostrarla: una foto larga 4000 pixel ridotta a 800 dal CSS fa scaricare al browser molti più dati del necessario. Prepara più versioni della stessa immagine, per esempio larghe 480, 800 e 1200 pixel; poi lascia che il browser scelga quella giusta per lo schermo con gli attributi srcset e sizes, mantenendo lo stesso rapporto d’aspetto in tutte le versioni.

<img src="/immagini/divano-velluto-verde-800.webp"
     srcset="/immagini/divano-velluto-verde-480.webp 480w,
             /immagini/divano-velluto-verde-800.webp 800w,
             /immagini/divano-velluto-verde-1200.webp 1200w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Divano a tre posti in velluto verde" width="800" height="533">

La guida di Google a Discover raccomanda immagini grandi: almeno 1200 pixel di larghezza, con l’anteprima grande consentita dall’impostazione max-image-preview:large.

Qual è il Formato Migliore per le Immagini di un Sito?

Per foto e grafiche il formato più efficiente oggi è AVIF o WebP, con un JPEG o un PNG di riserva nel tag <picture> per i browser che non li leggono. Secondo la documentazione di WebP, a parità di qualità un WebP pesa dal 25 al 34% in meno di un JPEG e, nella versione senza perdita, il 26% in meno di un PNG; supporta anche la trasparenza. AVIF in genere comprime ancora meglio ed è letto da tutti i principali browser da gennaio 2024.

• AVIF o WebP: fotografie, illustrazioni e immagini di prodotto.
• SVG: loghi, icone e grafiche vettoriali, che restano nitide a ogni dimensione.
• PNG: solo quando serve un’immagine senza perdita di qualità e il WebP non si può usare.
• JPEG: come versione di riserva delle fotografie.
• GIF animate: meglio sostituirle con un video o con un WebP animato, molto più leggeri.

<picture>
  <source srcset="/immagini/divano-velluto-verde.avif" type="image/avif">
  <source srcset="/immagini/divano-velluto-verde.webp" type="image/webp">
  <img src="/immagini/divano-velluto-verde.jpg" alt="Divano a tre posti in velluto verde"
       width="1200" height="800">
</picture>

Evita invece di convertire le foto in PNG pensando di migliorarle: a parità di immagine il file diventa più pesante, senza alcun vantaggio per la SEO.

Quanto Devono Pesare le Immagini?

Google non indica una soglia di peso in KB: un’immagine deve pesare il meno possibile senza perdere qualità visibile. Comprimi ogni file con uno strumento che mostri l’anteprima del risultato, come Squoosh di Google, oppure lascia che siano il CMS o la CDN a convertire e comprimere le immagini al caricamento; poi controlla con PageSpeed Insights se ci sono ancora file da alleggerire. Attenzione ai metadati: la compressione può cancellare anche i dati su autore e copyright, che Google raccomanda di conservare nella sua guida ai metadati delle immagini. Se qualcuno copia le foto del sito, il titolare dei diritti può chiederne la rimozione dai risultati di Google con una segnalazione DMCA e il modulo legale previsto.

Come si Rinominano i File delle Immagini?

Il nome del file di un’immagine deve essere breve e descrittivo, con le parole separate da trattini: divano-velluto-verde.webp dice molto più di IMG00023.JPG. Google considera il nome del file un indizio molto leggero sul soggetto, ma costa poco e ti aiuta anche a tenere in ordine la libreria dei media. Se il sito è in più lingue, traduci anche i nomi dei file nelle versioni localizzate.

Come si Scrive il Testo Alternativo (Alt Text)?

Il testo alternativo, o alt text, è una frase breve che descrive ciò che l’immagine mostra nel contesto della pagina: per Google, come spiega la sua guida alle immagini, è l’attributo più importante per capire un’immagine, mentre i lettori di schermo lo leggono a chi non può vederla. Ecco un esempio costruito sul modello di quelli della documentazione di Google:

• da evitare, alt mancante: <img src="divano.webp">;
• da evitare, elenco di parole chiave: alt="divano divani divano verde divani offerta";
• meglio: alt="divano";
• ancora meglio: alt="Divano a tre posti in velluto verde".

Riempire l’alt di parole chiave peggiora l’esperienza di chi usa un lettore di schermo e, secondo Google, può far considerare il sito spam. Le immagini solo decorative, come separatori e sfondi, vanno lasciate con l’alt vuoto, cioè alt="": non togliere l’attributo, perché alcuni lettori di schermo leggerebbero al suo posto il nome del file. Se l’immagine è un link, il suo alt fa da testo del link, quindi deve dire dove porta. E dai a ogni immagine un alt diverso, anche quando le foto dello stesso prodotto sono molte.

Didascalie e Testo Vicino all’Immagine Contano?

Sì, Google ricava il soggetto di un’immagine anche dal contenuto della pagina, comprese didascalie e titoli: metti ogni immagine vicino al testo che la riguarda e su una pagina che tratta lo stesso argomento. Contano anche il title e la meta description, che Google usa per costruire il risultato mostrato insieme all’immagine.

Come Inserire le Immagini Senza Rallentare la Pagina?

Per inserire un’immagine senza rallentare la pagina indica sempre width e height nel tag, carica in modo differito solo le immagini sotto la piega e dai la priorità alta all’immagine principale. In pratica:

• width e height: permettono al browser di riservare lo spazio prima che l’immagine arrivi, così il testo non salta, come raccomanda la guida di web.dev sul CLS; in alternativa lo spazio si riserva con la proprietà CSS aspect-ratio.
• loading="lazy": il lazy loading va usato solo per le immagini fuori dalla prima schermata, mai per quella principale, che verrebbe scaricata in ritardo.
• fetchpriority="high": sull’immagine principale, comunque su una o due immagini al massimo per pagina.
• Cache lunga: per i file che non cambiano, con un’intestazione come Cache-Control: max-age=31536000 e un indirizzo nuovo quando sostituisci l’immagine.
• Stesso indirizzo: usa sempre lo stesso URL per la stessa immagine su pagine diverse, così Google e il browser possono riutilizzarla.

Nel primo tag c’è l’immagine principale, nella prima schermata; nel secondo un’immagine più in basso nella pagina:

<img src="/immagini/divano-velluto-verde.webp" alt="Divano a tre posti in velluto verde"
     width="1200" height="800" fetchpriority="high">

<img src="/immagini/velluto-verde-dettaglio.webp" alt="Dettaglio del tessuto in velluto verde"
     width="800" height="533" loading="lazy">

Come Aiutare Google a Trovare le Tue Immagini?

Per far trovare a Google le tue immagini inseriscile nell’HTML con il tag img, elencale in una sitemap per immagini quando Google potrebbe non vederle e indica qual è l’immagine preferita di ogni pagina.

• Sitemap per immagini: serve per le immagini che Google potrebbe non scoprire da solo, per esempio quelle caricate con JavaScript; può contenere anche indirizzi di altri domini, come quelli di una CDN. Basta il tag image:loc: didascalia, titolo, licenza e posizione geografica sono stati ritirati nel 2022.
• Immagine preferita: puoi suggerire a Google quale immagine usare per rappresentare la pagina con la proprietà primaryImageOfPage dei dati strutturati o con il tag Open Graph og:image.
• Metadati: con i metadati IPTC o i dati strutturati indichi autore, crediti, copyright e licenza, che Google Immagini può mostrare insieme alla foto; per le immagini create con l’intelligenza artificiale esiste il campo Digital Source Type.

Immagini e Core Web Vitals: Cosa c’entrano LCP e CLS?

Le immagini incidono su due dei tre Core Web Vitals. L’immagine principale è spesso l’elemento del Largest Contentful Paint, che deve comparire entro 2,5 secondi; le immagini senza dimensioni sono una delle cause più comuni di Cumulative Layout Shift, che deve restare entro 0,1. Entrambe le soglie valgono al 75° percentile delle visite reali.

Formato, dimensioni e attributi di caricamento sono quindi anche un lavoro sulle prestazioni: rientrano nell’ottimizzazione dei siti web insieme al server, al codice e ai font.

Come Controllare le Immagini con PageSpeed Insights?

PageSpeed Insights segnala i problemi delle immagini nel rapporto di Lighthouse, sotto i punteggi. Da Lighthouse 13, uscito a ottobre 2025, i vecchi controlli su formati moderni, compressione e dimensioni sono raccolti in un’unica analisi sulla consegna delle immagini, Improve image delivery nella versione inglese, che indica per ogni file il risparmio stimato.

Altre tre voci del rapporto riguardano le immagini: quella sulla richiesta dell’elemento LCP, che controlla se l’immagine principale è in lazy loading o senza priorità; quella sui responsabili degli spostamenti del layout, che elenca le immagini senza dimensioni; quella sulla durata della cache. La lettura del rapporto, con la distinzione tra dati di laboratorio e dati reali, è spiegata nell’articolo su come eseguire il test dei Core Web Vitals passo per passo.

Come Impedire che un’Immagine Compaia su Google?

Per impedire che un’immagine compaia su Google puoi bloccarla nel robots.txt per Googlebot-Image, inviare con il file dell’immagine l’intestazione X-Robots-Tag: noindex oppure usare la regola noimageindex nel meta tag robots della pagina.

User-agent: Googlebot-Image
Disallow: /immagini/riservate/

• robots.txt: con una regola Disallow per Googlebot-Image l’immagine esce dai risultati alla scansione successiva.
• X-Robots-Tag: l’intestazione noindex funziona solo se Google può scansionare il file, quindi l’immagine non deve essere bloccata anche nel robots.txt.
• noimageindex: vale solo per le immagini di quella pagina; se la stessa immagine compare anche su altre pagine, può essere indicizzata da lì.

Nelle urgenze serve lo strumento Rimozioni di Search Console, che però nasconde l’immagine solo per un periodo limitato: se il file resta online e accessibile, può tornare nei risultati.

Gli Errori da Evitare con le Immagini

Questi sono gli errori da evitare:

• inserire immagini importanti come sfondo CSS, che Google non indicizza;
• scrivere testi importanti dentro l’immagine invece che nella pagina;
• riempire l’alt di parole chiave o copiarlo uguale su tutte le immagini;
• convertire le fotografie in PNG;
• mettere il lazy loading sull’immagine principale;
• dimenticare width e height;
• caricare originali da migliaia di pixel e ridurli solo con il CSS;
• cancellare con la compressione i metadati su autore e copyright.

Dal Singolo File al Modello di Pagina

Gli interventi descritti sono piccoli se presi uno alla volta: un nome di file, un alt, due attributi nel tag. Il loro peso cresce con il numero di pagine, perché in un catalogo o in un blog le immagini possono uscire dallo stesso modello. Correggere il modello della scheda prodotto o dell’articolo sistema in un colpo centinaia di immagini; un errore lasciato nel modello, al contrario, si ripete ovunque.

Su un negozio online questo lavoro si intreccia con la consulenza SEO per e-commerce, dalle schede prodotto alle categorie: chi vuole sapere quanto pesano le immagini sulle pagine del proprio sito può chiederci un parere attraverso la pagina dei contatti.

Domande Frequenti sulla SEO delle Immagini