Immagini HTML
Incorpora immagini con il tag img: src e alt, width/height, srcset e picture responsive, caricamento lazy.
Per incorporare un'immagine in una pagina web, usa il tag <img>.
Il tag <img> supporta diversi attributi obbligatori e facoltativi, che forniscono informazioni aggiuntive sull'elemento.
Sintassi
Il tag <img> è vuoto, il che significa che il tag di chiusura non è necessario. Contiene solo attributi. Ma in XHTML, il tag (<img>) deve essere chiuso (<img/>).
Attributi obbligatori dell'immagine - src e alt
L'attributo src (source) specifica il nome o la posizione dell'immagine da visualizzare. Il suo valore può essere un percorso relativo (un file nel tuo progetto) o un URL assoluto (un'immagine ospitata altrove).
Percorso relativo — l'immagine si trova nel tuo progetto, insieme al file HTML:
<img src="images/example.jpg" alt="A description of the image" />URL assoluto — l'immagine è ospitata su un altro server:
<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />L'attributo alt fornisce un testo alternativo che viene mostrato se l'immagine non si carica (connessione lenta, percorso errato) e letto ad alta voce dagli screen reader. Ci sono due casi:
- Immagini significative — fornisci ad
altuna descrizione breve e accurata di ciò che l'immagine trasmette (alt="Bar chart of 2024 sales"). - Immagini decorative che non aggiungono nulla al contenuto — usa
alt=""vuoto. Gli screen reader salteranno l'immagine invece di annunciare un nome file privo di significato.
Includi sempre l'attributo. Omettere completamente alt è diverso da alt="" e viene segnalato come errore di accessibilità.
Nota: il comportamento del tooltip al passaggio del mouse è controllato dall'attributo title, non da alt.
La sintassi del tag <img> con gli attributi obbligatori src e alt sarà simile a questa:
Esempio di immagine HTML
<img src="example.jpg" alt="HTML tutorial" />Usa l'attributo alt per tutte le immagini per fornire una descrizione chiara e concisa del contenuto dell'immagine, che migliora l'accessibilità e aiuta i motori di ricerca a comprendere la tua pagina.
Attributi consigliati per le immagini - width e height
Imposta sempre gli attributi width e height su un <img>. Indicano al browser il rapporto d'aspetto dell'immagine prima che il file venga scaricato, così può riservare esattamente la giusta quantità di spazio nel layout fin dall'inizio.
Senza di essi, la pagina ridisegna il layout nel momento in cui arriva ogni immagine — testo e altri elementi saltano verso il basso per fare spazio. Questo spostamento visivo si chiama Cumulative Layout Shift (CLS), uno dei Core Web Vitals di Google e una fonte comune di clic errati. Fornire le dimensioni lo previene.
Esempio di immagine HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Gli attributi accettano numeri di pixel senza unità (width="200", non width="200px"). Puoi comunque ridimensionare l'immagine con CSS — il browser usa i valori degli attributi solo per calcolare il rapporto d'aspetto ed evitare lo spostamento del layout.
Esempio del tag HTML <img> con gli attributi src, alt, width e height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Risultato
Mantieni gli attributi width e height per il rapporto d'aspetto, poi usa le proprietà CSS max-width o max-height per aggiungere flessibilità. Questo impedisce alle immagini grandi di fuoriuscire dal layout su schermi piccoli.
Rendere le immagini fluide (responsive)
Per impedire a un'immagine di fuoriuscire dal suo contenitore su schermi stretti, applica questa regola CSS. È la singola riga di CSS più utile per le immagini:
img {
max-width: 100%;
height: auto;
}max-width: 100% limita l'immagine renderizzata alla larghezza del suo contenitore, così si riduce su schermi piccoli ma non scala oltre le sue dimensioni naturali diventando sfocata. height: auto consente all'altezza di adeguarsi di conseguenza, così l'immagine mantiene le sue proporzioni invece di deformarsi.
Questo funziona in sinergia con gli attributi width/height: gli attributi riservano lo spazio del rapporto d'aspetto (niente CLS), mentre il CSS rende fluida la dimensione renderizzata effettiva.
Posizionamento flottante delle immagini
Per impostazione predefinita, un elemento <img> è inline, quindi si posiziona nella riga del testo. Puoi fare sì che il testo avvolga un'immagine con la proprietà CSS float — imposta float: left o float: right.
Float è una tecnica legacy per questo tipo di layout. Per qualsiasi cosa oltre al semplice avvolgimento di un paragrafo attorno a un'immagine — gallerie, elementi multimediali affiancati, card — preferisci Flexbox o CSS Grid. Offrono allineamento, spaziature e avvolgimento senza le peculiarità di clearing richieste da float.
Per mostrare l'immagine a sinistra e il testo a destra, aggiungi float: left. Preferisci una classe CSS a un attributo style inline per una migliore manutenibilità.
Esempio del tag <img> e della proprietà CSS float per posizionare un'immagine a sinistra:
Esempio di immagine con float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Aggiungendo l'attributo style="float:right" al tag <img> si posiziona il testo a sinistra e l'immagine a destra.
Esempio del tag <img> e della proprietà CSS float per posizionare un'immagine a destra:
Esempio con attributo float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Risultato
Come aggiungere un collegamento ipertestuale a un'immagine
Poiché il tag <a> viene usato per inserire collegamenti ipertestuali, devi semplicemente inserire l'immagine nel tag <a> per rendere l'immagine cliccabile.
Esempio dei tag <a> e <img> per aggiungere un collegamento ipertestuale a un'immagine:
Esempio di immagine con collegamento ipertestuale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Immagini responsive: servire il file giusto
Una singola immagine raramente si adatta a tutti gli schermi. Inviare una foto da 2000px a un telefono spreca larghezza di banda; inviarne una piccola a un display 4K risulta sfocata. HTML ti offre due strumenti per consentire al browser di scegliere il file migliore per ogni dispositivo.
srcset e sizes (stessa immagine, dimensioni diverse)
Usa gli attributi srcset e sizes su <img> quando hai la stessa immagine a diverse larghezze e vuoi che il browser scarichi quella più appropriata.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A scenic mountain lake"
/>srcsetelenca i file candidati con le loro larghezze intrinseche (400wsignifica che il file è largo 400px).sizesindica al browser quanto sarà larga l'immagine visualizzata — qui, la larghezza intera del viewport sotto i 600px, altrimenti la metà. Il browser combina questo con la densità di pixel del dispositivo per scegliere il file più piccolo che risulti ancora nitido.srcrimane come fallback per i browser molto vecchi.
L'elemento picture (formati diversi o art direction)
L'elemento <picture> racchiude diversi elementi <source> e un <img>. Il browser scorre le sorgenti dall'alto verso il basso e usa la prima che supporta, ricadendo sull'<img> se nessuna corrisponde.
L'uso classico è servire un formato moderno e più leggero con un fallback garantito:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>Un browser che comprende AVIF scarica il file AVIF; uno che comprende solo WebP usa quello; tutto il resto ricade sul JPEG. Il tag <img> è obbligatorio — fornisce il testo alt e il fallback. Puoi anche usare <picture> per art direction: mostrare un'immagine ritagliata in verticale sui telefoni e una panoramica sui desktop tramite attributi media su ciascun <source>.
Caricamento lazy e decodifica
Per impostazione predefinita il browser scarica avidamente ogni immagine nella pagina. Per le immagini molto in basso nella pagina, questo è uno spreco iniziale. Aggiungi loading="lazy" affinché il browser recuperi l'immagine solo quando si avvicina al viewport:
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />Usa loading="lazy" per le immagini fuori schermo, ma non per la tua immagine principale above-the-fold (come un hero o un elemento LCP) — differirla rallenta il caricamento percepito.
Puoi anche aggiungere decoding="async", che consente al browser di decodificare l'immagine fuori dal thread principale in modo da non bloccare il rendering del contenuto circostante.
Quale formato immagine scegliere per il web
Esistono tre tipi principali di formati immagine supportati dai browser:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF dispone di 256 colori unici che producono grafica semplice e veloce da caricare. Puoi usare GIF per piccoli disegni, diagrammi, grafici, pulsanti e altra grafica semplice, che non impedirà alla tua pagina di caricarsi velocemente.
JPEG è tipicamente un formato a 24 bit che mescola luce rossa, blu e verde per visualizzare milioni di colori. Viene quindi utilizzato principalmente per le fotografie. Questo formato ti offre la flessibilità di scegliere quanto comprimere l'immagine — dallo 0% (compressione elevata) al 100% (nessuna compressione). Puoi scegliere questo formato se non ti dispiace rinunciare a un po' di qualità in favore di una riduzione delle dimensioni. Evita di usare JPEG per immagini con testo, forme o grandi blocchi di colore, perché quando il file viene compresso, le linee si sfocano e i colori si alterano.
Il formato PNG combina i vantaggi sia di JPEG che di GIF: supporta milioni di colori e consente la compressione senza perdita. Puoi usare PNG per grafica web che richiede trasparenza, colori intensi e grafica complessa o fotografie.
Formati immagine moderni
Due formati moderni sono ora ampiamente supportati dai browser e producono file più piccoli e veloci da caricare rispetto a JPEG o PNG.
WebP, progettato da Google, supporta sia la compressione senza perdita che quella con perdita, nonché la trasparenza e l'animazione. I file WebP sono tipicamente del 25–35% più piccoli rispetto a un JPEG o PNG equivalente e sono supportati da tutti i principali browser attuali. (WebP - Wikipedia)
AVIF è un formato più recente basato sul codec video AV1. Di solito comprime meglio di WebP alla stessa qualità visiva e supporta un'ampia gamma di colori, rendendolo eccellente per le fotografie. Il supporto dei browser è ora ampio ma leggermente inferiore a WebP.
Poiché non tutti i browser dei visitatori supportano il formato più recente, servili con un elemento <picture> e un fallback JPEG o PNG, come mostrato nella sezione Immagini responsive sopra. Il browser sceglierà quindi il miglior formato che comprende.
Potresti ancora incontrare formati più vecchi come BPG e HEIC di Apple. Nessuno dei due è supportato dai browser web, quindi evitali per le immagini sul web — convertili in WebP o AVIF.