Immagini del sito: formato, peso, testo alternativo e cosa chiedere a chi le gestisce

01Immagini del sito: formato, peso e testo alternativo si decidono insieme

Per le immagini del sito, formato, peso, testo alternativo sono tre decisioni da prendere insieme, file per file, prima della pubblicazione. Il formato va scelto in base al contenuto. Il browser deve ricevere una dimensione adatta allo schermo. Ogni immagine che porta informazione deve avere un testo alternativo che ne trasmetta il significato.

Il testo alternativo è il contenuto dell'attributo alt del tag img. Descrive l'immagine a chi non la vede: una persona che usa uno screen reader, un browser che non riesce a caricare il file, un motore di ricerca. Google lo definisce l'attributo più importante per fornire informazioni su un'immagine, e ricorda che migliora anche l'accessibilità.

Le immagini sono il punto in cui velocità e accessibilità si perdono più spesso nello stesso momento. Un file troppo pesante rallenta la pagina. Lo stesso file caricato senza testo alternativo la rende incompleta per chi usa tecnologie assistive. Una sola routine di pubblicazione risolve entrambi i problemi.

Questa guida è pensata per chi deve valutare un sito nuovo o un rifacimento e vuole sapere cosa chiedere a chi lo realizza. Copre i formati, le dimensioni per schermo, il testo alternativo, le immagini decorative, i nomi dei file e il modo in cui le immagini compaiono in Google Images. Chiude con una tabella decisionale, un esempio completo e i prossimi passi.

02Peso delle immagini: spesso è la parte più grande della pagina

Le immagini sono spesso la voce più pesante di una pagina web. Lo indica Google nella sua guida alle best practice SEO per le immagini. Secondo la stessa guida, questo peso può rendere le pagine lente e costose da caricare.

Il peso di un file immagine dipende da tre scelte. La prima è il formato. La seconda è la dimensione in pixel rispetto allo spazio in cui l'immagine viene davvero mostrata. La terza è il livello di compressione applicato al file. Ognuna di queste scelte si fa una volta, al momento del caricamento, e poi resta sul sito per anni.

Esistono anche soluzioni che lavorano lato server. Un image CDN è un servizio che distribuisce le immagini da una rete di server e, secondo il percorso Learn Images di web.dev, è in grado di trasformarne e ottimizzarne il contenuto. È un'opzione da discutere con il fornitore, non una scorciatoia che sostituisce le scelte sui singoli file.

Quanto incida la lentezza sulle richieste che arrivano dal sito è un tema a parte. La guida su come calcolare quanto costa un sito lento in richieste spiega il metodo sui dati della Sua azienda. Le sezioni che seguono si concentrano su cosa fare con le immagini.

03Formati immagine per il web: JPEG, PNG, WebP, AVIF e SVG

Il formato giusto dipende da come è fatta l'immagine. Le immagini raster sono composte da una griglia di pixel: JPEG, GIF, PNG e WebP appartengono a questa famiglia. Le immagini vettoriali sono descritte da forme e linee: SVG è il formato vettoriale usato sul web, secondo web.dev.

Ecco i formati che incontrerà più spesso e cosa sapere di ciascuno:

• JPEG: il formato immagine più comune sul web, adatto alle fotografie.
• PNG e GIF: formati raster di lunga data, ancora diffusi.
• WebP: formato raster più recente, supportato da Google Search.
• AVIF: AV1 Image File Format, una codifica basata sul codec video open source AV1.
• SVG: formato vettoriale, adatto a loghi, icone e grafiche disegnate.

Google Search supporta le immagini indicate nell'attributo src del tag img in sette formati: BMP, GIF, JPEG, PNG, WebP, SVG e AVIF. Un file in un formato diverso non compare tra le immagini di Google.

La domanda pratica da fare al fornitore è semplice. Chieda di confrontare, su alcune fotografie reali del Suo sito, il peso del file in JPEG, WebP e AVIF a parità di resa visiva. Il confronto sulle Sue immagini vale più di qualsiasi regola generale. Per loghi e icone chieda se esiste una versione vettoriale da usare in SVG.

04Dimensione giusta per ogni schermo: srcset, sizes e picture

Un'immagine responsive è un'immagine fornita in più versioni, tra cui il browser sceglie quella adatta allo schermo. Senza questo meccanismo, uno smartphone scarica lo stesso file pensato per un monitor ampio. Il risultato è peso inutile proprio sui dispositivi con la connessione più incerta.

Gli strumenti standard sono due. Gli attributi srcset e sizes forniscono al browser le informazioni sulle versioni disponibili e su come verranno usate nella pagina. L'elemento picture è un contenitore che raggruppa diverse versioni della stessa immagine. Secondo Google, offre un meccanismo di riserva che permette al browser di scegliere in base alla densità di pixel e alle dimensioni dello schermo.

Google aggiunge un'avvertenza importante. Alcuni browser e crawler non comprendono picture o srcset. Per questo raccomanda di indicare sempre un URL di riserva nell'attributo src. In pratica, il file in src deve essere una versione valida e in un formato supportato.

Nella maggior parte dei casi non serve scrivere questo codice a mano. Secondo web.dev, i CMS come WordPress e altri generatori di siti rendono più semplice l'uso delle immagini responsive. La domanda da fare è quindi concreta: il tema del sito genera srcset e sizes per ogni immagine, e quale file finisce in src?

05Testo alternativo descrittivo: cosa scrivere e cosa evitare

Un buon testo alternativo trasmette il significato che l'immagine ha in quella pagina. Il criterio WCAG 2.2 1.1.1 «Contenuti non testuali» chiede per ogni contenuto non testuale un'alternativa testuale con funzione equivalente. Un alt generico, che non dice cosa conta nell'immagine, non svolge questa funzione.

Il testo alternativo serve anche alla ricerca. Google usa l'alt insieme ad algoritmi di visione artificiale e al contenuto della pagina per capire il soggetto di un'immagine. Bisogna però restare onesti sull'effetto: l'articolo di Captain Verify sull'attributo alt osserva che nessuna delle fonti consultate quantifica un miglioramento di posizionamento attribuibile all'alt.

Queste sono le regole pratiche che le fonti indicano:

• Restare su una lunghezza contenuta, intorno ai 125 caratteri che la pratica degli editori usa come riferimento.
• Non riempire l'alt di parole chiave: Google avverte che peggiora l'esperienza e può far considerare il sito spam.
• Non affidarsi all'attributo title, che mostra un suggerimento al passaggio del mouse e non sostituisce mai l'alt.
• Non omettere l'attributo: alcuni screen reader, in quel caso, leggono il nome del file.

Il riferimento dei 125 caratteri non è una regola formale. WCAG 2.2 non fissa alcun limite di lunghezza, secondo la guida di Captain Verify al testo alternativo.

Fonte: captainverify.com

06Immagini decorative: alt vuoto e verifica nel codice generato

Un'immagine decorativa è un'immagine che non aggiunge informazione: un separatore, una texture di sfondo, una grafica puramente ornamentale. Per queste immagini l'attributo alt deve esserci, ma vuoto, scritto alt="". Omettere del tutto l'attributo produce l'effetto opposto. Secondo Captain Verify, alcuni screen reader annunciano allora il nome del file e rovinano la lettura.

Distinguere un'immagine decorativa da una informativa richiede una decisione caso per caso. L'albero decisionale del W3C per il testo alternativo distingue cinque casi, dall'immagine decorativa a quella complessa. La scelta va fatta guardando la pagina in cui l'immagine compare, non il file da solo.

Nei CMS il passaggio sembra semplice, ma il campo compilato nell'amministrazione non garantisce il risultato. Ciò che conta è il markup del tag img che arriva davvero al browser. Un campo lasciato vuoto nel CMS e un attributo alt="" presente nella pagina non sono la stessa cosa.

Nei progetti di Revylio, in Svennis controlliamo le immagini decorative nell'HTML che il tema genera davvero, non nel campo del CMS. È lì che vediamo sparire più spesso l'alt vuoto. La verifica sul codice sorgente della pagina chiude il dubbio.

07Nomi dei file immagine: poche parole separate da trattini

Il nome del file è la prima descrizione che un'immagine porta con sé. La guida di Captain Verify riporta il consiglio di Abondance: un nome di due a quattro parole separate da trattini, come nell'esempio logo-captain-verify.png. Un nome come IMG_0412.jpg non dice nulla a nessuno.

Il nome conta anche per l'accessibilità, in un caso preciso. Se l'attributo alt manca, alcuni screen reader annunciano il nome del file. Un nome leggibile non sostituisce l'alt, ma riduce il danno di una dimenticanza.

La convenzione sui nomi va decisa prima del caricamento, non dopo. Conviene fissarla insieme all'inventario dei contenuti, come descritto nella guida su come preparare i contenuti per il nuovo sito. Chi prepara le fotografie le rinomina una volta sola, e chi le carica non deve inventare nulla.

Durante un rifacimento, rinominare i file cambia anche gli indirizzi delle immagini già pubblicate. È una delle voci da gestire nella checklist di migrazione per non perdere traffico da Google, insieme alle pagine e ai loro indirizzi.

08Google Images: come le immagini vengono trovate e mostrate

Google trova le immagini nell'attributo src del tag img, anche quando il tag si trova dentro altri elementi come picture. Google non indicizza invece le immagini inserite tramite CSS. Una fotografia di prodotto usata come sfondo CSS, quindi, non compare in Google Images.

Le altre indicazioni della documentazione di Google che un responsabile del sito deve conoscere sono queste:

• Sitemap delle immagini: a differenza delle sitemap normali, può includere URL di altri domini nell'elemento image:loc, così le immagini possono stare su un CDN.
• Anteprima nei risultati: la scelta dell'immagine mostrata è completamente automatica. Si può indicare un'immagine preferita con la proprietà schema.org primaryImageOfPage, con la proprietà image dell'entità principale o con il meta tag og:image.
• Dati strutturati: la proprietà image è un campo obbligatorio per poter ottenere un badge e un risultato arricchito in Google Images.
• Collegamento diretto alle immagini: chi non vuole che Google mostri il file originale può rispondere alle richieste dai domini Google con stato HTTP 200 o 204 senza contenuto. Google mostra allora una miniatura generata durante la scansione, e questo non è considerato cloaking.

Per la maggior parte delle aziende la priorità è la prima: immagini importanti nel tag img, mai solo nel CSS.

09Tabella decisionale per tipo di immagine

La tabella riassume le scelte per i tipi di immagine più comuni su un sito aziendale. Ogni riga combina formato, testo alternativo e posizione nel codice, perché le tre decisioni vanno prese insieme.

La colonna più trascurata è l'ultima. Spostare un'immagine informativa nel CSS la toglie sia a Google sia agli screen reader. La tabella può entrare così com'è nel brief per il fornitore.

10Esempio pratico: una foto di prodotto dalla fotocamera alla pagina

Prendiamo un'azienda che vende caldaie e deve pubblicare la foto di un modello murale nella pagina prodotto. L'esempio segue la stessa routine che vale per qualsiasi immagine informativa.

1. Nome del file: la foto viene rinominata caldaia-murale-condensazione.jpg, tre parole separate da trattini.
2. Formato: la versione JPEG resta come file di riserva in src. Il fornitore confronta il peso della stessa foto in WebP e AVIF e tiene la versione più leggera tra quelle che rendono bene.
3. Dimensioni: il CMS genera più larghezze dello stesso file e le elenca in srcset, con sizes che indica lo spazio occupato nella pagina.
4. Testo alternativo: «Caldaia murale a condensazione installata in un locale tecnico, vista frontale». Niente elenco di parole chiave, meno di 125 caratteri.
5. Contesto: la foto sta nel tag img vicino alla descrizione del prodotto, perché Google usa anche il contenuto della pagina per capirne il soggetto.
6. Anteprima: se è l'immagine principale della pagina, viene indicata anche nel meta tag og:image.

L'ultimo controllo si fa sul sito pubblicato. Si apre il codice sorgente della pagina e si verifica che il tag img contenga davvero l'alt scritto nel CMS, il src di riserva e il srcset.

11Cosa significa per un'azienda italiana: accessibilità e testo alternativo

Per un'azienda italiana, il testo alternativo è il punto in cui le regole di accessibilità diventano un compito quotidiano. Il criterio 1.1.1 «Contenuti non testuali» di WCAG 2.2 è di livello A, il più basilare. Chiede che ogni contenuto non testuale abbia un'alternativa testuale con funzione equivalente.

Questo requisito non si soddisfa una volta per tutte al lancio. Ogni nuova foto caricata nel blog, nelle pagine servizio o nelle schede prodotto è un nuovo contenuto non testuale. Se chi pubblica non conosce la routine, il sito torna incompleto nel giro di pochi aggiornamenti.

Chi sia obbligato dall'European Accessibility Act e cosa verificare per primo è trattato nella guida su l'accessibilità del sito aziendale dopo l'EAA. Le immagini sono uno dei controlli più semplici da mettere in ordine, perché dipendono da scelte interne e non da tecnologie complesse.

La conseguenza organizzativa è chiara. Qualcuno in azienda deve essere responsabile del testo alternativo delle immagini nuove, con una regola scritta su lunghezza, tono e immagini decorative. Gli strumenti automatici possono proporre una bozza, ma la decisione su cosa conta in quell'immagine resta umana.

12Prossimi passi per le immagini del Suo sito

Il primo passo è un controllo a campione sul sito attuale. Scelga cinque pagine importanti, apra il codice sorgente e verifichi per ogni immagine tre cose: se c'è l'attributo alt, se descrive davvero l'immagine e se le decorative hanno alt="".

Poi porti queste domande al fornitore, nel brief o nell'incontro iniziale:

• Quali formati usate per fotografie e per loghi, e su quali confronti di peso li scegliete?
• Il tema genera srcset, sizes e un src di riserva per ogni immagine?
• Come vengono gestite le immagini decorative, e lo verificate nell'HTML generato?
• Le immagini informative stanno sempre nel tag img e mai solo nel CSS?
• Quale convenzione di nomi per i file proponete, e chi la applica?

Le risposte entrano bene nel brief per il rifacimento del sito e aiutano a confrontare i preventivi. Se sta valutando a chi affidare il lavoro, la guida su come scegliere l'agenzia per il sito aziendale raccoglie le altre domande da fare prima di firmare.

13Fonti

• Google Search Central, Image SEO Best Practices
• web.dev, Learn Images
• Captain Verify, Testo alternativo: attributo alt, regole e uso in newsletter