In breve
Un metodo editoriale e tecnico per rendere fotografie e grafiche comprensibili, scopribili e leggere, senza sacrificare la qualità visiva né riempire gli alt di parole chiave.
- Assegnare a ogni immagine un ruolo editoriale riconoscibile
- Scrivere alt text utili in base a funzione e contesto
- Servire formati, ritagli e dimensioni adatti ai diversi schermi
- Distinguere l’immagine principale dalle risorse che possono essere caricate dopo
Prima del file: il compito dell’immagine
La prima ottimizzazione avviene prima dell’esportazione. Bisogna stabilire perché l’immagine è presente e quale informazione aggiunge. Una fotografia può dimostrare la qualità di una lavorazione, aiutare a distinguere due servizi, mostrare l’accessibilità di una sede o anticipare l’esperienza offerta. Se non aggiunge significato, potrebbe essere decorativa oppure non servire affatto.
La scelta deve seguire l’intento della pagina. Nella presentazione di una camera sono utili fotografie che chiariscono spazi e dotazioni; in una pagina professionale possono essere più importanti ambiente, metodo e risultati documentabili; in una guida serve invece un’immagine capace di introdurre l’argomento senza sostituire le spiegazioni.
Anche la posizione conta. Un’immagine vicina al testo pertinente è più comprensibile per le persone e offre ai motori di ricerca un contesto più chiaro. La decisione va quindi coordinata con la struttura del sito e delle singole pagine, non rimandata alla fine come semplice riempimento grafico.
Se l’immagine non venisse caricata, quale informazione mancherebbe? La risposta aiuta a scegliere posizione, didascalia e alternativa testuale.
Alt text: descrivere funzione e contesto
L’attributo alt fornisce un’alternativa quando l’immagine non può essere vista e aiuta le tecnologie assistive a comunicarne il significato. Non deve essere una lista di parole chiave e non esiste una descrizione valida in ogni pagina: la stessa fotografia può richiedere testi alternativi diversi se svolge funzioni diverse.
| Tipo di immagine | Scelta utile | Da evitare |
|---|---|---|
| Informativa | Descrivere brevemente ciò che comunica nel contesto | Ripetere parole già presenti senza aggiungere significato |
| Decorativa | Usare un alt vuoto, cioè alt="" | Omettere l’attributo o descrivere un dettaglio irrilevante |
| Funzionale | Comunicare azione o destinazione del collegamento | Descrivere soltanto forma o colore dell’icona |
| Complessa | Fornire una sintesi e rendere disponibili i dati nel testo vicino | Inserire tutta la spiegazione in un attributo molto lungo |
Per una fotografia informativa è spesso sufficiente descrivere soggetto e dettaglio utile: “Camera matrimoniale con balcone affacciato sul giardino” comunica più di “foto hotel camera vacanze”. Se una didascalia esprime già la stessa informazione, l’alt può essere più sintetico; se l’immagine è puramente ornamentale, il valore vuoto permette allo screen reader di ignorarla.
L’attributo title non sostituisce l’alt. Anche il testo contenuto direttamente dentro una grafica non dovrebbe essere l’unico modo per trasmettere un messaggio importante: quando possibile, va riportato come testo reale nella pagina.
Nomi file, testo vicino e Google Immagini
Google usa più segnali per comprendere un’immagine, tra cui il testo alternativo, il contenuto della pagina, le didascalie e la posizione rispetto alle informazioni pertinenti. Il nome del file può fornire un’indicazione aggiuntiva, ma non è una scorciatoia per ottenere visibilità.
Un nome breve come camera-superior-balcone.webp è più comprensibile e gestibile di IMG_4827.webp. Non serve accumulare varianti della stessa parola, località non pertinenti o intere frasi. Conviene adottare una convenzione stabile, usare trattini tra i termini e mantenere coerenti nome ed estensione con il formato reale del file.
Il contesto resta decisivo. Una fotografia di un trattamento inserita nella relativa pagina servizio, accompagnata da un titolo chiaro e da una spiegazione originale, ha un significato più preciso della stessa immagine collocata in una galleria generica. Il testo deve comunque essere scritto per rispondere alle persone: una pagina povera non diventa utile grazie al solo nome del file.
Elementi da coordinare
- Nome del file breve e descrittivo
- Alt text coerente con la funzione nella pagina
- Testo vicino che spiega argomento e contesto
- Didascalia quando aggiunge una notizia utile
- Pagina di destinazione realmente pertinente
Immagini responsive: srcset, sizes e picture
La stessa immagine non occupa sempre lo stesso spazio. Una copertina può estendersi su un monitor ampio, diventare più stretta su tablet e usare un ritaglio verticale su smartphone. Inviare a ogni dispositivo il file più grande aumenta inutilmente il trasferimento; usare un unico file piccolo può invece produrre una resa sfocata.
Con srcset si dichiarano più versioni della stessa immagine e le relative larghezze. L’attributo sizes comunica al browser quanto spazio occuperà l’immagine nel layout nelle diverse condizioni. Il browser può così scegliere una risorsa adeguata considerando viewport, densità dello schermo e informazioni disponibili. Le indicazioni di sizes devono corrispondere al CSS reale: se dichiarano una larghezza diversa da quella visualizzata, il browser può scaricare una variante sovradimensionata.
L’elemento picture serve quando occorre un controllo più esplicito. Può offrire AVIF e WebP con un fallback oppure proporre ritagli differenti ai breakpoint, pratica chiamata art direction. Dentro picture deve comunque essere presente un elemento img con src di riserva e alt text.
| Elemento | Comunica al browser | Quando usarlo |
|---|---|---|
src | La risorsa di base e di riserva | Sempre nell’elemento img |
srcset | Le varianti disponibili e le loro dimensioni | Quando lo stesso contenuto esiste in più larghezze |
sizes | Lo spazio previsto nel layout | Con varianti descritte per larghezza |
picture | Regole per formato o ritaglio | Per fallback, formati moderni o art direction |
La verifica deve essere visiva: un ritaglio mobile non è corretto soltanto perché pesa meno. Soggetto, prodotto o dettaglio importante devono restare riconoscibili a tutte le risoluzioni.
AVIF, WebP e qualità visiva
AVIF e WebP possono ridurre il peso rispetto a formati tradizionali mantenendo una buona qualità, ma non esiste un’impostazione identica per ogni immagine. Una fotografia ricca di texture, una grafica con testo, un logo e una trasparenza hanno caratteristiche differenti. Formato, livello di compressione e dimensioni devono essere scelti osservando il risultato finale.
Per le fotografie si possono preparare varianti AVIF e WebP, lasciando al browser la selezione attraverso picture. SVG è spesso adatto a loghi e illustrazioni vettoriali; PNG resta utile in casi specifici, per esempio quando la trasparenza o il tipo di grafica lo richiedono. L’estensione deve sempre corrispondere al contenuto reale.
Una compressione estrema può produrre bordi sporchi, incarnati innaturali e dettagli illeggibili. Questo danneggia il valore editoriale dell’immagine e la fiducia nel progetto. Il controllo va svolto almeno sui formati principali e sui ritagli desktop e mobile, non soltanto sulla miniatura del software di esportazione.
L’obiettivo è ottenere il minor peso compatibile con una resa credibile nello spazio effettivo, conservando un originale di qualità per le future esportazioni.
Dimensioni, proporzioni e stabilità del layout
Ogni variante dovrebbe essere abbastanza grande per lo spazio e la densità in cui viene mostrata, ma non molto più grande del necessario. Una fotografia larga 2000 pixel non serve in una scheda che ne occupa 360; allo stesso tempo, ingrandire un file da 400 pixel su uno schermo ad alta densità può renderlo poco nitido.
Gli attributi width e height permettono al browser di ricavare il rapporto tra i lati e riservare lo spazio prima che il file arrivi. Non obbligano l’immagine a restare a dimensione fissa se il CSS è responsive: aiutano invece a evitare spostamenti inattesi di titoli, pulsanti e paragrafi durante il caricamento.
Se desktop e mobile usano ritagli con proporzioni diverse, anche il contenitore deve gestire il passaggio senza deformazioni. Vanno controllati object-fit, punto focale, altezza minima e comportamento nei passaggi intermedi, non solo ai breakpoint più comuni.
LCP e lazy loading: dare priorità alle immagini giuste
L’immagine principale visibile all’apertura può diventare l’elemento Largest Contentful Paint. In quel caso deve essere individuabile presto nel codice HTML e non dovrebbe usare loading="lazy", perché il caricamento differito può ritardarne la richiesta. Quando i test confermano che è la risorsa critica, fetchpriority="high" può aiutare il browser a riconoscerne la priorità; non va però applicato indiscriminatamente a numerose immagini.
Fotografie e gallerie molto più in basso nella pagina possono invece usare il lazy loading nativo. Anche queste immagini devono conservare dimensioni dichiarate, alt text corretto e un file di riserva. Il caricamento differito non corregge un file enorme e non sostituisce le varianti responsive.
Ordine pratico delle priorità
- Immagine principale: presente nell’HTML iniziale e non caricata in lazy
- Immagini subito visibili: dimensioni adeguate e richieste senza ritardi artificiali
- Gallerie sotto la piega: lazy loading e varianti responsive
- Carousel: evitare di dare priorità alta a tutte le slide
Questa valutazione riguarda il ruolo specifico delle immagini. Se il problema coinvolge server, JavaScript, font o dati reali dei Core Web Vitals, serve una diagnosi più ampia delle cause del sito lento.
Scopribilità e anteprime nei risultati
Per facilitare la scoperta, le immagini importanti dovrebbero essere inserite con elementi HTML standard come img, anche quando sono racchiuse in picture. Una fotografia usata soltanto come sfondo CSS non offre a Google lo stesso percorso di individuazione previsto per un’immagine di contenuto.
File, CDN e cartelle devono essere accessibili alla scansione. Nei siti con grandi cataloghi o immagini raggiungibili attraverso flussi complessi può essere utile valutare una sitemap per immagini. Per le pagine principali conviene inoltre indicare un’immagine rappresentativa e coerente nei metadati sociali e, quando appropriato, nei dati strutturati della pagina.
L’eventuale presenza in Google Immagini resta una selezione automatica e non è garantita da un singolo attributo. Qualità della pagina, pertinenza, indicizzazione e accessibilità tecnica lavorano insieme. L’obiettivo corretto è rendere immagine e pagina interpretabili, non costruire una sequenza artificiale di segnali.
Un flusso di controllo prima della pubblicazione
La gestione migliore parte da un originale ordinato e produce varianti attraverso un processo ripetibile. Prima della pubblicazione vanno controllati ritaglio, formato, peso, nome file, alt text, dimensioni dichiarate e resa nel layout. Dopo la pubblicazione bisogna verificare che il browser scelga risorse coerenti e che nessun file restituisca errori.
Checklist editoriale e tecnica
- L’immagine aggiunge un’informazione pertinente alla pagina
- Il soggetto resta riconoscibile nei ritagli desktop, tablet e mobile
- L’alt è informativo, funzionale oppure vuoto quando l’immagine è decorativa
- Nome, formato ed estensione sono coerenti
srcsetesizesriflettono il layout effettivowidtheheightpreservano le proporzioni- L’immagine principale non viene ritardata dal lazy loading
- Le immagini secondarie non competono inutilmente con il contenuto iniziale
Il controllo va ripetuto quando cambiano fotografie, componenti o impaginazione. Inserire queste verifiche nella manutenzione periodica del sito evita che nuovi caricamenti reintroducano nomi generici, file sovradimensionati o alternative mancanti.
I dati possono indicare quali pagine e tipologie visive meritano ulteriore lavoro, ma non sostituiscono il giudizio editoriale. Prima di produrre decine di varianti occorre capire quali immagini aiutano davvero la persona a scegliere, orientarsi o comprendere il servizio.
Esempi reali da progetti pubblicati
Questi progetti non vengono presentati come prova di risultati quantitativi non documentati. Mostrano come architettura, contenuti e funzioni siano stati applicati a esigenze concrete.
- Fuorirotta Charter: Flotta, paesaggio e servizi richiedono ritagli responsive e priorità diverse nelle varie sezioni.
- Mara Hair & Beauty: Ambienti, trattamenti e risultati mantengono qualità e leggibilità sui diversi schermi.
- Hotel Casagrande: Camere, servizi e territorio vengono distinti con fotografie pertinenti al percorso di scelta.
Per inquadrare l’intervento nel suo insieme, consulta anche il servizio SEO e ottimizzazione tecnica del sito.
Fonti e approfondimenti
Riferimenti ufficiali utilizzati per gli aspetti tecnici o normativi che richiedono verifica. Le indicazioni vanno sempre applicate al contesto specifico.
