Tag HTML <img>
Guida al tag HTML <img>: src e alt, srcset/sizes responsive, lazy loading, width/height per CLS, formati immagine e fallback errori.
Il tag <img> viene utilizzato per inserire un'immagine in un documento HTML. L'immagine stessa non viene inserita direttamente nel documento: il browser inserisce un'immagine HTML dalla sorgente specificata nel tag <img>.
Ci sono due attributi obbligatori per un elemento <img>: src, che indica la sorgente dell'immagine, e alt, che definisce un testo alternativo per l'immagine.
Per rendere le immagini HTML cliccabili, è necessario inserire il tag <img> all'interno del tag <a>, utilizzato per creare un link su un'immagine HTML.
Sintassi
Il tag <img> è vuoto, il che significa che il tag di chiusura non è necessario. Contiene solo attributi. In XHTML, tuttavia, il tag <img> deve essere auto-chiuso (<img />).
Esempio del tag HTML <img>:
Un esempio di utilizzo del tag HTML <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>È possibile usare CSS per modificare l'aspetto iniziale di un'immagine.
Esempio del tag <img> con stile CSS:
Come applicare stile al tag HTML <img> usando le proprietà CSS vertical-align e padding?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Attributi Src e Alt
L'attributo src (source) indica la sorgente dell'immagine. È obbligatorio, poiché definisce il percorso dell'immagine. Il valore dell'attributo src può essere il nome del file oppure il suo URL.
L'attributo alt definisce un nome alternativo per l'immagine. È anch'esso obbligatorio per il tag <img>. Il suo valore è un testo descrittivo visualizzato nel browser prima che l'immagine venga caricata, oppure se il caricamento dell'immagine fallisce.
Immagini decorative vs. significative
La necessità di inserire testo nell'attributo alt dipende dallo scopo dell'immagine:
- Immagini significative (una foto di prodotto, un grafico, un logo che trasmette informazioni) richiedono un
altbreve e descrittivo che comunichi le stesse informazioni dell'immagine. Descrivere cosa mostra, non "immagine di". - Immagini decorative (bordi, spaziatori, elementi grafici di sfondo che non aggiungono nulla al contenuto) devono usare un
altvuotoalt="". Questo indica agli screen reader di saltare l'immagine. Non omettere del tutto l'attributoalt— la sua assenza fa sì che alcuni screen reader annuncino il nome del file.
<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />
<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />Per le immagini significative, includere parole chiave pertinenti nel testo alternativo dove risultano naturali. Un testo alt accurato migliora sia l'accessibilità sia il posizionamento dell'immagine nei motori di ricerca.
Utilizzo di "data:image/[type];base64,[base64-string]" per l'attributo src
Il formato data:image/[type];base64,[base64-string] può essere usato come valore dell'attributo src di un tag img per visualizzare un'immagine direttamente dal codice HTML, senza doverla caricare da un file esterno.
Ecco un esempio di come usare questo formato per visualizzare un'immagine in un tag img:
Utilizzo di "data:image/[type];base64,[base64-string]" per l'attributo src
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Tiny base64-encoded sample image"
width="5"
height="5">In questo esempio, image/png specifica il tipo MIME dell'immagine, e la lunga stringa dopo base64, è il dato dell'immagine effettivo codificato in base64. La stringa sopra è un PNG 5×5 completo (anche se minuscolo).
Si noti che l'uso di immagini codificate in base64 può aumentare la dimensione del file HTML e rallentare il caricamento della pagina. È generalmente consigliato usare questo formato per immagini piccole o icone, e utilizzare file esterni per immagini di dimensioni maggiori.
Esempio del tag HTML <img> con gli attributi src e alt:
Un esempio del tag img con gli attributi src e alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>Perché impostare width e height
Impostare sempre gli attributi width e height (in pixel, senza unità di misura) in modo che corrispondano alle dimensioni intrinseche dell'immagine. In questo modo il browser può calcolare il rapporto d'aspetto dell'immagine e riservare lo spazio corretto prima che il file finisca di essere scaricato. Senza questi attributi, la pagina viene inizialmente visualizzata senza spazio per l'immagine, poi salta quando l'immagine arriva — un'esperienza negativa che penalizza il Cumulative Layout Shift (CLS), uno dei Core Web Vitals di Google.
<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">È comunque possibile ridimensionare l'immagine tramite CSS. Un pattern comune e sicuro è impostare gli attributi width e height per il rapporto d'aspetto, lasciando poi a CSS il compito di renderla fluida:
img {
height: auto; /* preserve aspect ratio */
max-width: 100%; /* never overflow its container */
}Gli attributi loading e decoding
L'attributo loading rinvia il caricamento delle immagini (e degli iframe) finché la risorsa non è prossima alla visualizzazione. È una funzionalità standard supportata da tutti i browser moderni.
Valori supportati per l'attributo loading:
lazy— rinvia il caricamento finché l'immagine non raggiunge una soglia di distanza dal viewport. Da usare per immagini fuori schermo / sotto la piega.eager(predefinito) — carica la risorsa immediatamente.
<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">Non applicare il lazy loading all'immagine principale above-the-fold (spesso il Largest Contentful Paint, o LCP, element). Il lazy loading ne ritarda la richiesta e rende la pagina percepibilmente più lenta. Per quell'immagine usare loading="eager" oppure omettere l'attributo.
L'attributo correlato decoding suggerisce al browser come decodificare l'immagine. decoding="async" permette al browser di decodificare l'immagine su un thread separato dal principale, evitando di bloccare il rendering del contenuto circostante:
<img src="photo.jpg" alt="Landscape" width="800" height="600"
loading="lazy" decoding="async">Il lazy loading rinvia il caricamento delle risorse finché non sono necessarie, invece di caricare tutto subito. Questo migliora le prestazioni e riduce il consumo di dati non necessari sul dispositivo dell'utente.
Immagini responsive con srcset e sizes
Una singola immagine fissa spreca larghezza di banda su schermi piccoli oppure appare sfocata su quelli grandi. Gli attributi srcset e sizes permettono al browser di scegliere il file migliore in base alle dimensioni dello schermo e alla densità di pixel del dispositivo, mantenendo un unico elemento <img>.
srcsetelenca i file immagine candidati, ciascuno associato a un descrittore di larghezza (la larghezza reale dell'immagine in pixel, ad es.480w).sizesindica al browser quanto sarà larga l'immagine visualizzata ai diversi breakpoint, in modo che possa scegliere prima che il layout sia calcolato.
<img
src="photo-800.jpg"
srcset="photo-480.jpg 480w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
800px"
alt="Coastline at sunset"
width="800" height="600">Qui il browser legge sizes, calcola quanti pixel CSS necessita l'immagine, moltiplica per il rapporto di pixel del dispositivo e scarica la corrispondenza più vicina da srcset. Il src standard rimane come fallback per i browser che non supportano srcset.
Quando si devono servire ritagli diversi per layout differenti (art direction) o offrire formati moderni con un fallback (come AVIF/WebP con backup JPEG), è preferibile usare l'elemento <picture>.
Formati Immagine Supportati
I formati di file immagine sono metodi standardizzati per organizzare e memorizzare immagini digitali. Un formato di file immagine può memorizzare dati in formato non compresso, compresso (con o senza perdita di dati) oppure in formato vettoriale. (Wikipedia).
Ogni user agent supporta diversi formati immagine. Ecco l'elenco dei formati immagine più comuni:
| Abbreviazione | Formato file | Tipo MIME | Estensione/i file | Compatibilità browser |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | image/avif | .avif | Chrome 85+, Firefox 93+, Safari 16+, Opera |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera, Safari 14+ |
JPEG e PNG sono universalmente supportati e rimangono le scelte più sicure come predefiniti. WebP e AVIF sono formati moderni che producono file notevolmente più piccoli a qualità simile — AVIF di solito comprime meglio, WebP ha il supporto più ampio. Poiché alcuni browser più vecchi non supportano ancora AVIF, è consigliabile distribuire questi formati tramite l'elemento <picture> con un fallback JPEG o PNG, anziché inserirli direttamente in un <img src>.
Errori di Caricamento Immagini
Durante il caricamento di un'immagine possono verificarsi degli errori. Se è stato impostato un gestore dell'evento onerror sull'evento error, tale gestore verrà chiamato. Di seguito sono riportate le situazioni in cui ciò può accadere:
- L'attributo src è vuoto ("") o null.
- L'URL di src e l'URL della pagina attualmente visualizzata dall'utente sono uguali.
- L'immagine è corrotta in modo tale da impedirne il caricamento.
- I metadati dell'immagine sono corrotti in modo tale da rendere impossibile il recupero delle sue dimensioni, e non sono specificate dimensioni negli attributi del tag
<img>. - Il formato non è supportato dallo user agent.
È possibile intercettare l'evento error tramite l'attributo onerror e sostituire un'immagine di fallback, in modo che gli utenti vedano un segnaposto invece dell'icona di immagine non trovata:
<img
src="profile.jpg"
alt="User profile photo"
width="200" height="200"
onerror="this.onerror=null; this.src='fallback.png';">Impostare prima this.onerror=null è importante: rimuove il gestore prima di modificare src, in modo che se anche l'immagine di fallback non riesce a caricarsi, il gestore non venga attivato nuovamente causando un ciclo infinito.
Attributi
Questi sono gli attributi attuali e standard dell'elemento <img>. Gli attributi deprecati sono elencati separatamente di seguito.
| Attributo | Valore | Descrizione |
|---|---|---|
| alt | testo | Definisce il testo alternativo per l'immagine. Usare alt="" per immagini puramente decorative. |
| crossorigin | anonymous | use-credentials | Definisce se CORS viene utilizzato durante il caricamento dell'immagine. Le immagini caricate tramite CORS possono essere usate nell'elemento <canvas> senza limitarne le funzionalità. |
| decoding | sync | async | auto | Suggerisce al browser come decodificare l'immagine. async decodifica su un thread separato dal principale. |
| height | pixel | Definisce l'altezza dell'immagine. Impostarlo insieme a width per riservare spazio ed evitare layout shift. |
| ismap | ismap | Specifica che il contenuto del tag è una mappa immagine lato server. |
| loading | eager | lazy | Controlla se l'immagine viene caricata immediatamente o rinviata finché non è prossima al viewport. |
| sizes | condizioni media + lunghezze | Indica al browser la larghezza visualizzata dell'immagine per breakpoint, da usare insieme a srcset. |
| src | URL | Definisce la sorgente dell'immagine. |
| srcset | URL + descrittori | Un elenco separato da virgole di immagini candidate e i relativi descrittori di larghezza (w) o densità (x). |
| usemap | #mapname | Specifica un collegamento all'elemento <map>, che contiene le coordinate per la mappa immagine client. |
| width | pixel | Definisce la larghezza dell'immagine. Impostarlo insieme a height per riservare spazio ed evitare layout shift. |
Il tag <img> supporta anche gli Attributi Globali e gli Attributi Evento.
Attributi Deprecati
Questi attributi sono obsoleti in HTML5. Utilizzare in alternativa le proprietà CSS.
| Attributo | Valori | Descrizione | Alternativa |
|---|---|---|---|
| align | left right top bottom middle | Definisce l'allineamento dell'immagine rispetto agli elementi circostanti. Centra l'immagine HTML rispetto agli elementi circostanti. | Le proprietà CSS float e/o vertical-align. |
| border | pixel | Definisce la larghezza del bordo attorno all'immagine. | La proprietà CSS border. |
| hspace | La proprietà CSS margin. | ||
| name | Specifica un nome per l'elemento. | L'attributo id. | |
| vspace | pixel | Definisce lo spazio nella parte superiore e inferiore dell'immagine. | Usare la proprietà CSS margin. |