SEO per le immagini: testo alternativo, peso dei file, formati e lazy loading

Le immagini rendono le pagine più facili da capire e più coinvolgenti. Possono anche portare visitatori da Google Immagini e dalle funzioni di ricerca visiva. Ma di solito sono la parte più pesante di una pagina, e le immagini non ottimizzate sono uno dei motivi più comuni per cui i siti sono lenti.

La SEO per le immagini consiste nel fare bene entrambe le cose: rendere le immagini comprensibili ai motori di ricerca e accessibili a tutti, mantenendole veloci.

Scrivi un testo alternativo utile

L'attributo alt descrive un'immagine a parole:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

Il testo alternativo ha tre compiti:

1. Accessibilità – gli screen reader lo leggono alle persone che non possono vedere l'immagine
2. Ripiego – i browser lo mostrano se l'immagine non si carica
3. Comprensione – i motori di ricerca lo usano, insieme al testo circostante, per capire cosa mostra l'immagine

Come scrivere un buon testo alternativo

• Descrivi cosa mostra l'immagine e perché si trova sulla pagina
• Sii specifico: “bici pieghevole Brompton rossa piegata accanto a una scrivania” è meglio di “bici”
• Sii conciso – di solito meno di 125 caratteri
• Non iniziare con “immagine di” o “foto di”; gli screen reader annunciano già che si tratta di un'immagine
• Usa parole chiave pertinenti solo quando descrivono l'immagine in modo naturale

Immagini decorative

Le immagini puramente decorative – divisori, abbellimenti di sfondo – devono avere un attributo alt vuoto: alt="". Questo dice agli screen reader di saltarle. Omettere del tutto l'attributo è un errore; alcuni screen reader leggerebbero il nome del file.

Usa nomi di file descrittivi

IMG_4821.jpg non dice niente a nessuno. bici-pieghevole-brompton-piegata.jpg dà ai motori di ricerca un indizio in più. Usa parole minuscole separate da trattini.

Scegli il formato giusto

Per la maggior parte dei siti, servire WebP o AVIF con l'elemento <picture> (e JPEG come ripiego se necessario) è il miglioramento singolo più grande:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

La maggior parte dei CMS, dei plugin per immagini e delle CDN può convertire automaticamente le immagini nei formati moderni.

Ridimensiona e comprimi

Un errore comune è caricare una foto larga 4.000 pixel direttamente dalla fotocamera e mostrarla a 800 pixel di larghezza. Il browser scarica comunque il file intero.

• Ridimensiona le immagini alla dimensione massima a cui vengono effettivamente mostrate (raddoppiala per gli schermi ad alta densità, se necessario)
• Comprimile – impostazioni di qualità intorno al 75–85% sono di solito indistinguibili dall'originale
• Punta a mantenere la maggior parte delle immagini dei contenuti sotto i 150–200 KB, e le immagini hero idealmente sotto i 300 KB

Servi immagini responsive

Gli smartphone non hanno bisogno di immagini delle dimensioni del desktop. Gli attributi srcset e sizes permettono al browser di scegliere il file giusto:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress e la maggior parte dei framework moderni li generano automaticamente.

Imposta larghezza e altezza per evitare spostamenti del layout

Se un'immagine non ha gli attributi width e height, il browser non sa quanto spazio riservare, quindi il contenuto salta quando l'immagine si carica. Questo peggiora il Cumulative Layout Shift (CLS), uno dei Core Web Vitals. Includi sempre le dimensioni dell'immagine (oppure usa la proprietà CSS aspect-ratio); il CSS responsive può comunque ridimensionarla.

Usa il lazy loading per le immagini sotto la piega

loading="lazy" dice al browser di caricare un'immagine solo quando sta per entrare nella visuale durante lo scorrimento:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Usalo per le immagini più in basso nella pagina, ma non per l'immagine hero principale. Applicare il lazy loading all'immagine più grande della prima schermata ritarda il Largest Contentful Paint. Per quell'immagine, valuta invece fetchpriority="high".

Aiuta le immagini a farsi trovare

• Posiziona le immagini vicino a testo pertinente e aggiungi didascalie quando sono utili – Google usa il contenuto circostante per capire le immagini
• Usa elementi <img> standard invece di sfondi CSS per le immagini significative, così i motori di ricerca possono trovarle
• Aggiungi le immagini alla sitemap XML, o a una sitemap delle immagini, se hai grandi archivi fotografici
• Includi un'immagine nei dati strutturati quando è pertinente (Product, Article, Recipe)
• Imposta un og:image perché le condivisioni sui social network mostrino un'anteprima efficace

Checklist SEO per le immagini

• Testo alternativo descrittivo su ogni immagine significativa; alt vuoto su quelle decorative
• Nomi di file descrittivi, con i trattini
• Formato WebP o AVIF
• Ridimensionate alla dimensione di visualizzazione e compresse
• srcset per la distribuzione responsive
• Attributi di larghezza e altezza impostati
• Lazy loading per le immagini sotto la piega, non per l'hero
• Durata della cache lunga impostata sul server o sulla CDN

SEO per le immagini negli e-commerce

Le immagini dei prodotti vendono molto. Per i negozi online:

• Mostra più angolazioni e il prodotto in uso. Google Immagini e i risultati di shopping premiano foto di prodotto nitide e di alta qualità.
• Usa un'immagine principale pulita e coerente per ogni prodotto – viene spesso usata nei risultati di shopping.
• Scrivi un testo alternativo che identifichi il prodotto e la variante: “Scarpa da corsa donna Trail Runner X verde acqua, vista laterale.”
• Includi le immagini nei dati strutturati Product usando URL assolute.
• Le immagini con zoom devono caricare la versione grande solo quando serve, non al caricamento della pagina.

SEO per le immagini per blog ed editori

• Usa immagini originali quando possibile. Foto, schemi e grafici originali possono ottenere link e distinguersi nella ricerca per immagini; le foto di stock sono usate su migliaia di siti.
• Aggiungi didascalie quando l'immagine trasmette informazioni. Le didascalie sono tra i testi più letti di una pagina.
• Crea schemi e infografiche condivisibili per gli argomenti complessi, con le informazioni chiave scritte anche nel testo.
• Scegli un'immagine in evidenza efficace, larga almeno 1200 pixel. Google Discover premia le immagini grandi e di alta qualità, e puoi consentire anteprime grandi con l'impostazione robots max-image-preview:large.

Immagini di sfondo e CSS

Le immagini impostate con background-image nel CSS sono invisibili come contenuto per i motori di ricerca e non hanno testo alternativo. Usale solo per la decorazione. Se un'immagine ha un significato – un prodotto, un grafico, una foto del team –, usa un elemento <img>.

CDN per immagini e ottimizzazione automatica

Gestire a mano più dimensioni e formati diventa presto impraticabile. CDN e servizi per immagini (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer e altri) e molti plugin di WordPress possono:

• Convertire automaticamente le immagini in WebP o AVIF
• Ridimensionarle al volo per ogni dispositivo
• Comprimerle in modo intelligente
• Memorizzarle nella cache vicino ai visitatori

Se ne usi uno, verifica che le URL delle immagini restino stabili e scansionabili e che la CDN non blocchi Googlebot.

Misurare l'impatto

Apri il report Prestazioni di Google Search Console e imposta il tipo di ricerca su Immagine per vedere quanti clic e impressioni ricevono le tue immagini e per quali query. Monitora i Core Web Vitals nello stesso strumento per confermare che l'ottimizzazione delle immagini stia migliorando il Largest Contentful Paint e il Cumulative Layout Shift.

Errori comuni

1. Caricare foto delle dimensioni della fotocamera e lasciare che sia il browser a rimpicciolirle
2. Attributi alt mancanti, o testi alternativi pieni di parole chiave
3. Applicare il lazy loading all'immagine hero
4. Nessuna larghezza e altezza, con conseguenti spostamenti del layout
5. Testo inserito nelle immagini invece che scritto in HTML – è invisibile a motori di ricerca e screen reader e non può essere tradotto
6. Bloccare le cartelle delle immagini nel robots.txt

Punti chiave

• Scrivi testi alternativi che descrivano cosa mostra l'immagine e perché è lì; usa alt vuoto per le immagini decorative.
• Servi WebP o AVIF, ridimensionati alla dimensione mostrata e compressi.
• Imposta sempre larghezza e altezza per evitare spostamenti del layout.
• Usa il lazy loading per le immagini sotto la piega, ma mai per l'immagine hero principale.
• Usa veri elementi img per le immagini significative, vicino a testo pertinente e con nomi di file descrittivi.
• Controlla i dati della ricerca per immagini in Search Console per misurare il traffico che portano le immagini.

Domande frequenti

Il testo alternativo aiuta il posizionamento?

Aiuta le immagini a posizionarsi in Google Immagini e aggiunge contesto alla pagina. Il suo scopo principale è l'accessibilità, e scriverlo per le persone di solito funziona meglio anche per i motori di ricerca.

Meglio WebP o AVIF?

Entrambi sono ben supportati. AVIF produce spesso file più leggeri; WebP si codifica più in fretta ed è supportato più ampiamente dagli strumenti più vecchi. Molti siti servono AVIF con WebP come ripiego.

I nomi dei file delle immagini contano?

Un po'. I nomi di file descrittivi sono un piccolo segnale in più e rendono più facile gestire la libreria multimediale.

Il lazy loading fa bene alla SEO?

Sì, se usato correttamente. Il loading="lazy" nativo è supportato da Google. Basta non applicare il lazy loading alle immagini visibili al primo caricamento della pagina.