<img>: l'elemento "Incorpora immagine"

L'elemento HTML <img> incorpora un'immagine nel documento.

Ci sono alcune cose da tenere in conto a proposito dell'elemento <img>:

• L'attributo src è obbligatorio e contiene il percorso dell'immagine che desideri incorporare.

• L'attributo alt contiene una descrizione testuale dell'immagine, che non è obbligatoria ma è incredibilmente utile per l'accessibilità: gli screen reader leggono questa descrizione ai propri utenti in modo che sappiano cosa significa l'immagine. Il testo alternativo viene visualizzato anche sulla pagina se l'immagine non può essere caricata per qualche motivo: ad esempio, errori di rete, blocco dei contenuti o linkrot.

Ci sono molti altri attributi per raggiungere vari scopi:

• Utilizzare entrambi width e height per impostare la dimensione intrinseca dell'immagine, consentendole di occupare spazio prima del caricamento, per ridurre i cambiamenti di layout del contenuto.

• Immagini reattive con sizes e srcset(vedi anche l'elemento <picture>)

Formati di immagine supportati

Lo standard HTML non elenca quali formati di immagine supportare, quindi i programmi utente possono supportare formati diversi.

I formati di file immagine più comunemente usati sul web sono:

• APNG (Animated Portable Network Graphics) : buona scelta per sequenze di animazione senza perdita di dati (GIF è meno performante)
• AVIF (AV1 Image File Format) — Buona scelta sia per le immagini che per le immagini animate grazie alle prestazioni elevate.
• GIF (Graphics Interchange Format) : buona scelta per immagini e animazioni semplici.
• JPEG (immagine Joint Photographic Expert Group) — Buona scelta per la compressione con perdita di immagini fisse (attualmente la più popolare).
• PNG (Portable Network Graphics) — Buona scelta per la compressione con perdita di immagini fisse (qualità leggermente migliore rispetto a JPEG).
• SVG (Scalable Vector Graphics) — Formato immagine vettoriale. Utilizzare per immagini che devono essere disegnate accuratamente a dimensioni diverse.
• WebP (formato immagine Web) — Scelta eccellente sia per le immagini che per le immagini animate

Formati come WebP e AVIF sono consigliati in quanto offrono prestazioni molto migliori di PNG, JPEG, GIF sia per le immagini fisse che per quelle animate. WebP è ampiamente supportato mentre AVIF non supporta Safari.

SVG rimane il formato consigliato per le immagini che devono essere disegnate accuratamente con dimensioni diverse.

Errori di caricamento

Se si verifica un errore durante il caricamento o il rendering di un'immagine ed un gestore di eventi onerror è stato impostato sull'evento error, tale gestore di eventi verrà chiamato. Questo può accadere in una serie di situazioni, tra cui:

• L'attributo src è vuoto o null.
• L'URL in src è lo stesso dell'URL della pagina in cui si trova attualmente l'utente.
• L'immagine è danneggiata in qualche modo che ne impedisce il caricamento.
• I metadati dell'immagine sono danneggiati in modo tale che è impossibile recuperarne le dimensioni e non sono state specificate dimensioni negli attributi dell'elemento <img>.
• L'immagine è in un formato non supportato dall'interprete .

Attributi

alt

Definisce una descrizione testuale alternativa dell'immagine.

Nota: i browser non visualizzano sempre le immagini. Esistono diverse situazioni in cui un browser potrebbe non visualizzare le immagini, ad esempio:

• Browser non visivi (come quelli utilizzati da persone con disabilità visive)
• L'utente sceglie di non visualizzare le immagini (risparmio di larghezza di banda, motivi di privacy)
• L'immagine non è valida o è di un tipo non supportato

In questi casi, il browser può sostituire l'immagine con il testo nell'attributo alt dell'elemento. Per questi e altri motivi, fornire un valore alt utile per quando possibile.

L'omissione completa di alt indica che l'immagine è una parte fondamentale del contenuto e non è disponibile alcun equivalente testuale. L'impostazione di questo attributo su una stringa vuota (alt="") indica che questa immagine non è una parte fondamentale del contenuto (è una decorazione o un pixel di tracciamento) e che i browser non visivi potrebbero ometterla dal rendering. I browser visivi nasconderanno anche l'icona dell'immagine interrotta se alt è vuoto e l'immagine non è stata visualizzata.

Questo attributo viene utilizzato anche quando si copia e incolla l'immagine nel testo o si salva un'immagine collegata in un segnalibro.

crossorigin

Indica se il recupero dell'immagine deve essere eseguito utilizzando una richiesta CORS. I dati dell'immagine da un'immagine abilitata per CORS restituiti da una richiesta CORS possono essere riutilizzati nell'elemento <canvas> senza essere contrassegnati come " contaminati ".

Se l'attributo crossorigin non è specificato, viene inviata una richiesta non CORS (senza l' intestazione Origin della richiesta) e il browser contrassegna l'immagine come contaminata e limita l'accesso ai dati dell'immagine, impedendone l'utilizzo negli elementi <canvas>.

Se viene specificato l'attributo crossorigin, viene inviata una richiesta CORS (con l' intestazione Origin della richiesta); ma se il server non sceglie di consentire l'accesso incrociato ai dati dell'immagine da parte del sito di origine (non inviando alcuna intestazione di risposta Access-Control-Allow-Origin o non includendo l'origine del sito in nessuna intestazione di risposta Access-Control-Allow-Origin che invia), il browser blocca l'immagine dal caricamento e registra un errore CORS nella console devtools.

Valori consentiti:

anonymous

Una richiesta CORS viene inviata con le credenziali omesse (ovvero senza cookie , certificati X.509 o intestazione della richiesta Authorization).

use-credentials

La richiesta CORS viene inviata con tutte le credenziali incluse (ovvero i cookie, i certificati X.509 e l'intestazione della richiesta Authorization). Se il server non sceglie di condividere le credenziali con il sito di origine (inviando l'intestazione della risposta Access-Control-Allow-Credentials: true), il browser contrassegna l'immagine come contaminata e limita l'accesso ai dati dell'immagine.

Se l'attributo ha un valore non valido, i browser lo gestiscono come se il anonymousvalore fosse utilizzato.

decoding

Fornisce un suggerimento per la decodifica dell'immagine al browser. Valori consentiti:

sync

Decodifica l'immagine in modo sincrono, per una presentazione atomica con altri contenuti.

async

Decodifica l'immagine in modo asincrono, per ridurre il ritardo nella presentazione di altri contenuti.

auto

Predefinito: nessuna preferenza per la modalità di decodifica. Il browser decide cosa è meglio per l'utente.

fetchpriority

Fornisce un suggerimento sulla priorità relativa da utilizzare durante il recupero dell'immagine. Valori consentiti:

high

Segnala un recupero ad alta priorità rispetto ad altre immagini.

low

Segnala un recupero a bassa priorità rispetto ad altre immagini.

auto

Predefinito: segnala la determinazione automatica della priorità di recupero rispetto ad altre immagini.

height

L'altezza intrinseca dell'immagine, in pixel. Deve essere un numero intero senza unità.

ismap

Questo attributo booleano indica che l'immagine fa parte di una mappa lato server. In tal caso, le coordinate in cui l'utente ha cliccato sull'immagine vengono inviate al server.

Nota: questo attributo è consentito solo se l'elemento <img> è un discendente di un elemento <a> con un attributo href valido. Ciò offre agli utenti senza dispositivi di puntamento una destinazione di fallback.

loading

Indica come il browser dovrebbe caricare l'immagine:

• eager: carica l'immagine immediatamente, indipendentemente dal fatto che l'immagine sia attualmente all'interno della finestra visibile (questo è il valore predefinito).
• lazy: rinvia il caricamento dell'immagine finché non raggiunge una distanza calcolata dal viewport, come definita dal browser. L'intento è quello di evitare la rete e la larghezza di banda di archiviazione necessarie per gestire l'immagine finché non è ragionevolmente certo che sarà necessaria. Questo generalmente migliora le prestazioni del contenuto nei casi d'uso più tipici.

Nota: il caricamento viene posticipato solo quando JavaScript è abilitato. Questa è una misura anti-tracciamento, perché se un programma utente supporta il caricamento lento quando lo scripting è disabilitato, sarebbe comunque possibile per un sito tenere traccia della posizione di scorrimento approssimativa di un utente durante una sessione, posizionando strategicamente le immagini nel markup di una pagina in modo tale che un server può tenere traccia di quante immagini sono richieste e quando.

referrerpolicy

Una stringa che indica quale referrer utilizzare durante il recupero della risorsa:

• no-referrer: L' intestazione Referer non verrà inviata.
• no-referrer-when-downgrade: l'intestazione Referer non verrà inviata a origini senza TLS ( HTTPS ).
• origin: Il referrer inviato sarà limitato all'origine della pagina referente: il suo schema , host e porta .
• origin-when-cross-origin: il referrer inviato ad altre origini sarà limitato allo schema, all'host e alla porta. Le navigazioni sulla stessa origine includeranno comunque il percorso.
• same-origin: verrà inviato un referrer per la stessa origine , ma le richieste cross-origin non conterranno informazioni sul referrer.
• strict-origin: Invia l'origine del documento come referrer solo quando il livello di sicurezza del protocollo rimane lo stesso (HTTPS→HTTPS), ma non inviarlo a una destinazione meno sicura (HTTPS→HTTP).
• strict-origin-when-cross-origin (impostazione predefinita): invia un URL completo quando si esegue una richiesta della stessa origine, invia l'origine solo quando il livello di sicurezza del protocollo rimane lo stesso (HTTPS→HTTPS) e non invia alcuna intestazione a una destinazione meno sicura (HTTPS→HTTP).
• unsafe-url: Il referrer includerà l'origine e il percorso (ma non il frammento , la password o il nome utente ). Questo valore non è sicuro , perché perde origini e percorsi dalle risorse protette da TLS a origini non sicure.

sizes

Una o più stringhe separate da virgole, che indicano un insieme di dimensioni di origine. Ogni dimensione della sorgente è composta da:

1. Una condizione mediatica . Deve essere omesso per l'ultimo elemento dell'elenco.
2. Un valore della dimensione di origine.

Le condizioni dei media descrivono le proprietà del viewport , non dell'immagine . Ad esempio, (max-height: 500px) 1000px propone di utilizzare una sorgente di 1000px di larghezza, se il viewport non è superiore a 500px.

I valori della dimensione della sorgente specificano la dimensione di visualizzazione prevista dell'immagine. I programmi utente utilizzano la dimensione dell'origine corrente per selezionare una delle origini fornite dall'attributo srcset, quando tali origini sono descritte utilizzando i descrittori di larghezza (w). La dimensione dell'origine selezionata influisce sulla dimensione intrinseca dell'immagine (la dimensione di visualizzazione dell'immagine se non viene applicato uno stile CSS ). Se l'attributo srcset è assente o non contiene valori con un descrittore di larghezza, l' attributo sizes non ha effetto.

src

L' URL dell'immagine . Obbligatorio per l'elemento <img>. Nei browser che supportano srcset, src viene trattata come un'immagine candidata con un descrittore di densità di pixel 1x, a meno che un'immagine con questo descrittore di densità di pixel non sia già definita in srcset, o a meno che srcset non contenga descrittori w.

srcset

Una o più stringhe separate da virgole, che indicano le possibili origini dell'immagine che l' interprete può utilizzare. Ogni stringa è composta da:

1. Un URL a un'immagine.
2. Facoltativamente, uno spazio bianco seguito da uno di:
   • Un descrittore di larghezza (un intero positivo seguito direttamente da w). Il descrittore di larghezza è diviso per la dimensione della sorgente fornita sizesnell'attributo per calcolare la densità di pixel effettiva.
   • Un descrittore di densità di pixel (un numero in virgola mobile positivo seguito direttamente da x).

Se non viene specificato alcun descrittore, alla sorgente viene assegnato il descrittore predefinito di 1x.

Non è corretto combinare descrittori di larghezza e descrittori di densità di pixel nello stesso attributo srcset. Anche i descrittori duplicati (ad esempio, due fonti nella stessa srcsetche sono entrambe descritte con 2x) non sono validi.

L'interprete seleziona una qualsiasi delle fonti disponibili a sua discrezione. Ciò offre loro un ampio margine di manovra per personalizzare la loro selezione in base a cose come le preferenze dell'utente o le condizioni della larghezza di banda .

width

La larghezza intrinseca dell'immagine in pixel. Deve essere un numero intero senza unità.

usemap

L'URL parziale (che inizia con #) di una mappa immagine associata all'elemento.

Nota: non è possibile utilizzare questo attributo se l'elemento <img> si trova all'interno di un elemento <a> o <button>.

Attriuti deprecati

align

Allinea l'immagine con il contesto circostante. Utilizzare le proprietà CSS float e/o vertical-align invece di questo attributo. Valori consentiti:

top

Equivalente a vertical-align: top o vertical-align: text-top

middle

Equivalente a vertical-align: -moz-middle-with-baseline

bottom

Il valore predefinito, equivalente a vertical-align: unset o vertical-align: initial

left

Equivalente a float: left

right

Equivalente a float: right

border

La larghezza di un bordo attorno all'immagine. Utilizzare invece la proprietà CSS border.

hspace

Il numero di pixel di spazio bianco a sinistra ea destra dell'immagine. Utilizzare invece la proprietà CSS margin.

longdesc

Un collegamento a una descrizione più dettagliata dell'immagine. I valori possibili sono un URL o un elemento id.

name

Un nome per l'elemento. Utilizzare invece l'attributo id.

vspace

Il numero di pixel di spazio bianco sopra e sotto l'immagine. Utilizzare invece la proprietà CSS margin.

Stilizzare con CSS

<img> è un elemento sostituito; ha un valore display di default inline, ma le sue dimensioni predefinite sono definite dai valori intrinseci dell'immagine incorporata, come se fosse inline-block. Puoi impostare proprietà come border/ border-radius, padding/ margin, width, height, ecc. su un'immagine.

<img> non ha una linea di base, quindi quando le immagini vengono utilizzate in un contesto di formattazione in linea con vertical-align: baseline, la parte inferiore dell'immagine verrà posizionata sulla linea di base del testo.

È possibile utilizzare la proprietà object-position per posizionare l'immagine all'interno del riquadro dell'elemento e la proprietà object-fit per regolare le dimensioni dell'immagine all'interno del riquadro (ad esempio, se l'immagine deve adattarsi al riquadro o riempirlo anche se è necessario il ritaglio).

A seconda del tipo, un'immagine può avere una larghezza e un'altezza intrinseche. Per alcuni tipi di immagine, tuttavia, le dimensioni intrinseche non sono necessarie. Le immagini SVG , ad esempio, non hanno dimensioni intrinseche se il loro elemento radice <svg> non ha un width o height impostato su di esso.

Problemi di sicurezza e privacy

Sebbene gli elementi <img> abbiano usi innocenti, possono avere conseguenze indesiderabili per la sicurezza e la privacy degli utenti.

Problemi di accessibilità

Creazione di descrizioni alternative significative

Il valore di un attributo alt dovrebbe descrivere in modo chiaro e conciso il contenuto dell'immagine. Non dovrebbe descrivere la presenza dell'immagine stessa o il nome del file dell'immagine. Se l' attributo alt è intenzionalmente omesso perché l'immagine non ha un equivalente testuale, considera metodi alternativi per presentare ciò che l'immagine sta cercando di comunicare.

Cattiva pratica

<img alt="image" src="penguin.jpg">

Buona pratica

<img alt="Un pinguino in piedi su una spiaggia" src="penguin.jpg">

Quando un attributo alt non è presente su un'immagine, alcuni lettori di schermo potrebbero invece annunciare il nome del file dell'immagine. Questa può creare confusione se il nome del file non è rappresentativo del contenuto dell'immagine.

Attributo title

L'attributo title non è un sostituto accettabile per l'attributo alt. Inoltre, evita di duplicare il altvalore dell'attributo in un attributo title dichiarato sulla stessa immagine. Ciò potrebbe far sì che alcuni lettori di schermo annuncino la descrizione due volte, creando un'esperienza confusa.

L'attributo title non deve inoltre essere utilizzato come didascalia supplementare per accompagnare la descrizione alt di un'immagine. Se un'immagine necessita di una didascalia, utilizzare gli elementi <figure> e <figcaption>.

Il valore dell'attributo title viene solitamente presentato all'utente come una descrizione comando, che appare poco dopo che il cursore smette di spostarsi sull'immagine. Sebbene ciò possa fornire informazioni aggiuntive all'utente, non dovresti presumere che l'utente le vedrà mai: l'utente può avere solo una tastiera o un touchscreen. Se disponi di informazioni particolarmente importanti o preziose per l'utente, presentale in linea utilizzando uno dei metodi sopra menzionati anziché utilizzare title.