<picture>: l'elemento "Immagine"

L' elemento HTML <picture> contiene zero o più elementi <source> e un elemento <img> per offrire versioni alternative di un'immagine per diversi scenari di visualizzazione/dispositivo.

Il browser considererà ogni elemento <source> figlio e sceglierà la migliore corrispondenza tra di loro. Se non vengono trovate corrispondenze o se il browser non supporta l'elemento <picture>, viene selezionato l'URL dell'attributo src dell'elemento <img>. L'immagine selezionata viene quindi presentata nello spazio occupato dall'elemento <img>.

Per decidere quale URL caricare, lo user agent esamina dell'elemento <source> ogni attributo srcset, media e type per selezionare un'immagine compatibile che corrisponda meglio al layout e alle capacità correnti del dispositivo di visualizzazione.

L'elemento <img> ha due scopi:

Descrive le dimensioni e altri attributi dell'immagine e la sua presentazione.
Fornisce un fallback nel caso in cui nessuno degli elementi <source> offerti sia in grado di fornire un'immagine utilizzabile.

Casi d'uso comuni per <picture>:

Direzione artistica. Ritaglio o modifica di immagini per mediacondizioni diverse (ad esempio, caricamento di una versione più semplice di un'immagine con troppi dettagli, su schermi più piccoli).
Offrire formati immagine alternativi , per i casi in cui alcuni formati non sono supportati.
Risparmiare larghezza di banda e velocizzare i tempi di caricamento della pagina caricando l'immagine più appropriata per la visualizzazione del visualizzatore.

Se si forniscono versioni a densità più elevata di un'immagine per la visualizzazione con DPI (Retina) elevati, utilizzare invece srcset sull'elemento <img>. Ciò consente ai browser di optare per versioni a densità inferiore nelle modalità di salvataggio dei dati e non è necessario scrivere condizioni media esplicite.

Note d'uso

È possibile utilizzare la proprietà object-position per regolare il posizionamento dell'immagine all'interno della cornice dell'elemento e la proprietà object-fit per controllare il modo in cui l'immagine viene ridimensionata per adattarla alla cornice.

Nota: utilizzare queste proprietà sull'elemento figlio <img>, non sull'elemento <picture>.

Esempi

Questi esempi dimostrano come diversi attributi dell'elemento <source> modifichino la selezione dell'immagine all'interno <picture>.

Attributo multimediale

L' mediaattributo specifica una condizione multimediale (simile a una query multimediale) che l'interprete valuterà per ciascun elemento <source>.

Se la condizione in <source> restituisce false, il browser la salta e valuta l'elemento successivo all'interno di <picture>.

<picture>
  <source srcset="logo.png" media="(min-width: 600px)">
  <img src="logo2.png" alt="fake logo">
<picture>

L'attributo srcset

L'attributo srcset viene utilizzato per offrire un elenco di possibili immagini in base alle dimensioni .

È composto da un elenco separato da virgole di descrittori di immagini. Ogni descrittore di immagine è composto da un URL dell'immagine e anche...

un descrittore di larghezza , seguito da a w (come 300w); OPPURE
un descrittore di densità di pixel , seguito da un x (come 2x) per servire un'immagine ad alta risoluzione per schermi con DPI elevati.

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="fake logo">
<picture>

L'attributo type

L'attributo type specifica un tipo MIME per gli URL delle risorse nell'attributo srcset dell'elemento <source>. Se l'interprete non supporta il tipo specificato, l' elemento <source> viene saltato.

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="fake foto">
<picture>

Indice

HTML