Descrivere e alleggerire le immagini perché siano al servizio del testo
Descrizione
Questo criterio verifica le immagini della pagina. Tra le immagini di contenuto (visibili, di almeno 50 × 50 px, non contrassegnate come decorative), almeno il 90% deve avere un testo alternativo e il 90% deve dichiarare le proprie dimensioni. Almeno l’80% delle immagini raster deve essere in WebP o AVIF (gli SVG non contano), e nessuna immagine deve superare 500 KB.
iPand verifica la presenza del testo alternativo, non la sua correttezza, e non giudica la qualità visiva delle immagini.
Perché è importante per le AI
Un crawler che legge il testo della pagina vede dell’immagine solo il suo testo alternativo. Google lo usa, insieme alla visione artificiale e al contenuto della pagina, per capire il soggetto di un’immagine, e consiglia di accompagnare il testo con immagini di qualità. Le immagini sono spesso anche la parte più pesante di una pagina.
- Un testo alternativo preciso dice cosa mostra l’immagine: un prodotto, un luogo, una persona.
- WebP e AVIF comprimono molto meglio di JPEG e PNG: la pagina si carica più in fretta.
- Le dimensioni dichiarate riservano lo spazio dell’immagine ed evitano che la pagina si sposti durante il caricamento.
Come correggere
- 1 Descrivi ogni immagine nel suo testo alternativo Compila l’attributo alt di ogni immagine utile con una frase breve: «Bici cargo elettrica blu davanti all’officina» piuttosto che «image1» o un elenco di parole chiave. Per un’immagine puramente decorativa, lascia l’alt vuoto (alt=""): non viene contata.
- 2 Converti le immagini in WebP o AVIF Esporta foto e illustrazioni in WebP o AVIF, dal tuo programma di grafica o con un’estensione del tuo CMS. Per tenere un JPEG di riserva, proponi entrambi i formati in un elemento <picture>: il browser scarica solo il primo formato che sa leggere.
- 3 Alleggerisci le immagini pesanti Nessuna immagine deve superare 500 KB. Ridimensiona ogni immagine alla sua dimensione di visualizzazione, comprimila e proponi più dimensioni con srcset e sizes, perché i dispositivi mobili ricevano una versione adatta.
- 4 Dichiara larghezza e altezza Aggiungi gli attributi width e height a ogni tag <img>, nelle proporzioni dell’immagine, oppure riserva il suo spazio con la proprietà CSS aspect-ratio. Il browser mantiene così lo spazio durante il caricamento, anche se poi il foglio di stile adatta la dimensione.
In breve
Immagini descritte, leggere e con dimensioni dichiarate aiutano i motori di ricerca a capire la pagina e la rendono più veloce. iPand verifica questi quattro punti a ogni analisi; la correttezza dei tuoi testi alternativi resta da rileggere di persona.
