Come inserire un'immagine in HTML

Arricchisci i tuoi siti web aggiungendo immagini. Puoi inserire immagini nei file HTML usando il tag <img>, con cui specifichi la posizione dell'immagine su Internet, altezza, larghezza e testo alternativo che appare se l'immagine non si carica o se qualcuno usa uno screen reader. I tre formati d'immagine più comuni sul web sono GIF, PNG e JPEG.

Passaggio 1

Apri il file HTML della pagina web a cui vuoi aggiungere un'immagine in un editor di testo come Blocco note o in un software per lo sviluppo web.

Passaggio 2

Aggiungi un tag <img> nel file. Posizionalo dopo l'elemento sotto cui vuoi che l'immagine appaia quando la pagina viene aperta nel browser. Il tag non ha un tag di chiusura separato. All'interno del tag devi specificare la sorgente dell'immagine tramite l'attributo src. Se l'immagine si trova nella stessa cartella del file HTML, scrivi nome ed estensione del file. Se è altrove, inserisci l'URL completo.

Passaggio 3

Aggiungi l'attributo alt al tuo tag. In HTML5 l'attributo alt è obbligatorio. Usalo per descrivere l'immagine nel caso non possa essere caricata. Se l'immagine non si carica, il browser mostra il testo inserito dopo l'attributo alt. Inoltre, l'attributo alt è fondamentale per i software screen reader usati da persone con disabilità visive: il software legge il testo nell'attributo alt così l'utente può "sentire" cosa c'è nell'immagine.

Passaggio 4

Specifica le dimensioni dell'immagine in pixel con gli attributi height e width. Se non li specifichi, il browser non sa quanto spazio riservare durante il caricamento della pagina: il testo si carica per primo lasciando uno spazio minimo, poi la pagina "salta" quando l'immagine arriva e lo spazio si espande. Con le dimensioni indicate, il browser riserva esattamente lo spazio giusto.

Passaggio 5

Verifica il codice aprendo il file HTML in un browser per assicurarti che l'immagine appaia nella posizione corretta.

Suggerimento

Usa i CSS per posizionare l'immagine a sinistra o a destra o far avvolgere il testo attorno. Esempio: style="float:left;" o style="float:right;" dentro il tag.
Se non conosci sia altezza che larghezza, puoi usare solo uno dei due attributi. Puoi anche usare i CSS per le dimensioni: es. style="height:100px;width:100px;" per un'immagine 100x100 pixel.
Rendi l'immagine un link cliccabile inserendo il tag <img> dentro una coppia di tag <a href>.

Avvertenza

Non usare l'attributo alt per cercare di migliorare la SEO. I motori di ricerca sanno da tempo che alcuni web designer riempiono l'attributo alt con parole chiave extra, perciò ignorano quel testo.