Come inserire un'immagine in HTML
Usa l'elemento <img>. src è il file dell'immagine, alt la descrive, e width e height ne danno la dimensione in pixel. <img> è un elemento vuoto: non ha tag di chiusura.
Qui src è un piccolo SVG scritto nell'URL (un data URI), così l'esempio funziona anche offline. In un sito vero src è il percorso di un file:
src | Carica |
|---|---|
photo.jpg | photo.jpg nella stessa cartella del file HTML |
images/photo.jpg | Dalla cartella images accanto al file HTML |
../photo.jpg | Dalla cartella superiore |
/images/photo.jpg | Dalla cartella images nella radice del sito |
https://example.com/photo.jpg | Da un altro sito (può spostarsi o sparire) |
Sulla maggior parte dei server web i percorsi distinguono maiuscole e minuscole: Photo.JPG e photo.jpg sono file diversi.
Testo alternativo (alt)
Il testo alt prende il posto dell'immagine. I lettori di schermo lo leggono ad alta voce, e il browser lo mostra quando l'immagine non si può caricare. Entrambe le immagini qui puntano a file che non esistono:
La prima mostra il suo testo alt, "Coddy logo", al posto dell'immagine. La seconda ha un alt vuoto, quindi non c'è testo da mostrare, e i lettori di schermo la saltano. Come scrivere alt:
- Descrivi ciò che conta nel contesto. "Grafico a barre: le vendite sono raddoppiate da marzo a giugno" dice più di "grafico".
- Non iniziare con "Immagine di". I lettori di schermo la annunciano già come immagine.
- Usa
alt=""per le decorazioni (un separatore, un ornamento di sfondo) così i lettori di schermo le saltano. - Non omettere mai
alt. Senza, alcuni lettori di schermo leggono invece il nome del file, per esempio "IMG trattino basso 4032 punto jpg". - Per un'immagine dentro un link, descrivi la destinazione:
<a href="/"><img src="logo.svg" alt="Home"></a>.
Impostare le dimensioni dell'immagine
Gli attributi width e height sono in pixel, senza unità. Le dimensioni del CSS li sostituiscono. Il CSS più utile per le immagini è questa coppia, che permette a un'immagine di restringersi con il suo contenitore senza mai allungarsi oltre la sua larghezza naturale:
La prima immagine mantiene i suoi 300 pixel ed esce dal riquadro di 180 pixel. La seconda si riduce a 180 per 120, mantenendo le proporzioni 3:2. height: auto è importante: senza, l'attributo height="200" terrebbe l'immagine alta 200 pixel e la schiaccerebbe.
Scrivi sempre width e height nell'HTML, anche per le immagini responsive. Il browser li usa per riservare la giusta quantità di spazio prima che arrivi il file, così il testo sotto non salta in giù quando l'immagine si carica.
Ritagliare con object-fit
Quando un'immagine deve riempire un riquadro di forma diversa (un avatar quadrato da una foto larga, card di uguale altezza), object-fit decide cosa succede alla parte in più:
L'originale è un'immagine 2:1 di un cerchio, mostrata in riquadri quadrati:
fill(il predefinito) allunga l'immagine fino al riquadro, quindi il cerchio diventa un ovale.containfa stare tutta l'immagine dentro, lasciando delle fasce vuote.coverriempie il riquadro e taglia ciò che sborda, mantenendo il cerchio rotondo. È la scelta abituale per miniature e avatar.
object-position sceglie quale parte resta visibile quando si ritaglia, per esempio object-position: top per i ritratti.
Didascalie con figure e figcaption
Una didascalia che appartiene a un'immagine va in <figcaption>, e tutte e due vanno in <figure>. Così sono legate tra loro per i lettori di schermo, e la figura si può stilizzare come un'unica unità:
La didascalia non sostituisce alt. alt dice cosa mostra l'immagine; la didascalia aggiunge quello che servirebbe anche a chi la vede.
Lo spazio sotto un'immagine
Un'immagine poggia sulla linea di base del testo, come una lettera, quindi il suo contenitore lascia spazio sotto per le parti che scendono di lettere come g e y. Un bordo rende visibile lo spazio:
Il primo bordo ha una striscia bianca sotto l'immagine blu. display: block sull'immagine (secondo riquadro) la toglie; lo stesso fa vertical-align: middle se l'immagine deve restare inline.
Lazy loading e sorgenti responsive
Per le immagini più in basso in una pagina lunga, loading="lazy" rimanda il download finché chi legge non ci arriva vicino scorrendo:
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
Non usare il lazy loading per l'immagine principale in cima alla pagina; ritarda la parte della pagina che si vede per prima.
Per inviare file più piccoli agli schermi piccoli, elenca più dimensioni in srcset e di' al browser quanto sarà larga l'immagine mostrata con sizes. Il browser sceglie il file:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> va oltre e offre formati diversi, con l'<img> come alternativa che porta anche l'alt:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Formati delle immagini
| Formato | Adatto per |
|---|---|
| JPEG | Foto |
| PNG | Screenshot, immagini che richiedono bordi netti o trasparenza |
| WebP | Foto e grafiche, più leggero di JPEG e PNG, con trasparenza |
| AVIF | Foto, di solito più leggero di WebP |
| SVG | Loghi, icone e diagrammi; si adatta a qualsiasi dimensione senza sfocarsi |
| GIF | Brevi animazioni, anche se un <video> in loop senza audio è molto più leggero |
Errori comuni
- Un percorso del tuo computer, come
src="C:\Users\me\photo.jpg". Funziona solo sulla tua macchina. Metti il file accanto al tuo HTML e usa un percorso relativo. altmancante. Ogni<img>ne ha bisogno, vuoto per le decorazioni.- Impostare nel CSS sia
widthsiaheightcon valori di forma diversa. L'immagine si deforma. Impostane uno e lascia l'altroauto, oppure usaobject-fit. - Nessun attributo
widtheheight, così la pagina salta mentre le immagini si caricano. - File enormi ridotti con il CSS. Una foto di 4000 pixel mostrata a 400 pixel viene comunque scaricata per intero. Ridimensionala, o usa
srcset. - Un tag di chiusura
</img>.<img>è vuoto; non c'è niente da chiudere.
Le immagini negli esempi qui sopra sono piccoli SVG inline. Per provare lo stesso codice con le tue foto, incollalo nel playground HTML.
Domande frequenti
Come si inserisce un'immagine in HTML?
Usa il tag <img> con il file in src e una descrizione in alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> non ha tag di chiusura.
Come cambio le dimensioni di un'immagine in HTML?
Imposta gli attributi width e height in pixel, oppure usa il CSS, per esempio img { width: 300px; height: auto; }. Impostare una sola dimensione e lasciare l'altra auto mantiene le proporzioni.
Perché la mia immagine non si vede in HTML?
Di solito il percorso in src è sbagliato: è relativo al file HTML, sulla maggior parte dei server i nomi dei file distinguono maiuscole e minuscole, e un percorso come C:\photos\cat.jpg esiste solo sul tuo computer. Apri direttamente l'URL dell'immagine nel browser per controllarlo.
Cos'è il testo alt in HTML?
L'attributo alt è un testo che sostituisce l'immagine. I lettori di schermo lo leggono, e i browser lo mostrano quando l'immagine non si carica. Descrivi cosa mostra o cosa fa l'immagine; usa alt="" per le immagini solo decorative.
Come rendo responsive un'immagine?
Aggiungile nel CSS max-width: 100%; height: auto;. L'immagine si restringe allora per stare in un contenitore stretto e non cresce mai oltre la sua larghezza naturale.
Perché c'è uno spazio sotto la mia immagine?
Le immagini sono inline di default e poggiano sulla linea di base del testo, che lascia spazio sotto per le lettere che scendono. Imposta display: block sull'immagine, o vertical-align: middle, per togliere lo spazio.
