Corso di HTML / Inserire immagini con img: testo alternativo e dimensioni

Per inserire un'immagine in un documento HTML, inserite l'URL del file nell'attributo src dell'elemento img e descrivete il suo contenuto rilevante in alt. Impostate width e height sulle dimensioni effettive in pixel dell'immagine, in modo che il browser possa riservare spazio prima che il file venga caricato.

Inserire un'immagine con img

L'elemento img contiene un'immagine e non ha un tag di chiusura. Utilizzate l'immagine di esempio con un lago e un albero per provare il codice seguente. Determinate l'indirizzo del file utilizzando gli esempi di percorsi relativi in Link: percorsi, frammenti di pagina e e-mail.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Un albero su una piccola isola in un lago, con le montagne sullo sfondo"
     width="1600" height="900">

1. Scaricate l'immagine di esempio e salvatela accanto al file HTML che si sta modificando, ad esempio index.html.
2. Inserite il codice sopra nella sezione body del file HTML e salvate il file.
3. Aprite o aggiornate il file HTML in un browser. Dovreste vedere la foto del lago mostrata qui sotto.

src identifica il file rispetto alla posizione del file HTML. Il codice sopra cerca l'immagine nella stessa cartella. Se l'avete salvata in una sottocartella images, modificate l'attributo in src="images/html-image-sample-lake-tree-1600-v1.webp". Anche il nome del file e l'estensione devono corrispondere al file reale.

Cliccando sull'immagine qui si apre il file originale. Racchiudere un'immagine con un link è una funzione diversa dall'inserimento con img.

Cosa dovrebbe dire l'attributo alt?

alt è un testo alternativo. Fornisce ai lettori che non possono vedere l'immagine o il cui browser non riesce a caricarla le informazioni che l'immagine trasmette nel contesto. Descrivete brevemente questo ruolo, invece di scrivere "immagine" o un elenco di parole chiave. Per una didascalia visibile a tutti, confrontate la spiegazione in Raggruppare immagini e didascalie con figure e figcaption.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Un albero su una piccola isola in un lago, con le montagne sullo sfondo"
     width="1600" height="900">

Se un'immagine è puramente decorativa e ripete informazioni già presenti nelle vicinanze, un valore alt="" vuoto può essere appropriato. Il valore vuoto la segnala come non essenziale; omettere l'attributo alt non comunica questa intenzione. Se l'immagine trasmette informazioni essenziali, spiegatele nel testo alternativo o nel testo adiacente. L'albero decisionale del W3C WAI sul testo alternativo aiuta nei casi dubbiosi.

Cosa fanno larghezza e altezza?

Il file di esempio ha 1600×900 pixel. I suoi valori width="1600" e height="900" aiutano il browser a calcolare in anticipo il rapporto d'aspetto. Questi attributi non riducono né la dimensione del file in byte né il numero di pixel. Testate la selezione della dimensione del file separatamente dalle modifiche di ritaglio nelle immagini responsive: srcset, sizes e picture.

Se l'immagine è più larga dell'area di contenuto, il CSS può limitarne la larghezza visualizzata, mantenendo il rapporto d'aspetto.

img {
  max-width: 100%;
  height: auto;
}

In un file HTML autonomo, inserite questo CSS in un elemento style nel head o in un foglio di stile collegato. Le dimensioni dell'immagine indicano il rapporto del file; il CSS controlla la dimensione visualizzata corrente.

Per inviare un file più piccolo, è necessaria una versione dell'immagine con meno pixel. Il tutorial sulle immagini responsive spiega come srcset e sizes consentano al browser di scegliere fra più file immagine.

Se l'immagine non viene visualizzata

• Controllate il nome esatto del file e l'estensione in src.
• Controllate la cartella delle immagini rispetto al file HTML.
• Aprite direttamente l'URL dell'immagine in un browser per vedere se il file è disponibile.
• Non presumete che dimensioni visualizzate più piccole significhino un file scaricato più piccolo.

La documentazione dell'elemento img su MDN descrive gli attributi disponibili e il loro comportamento.