Immagini e testo alternativo

Per essere utile, un elemento img ha bisogno di due attributi: src, che dice dove si trova l'immagine, e alt, che dice che cosa mostra quando non si può vedere.

L'elemento img

Le immagini non sono salvate dentro il file HTML. La pagina le indica, e il browser scarica ciascuna come file separato. L'elemento <img> fa da puntatore. È un elemento vuoto, quindi non ha tag di chiusura, e il suo attributo src contiene l'indirizzo dell'immagine, assoluto o relativo, proprio come l'href di un link. Le immagini sono elementi sostituiti: il browser sostituisce l'elemento con l'immagine, e l'immagine decide quanto è grande, a meno che tu non dica altro.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Gli attributi width e height danno la dimensione dell'immagine in pixel, senza unità di misura. Impostali sulla dimensione reale del file. Di solito l'HTML arriva prima delle immagini, quindi senza questi numeri il browser dispone prima il testo e poi lo spinge in basso ogni volta che un'immagine finisce di caricarsi, il che disturba se hai già iniziato a leggere. Con questi numeri, il browser riserva subito lo spazio giusto. Per mostrare un'immagine più piccola o più grande, usa il CSS invece di cambiare questi numeri.

Scrivere il testo alternativo

L'attributo alt contiene un'alternativa testuale. Uno screen reader la legge ad alta voce, un browser la mostra quando il file non si carica, e i motori di ricerca la leggono per capire l'immagine. MDN suggerisce un test semplice: che cosa si perderebbe se l'immagine non comparisse? Scrivi quello, in breve. Per la foto di un prodotto, descrivi ciò che servirebbe sapere per sceglierlo. Per un grafico, indica il messaggio del grafico, come Le vendite sono triplicate da gennaio a marzo, invece di Grafico a barre.

• Non iniziare con Immagine di o Foto di. Gli screen reader annunciano già che si tratta di un'immagine.
• Le immagini decorative, come una linea ondulata di separazione, ricevono un alt="" vuoto. Così gli screen reader le saltano. Omettere del tutto alt è diverso: alcuni screen reader leggono al suo posto il nome del file.
• Se un'immagine è l'unico contenuto di un link, il suo testo alternativo è il testo del link, quindi descrivi dove porta il link (Home), non l'immagine (Logo del pane).
• Se la stessa informazione è già nel testo accanto all'immagine, alt="" evita di ripeterla due volte.

Figure e didascalie

Quando un'immagine ha una didascalia, racchiudi entrambe in <figure> e metti la didascalia in <figcaption>. Così la didascalia è collegata all'immagine per le tecnologie assistive, cosa che un semplice paragrafo sotto l'immagine non fa. Didascalia e testo alternativo hanno compiti diversi: la didascalia la leggono tutti, mentre alt sostituisce l'immagine quando manca. Non dovrebbero semplicemente ripetersi. Una figura non deve per forza contenere un'immagine; anche un esempio di codice, una tabella o una poesia possono essere una figura.

Formati, data URL e SVG in linea

Le fotografie di solito sono JPEG o WebP, le grafiche piatte con bordi netti PNG, e i disegni fatti di forme spesso SVG, un formato testuale che resta nitido a qualsiasi dimensione. Una piccola immagine può anche essere scritta direttamente in src come data URL che inizia con data:image/svg+xml,; gli esercizi qui sotto usano questo metodo, così nulla viene caricato da un altro sito. Un SVG si può anche scrivere direttamente nell'HTML con un elemento <svg>. Dagli role="img" e un figlio <title>, così gli screen reader hanno un nome per indicarlo. Infine, loading="lazy" sulle immagini molto in basso in una pagina lunga dice al browser di aspettare finché chi legge non scorre vicino a esse.

Un'altra regola di MDN: usa solo immagini che hai il diritto di usare. Le immagini trovate online sono protette dal diritto d'autore, a meno che la loro licenza non dica altro, e puntare il tuo src al server di qualcun altro senza permesso, il cosiddetto hotlinking, gli fa anche pagare il tuo traffico.