Le immagini sono un elemento fondamentale di qualsiasi sito web moderno. Attirano l’attenzione, comunicano concetti complessi in modo immediato e migliorano l’esperienza utente complessiva. In HTML, il tag <img> è lo strumento principale per inserire immagini nelle pagine web. Tuttavia, utilizzarlo correttamente richiede attenzione a numerosi aspetti: dall’accessibilità alla performance, dalla SEO alla responsività.
Il Tag img: Sintassi e Attributi Essenziali
Il tag <img> è un elemento auto-chiudente (void element), il che significa che non ha un tag di chiusura. Richiede obbligatoriamente due attributi: src e alt.
L’attributo src (source) specifica il percorso dell’immagine. Può essere un URL assoluto (https://esempio.com/foto.jpg), un percorso relativo (immagini/foto.jpg) o anche un data URI per immagini inline codificate in Base64. La scelta tra URL assoluto e relativo segue le stesse logiche dei link HTML.
L’attributo alt (alternative text) fornisce una descrizione testuale dell’immagine. Questo testo viene visualizzato quando l’immagine non può essere caricata, viene letto dagli screen reader per gli utenti con disabilità visive e viene utilizzato dai motori di ricerca per comprendere il contenuto dell’immagine. La sintassi base è: <img src="foto.jpg" alt="Descrizione dell'immagine">.
Gli attributi width e height specificano le dimensioni dell’immagine in pixel. Anche se le dimensioni vengono spesso gestite via CSS, specificarle direttamente nell’HTML ha un vantaggio importante: permette al browser di riservare lo spazio necessario durante il caricamento della pagina, evitando il fastidioso effetto di layout shift (lo spostamento degli elementi quando l’immagine viene finalmente caricata). Questo ha un impatto diretto sul punteggio CLS (Cumulative Layout Shift), uno dei Core Web Vitals di Google.
Scrivere Alt Text Efficaci
La qualità dell’alt text ha un impatto significativo sull’accessibilità e sul SEO. Un buon alt text deve essere descrittivo, conciso e contestuale. Ecco le linee guida fondamentali:
- Descrivi cosa mostra l’immagine, non cosa è l’immagine. Scrivi “Sviluppatore che programma su un laptop in un ufficio” anziché “Foto di programmatore”.
- Sii conciso — idealmente tra 5 e 15 parole. Gli screen reader leggono l’intero alt text, quindi evita descrizioni troppo lunghe.
- Non iniziare con “Immagine di…” — gli screen reader annunciano già che si tratta di un’immagine, quindi sarebbe ridondante.
- Includi keyword pertinenti quando è naturale farlo, ma senza forzature. Il keyword stuffing nell’alt text è penalizzato da Google.
- Per immagini decorative (che non aggiungono informazioni al contenuto), usa un alt text vuoto:
alt="". Questo comunica allo screen reader di ignorare l’immagine.
Per le immagini che contengono testo (come infografiche o screenshot), l’alt text dovrebbe includere quel testo o un suo riassunto. Per grafici e diagrammi, descrivi i dati chiave o le tendenze mostrate.
Formati Immagine: JPEG, PNG, WebP e AVIF
La scelta del formato immagine corretto è cruciale per bilanciare qualità visiva e dimensione del file. Ogni formato ha caratteristiche specifiche che lo rendono adatto a diversi casi d’uso:
JPEG (Joint Photographic Experts Group) è il formato ideale per fotografie e immagini con molte sfumature di colore. Supporta la compressione lossy (con perdita di qualità) che permette di ottenere file molto piccoli. Non supporta la trasparenza. È il formato più universalmente supportato.
PNG (Portable Network Graphics) è preferibile per immagini che richiedono trasparenza (canale alpha), grafica con bordi netti, loghi e icone. Utilizza compressione lossless (senza perdita di qualità) ma produce file più pesanti rispetto al JPEG per le fotografie.
WebP è un formato sviluppato da Google che offre compressione superiore sia lossy che lossless, supporta la trasparenza e le animazioni. A parità di qualità visiva, un file WebP è in media il 25-35% più piccolo di un JPEG equivalente. È supportato da tutti i browser moderni ed è diventato lo standard de facto per le immagini web.
AVIF (AV1 Image File Format) è il formato più recente e offre una compressione ancora migliore rispetto a WebP, fino al 50% più efficiente del JPEG. Il supporto dei browser è in rapida crescita ma non è ancora universale, quindi è consigliabile utilizzarlo come opzione primaria con fallback a WebP o JPEG.
Lazy Loading: Caricare le Immagini al Momento Giusto
Il lazy loading è una tecnica che ritarda il caricamento delle immagini fino a quando non stanno per entrare nel viewport (l’area visibile) dell’utente. Questo migliora drasticamente i tempi di caricamento iniziale della pagina, particolarmente importante per pagine con molte immagini.
Con HTML5, il lazy loading nativo è diventato semplicissimo da implementare grazie all’attributo loading: <img src="foto.jpg" alt="Descrizione" loading="lazy">. I valori possibili sono lazy (caricamento differito) e eager (caricamento immediato, il comportamento predefinito).
È importante non applicare il lazy loading alle immagini above the fold (visibili senza scorrere la pagina), come il logo, l’immagine hero o la prima immagine del contenuto. Queste immagini dovrebbero caricarsi immediatamente per offrire la migliore esperienza utente possibile. Un suggerimento avanzato: per le immagini above the fold critiche, puoi aggiungere l’attributo fetchpriority="high" per indicare al browser di dargli priorità nel caricamento.
Immagini Responsive: srcset e sizes
In un mondo dove le pagine web vengono visualizzate su dispositivi con schermi di dimensioni e risoluzioni molto diverse, servire la stessa immagine a tutti è inefficiente. Gli attributi srcset e sizes permettono di fornire versioni diverse della stessa immagine, lasciando al browser la scelta della più appropriata.
L’attributo srcset elenca le diverse versioni dell’immagine disponibili con le relative larghezze: srcset="foto-320.jpg 320w, foto-640.jpg 640w, foto-1280.jpg 1280w". L’attributo sizes indica al browser quanto spazio occuperà l’immagine nel layout, aiutandolo a scegliere la versione più adatta prima ancora di scaricarla.
Per scenari più complessi, il tag <picture> offre un controllo ancora maggiore. Permette di specificare immagini diverse non solo per dimensione ma anche per formato, direzione artistica o condizioni media. Ad esempio, puoi servire un’immagine in formato AVIF ai browser che lo supportano, WebP come fallback e JPEG come ultima risorsa.
Figure e Figcaption: Immagini con Didascalia
Quando un’immagine necessita di una didascalia (caption), i tag <figure> e <figcaption> sono la soluzione semanticamente corretta. Il tag <figure> rappresenta un contenuto autosufficiente, tipicamente un’illustrazione, un diagramma, una foto o un blocco di codice. Il tag <figcaption> fornisce la didascalia associata.
La struttura è semplice: <figure><img src="grafico.png" alt="Grafico vendite 2024"><figcaption>Andamento delle vendite nel primo trimestre 2024</figcaption></figure>. Questo approccio è preferibile all’utilizzo di un semplice <p> sotto l’immagine perché crea una connessione semantica esplicita tra l’immagine e la sua didascalia, utile sia per gli screen reader che per i motori di ricerca.
È importante notare che anche in presenza di un <figcaption>, l’attributo alt dell’immagine rimane necessario. Il figcaption descrive il contesto o fornisce informazioni aggiuntive, mentre l’alt text descrive il contenuto visivo dell’immagine stessa. I due testi hanno funzioni diverse e complementari.
Per approfondire altri aspetti dell’HTML legati alla struttura e alla semantica delle pagine web, ti consigliamo la lettura del nostro articolo sull’HTML semantico per SEO e accessibilità.
Hai bisogno di aiuto con l’ottimizzazione delle immagini del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.