Tag HTML <picture>

L'elemento <picture> è un contenitore per uno o più elementi <source> e un elemento <img>, che è l'ultimo elemento figlio del blocco.

L'elemento <source> contiene versioni di un'immagine per diversi scenari di dispositivi di visualizzazione. L'elemento <img> descrive le dimensioni dell'immagine e altri attributi. Il browser valuta ciascuno degli elementi <source> figli e carica l'immagine più appropriata. Se non viene trovata alcuna corrispondenza, il browser visualizza l'immagine specificata dal tag <img>.

L'elemento <picture> consente di specificare più immagini per adattarsi meglio a diverse dimensioni del viewport, evitando la necessità di ridimensionare una singola immagine. Può essere utilizzato per i seguenti scopi:

per ritagliare e modificare le immagini in base a diverse condizioni media,
per offrire formati immagine alternativi quando determinati formati non sono supportati.

Nota: Le proprietà object-position e object-fit si applicano all'elemento fallback <img> per controllare le sue dimensioni e l'allineamento all'interno del contenitore.

Il tag <picture> è una novità di HTML5.

Sintassi

Il tag <picture> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<picture>) e di chiusura (</picture>).

Tag HTML <picture>

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Esempio del tag HTML `<picture>`:

Tag HTML <picture>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Provalo tu stesso »

Il browser valuta gli elementi <source> in ordine e carica il primo la cui query media corrisponde al viewport corrente. Se nessun <source> corrisponde, utilizza l'elemento <img> come fallback. L'elemento <picture> è ampiamente supportato da tutti i browser moderni.

L'attributo alt sull'elemento fallback <img> è obbligatorio: qualunque immagine il browser visualizzi, utilizza quel singolo testo alt. Scrivi sempre una descrizione del contenuto effettivo dell'immagine, non un segnaposto come alt="img".

Due funzioni di <picture>

<picture> risolve due problemi diversi, e si sceglie la tecnica in base all'attributo inserito negli elementi <source>:

Art direction — mostrare un ritaglio o una composizione diversa in base al viewport. Un'immagine panoramica orizzontale su desktop, un ritaglio verticale stretto su mobile. Usa l'attributo media (una media query CSS) per scegliere l'immagine giusta.
Negoziazione del formato — servire la stessa immagine in un formato più moderno e leggero quando il browser lo supporta (AVIF o WebP), ricorrendo al JPEG/PNG in tutti gli altri casi. Usa l'attributo type (un tipo MIME) affinché il browser salti i formati che non riesce a decodificare.

Il browser scorre la lista dei <source> dall'alto verso il basso e utilizza il primo che sia compatibile (la sua query media, se presente) e supportato (il suo type, se presente). L'ordine è importante: inserisci prima l'opzione preferita.

Cambio di formato (AVIF, poi WebP, poi JPEG)

Questo è l'utilizzo più comune di <picture> nel mondo reale. I browser moderni che comprendono AVIF scaricano il file più leggero; quelli meno recenti ricorrono al WebP, e tutti gli altri ottengono il JPEG universalmente supportato. Il browser carica esattamente un'immagine.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Poiché gli elementi <source> portano solo un type, tutti e tre vengono offerti a ogni browser — che semplicemente sceglie il primo formato che riesce a decodificare. Non sono coinvolte media query; si tratta esclusivamente del formato del file.

Art direction (ritagli diversi con `media`)

Qui l'obiettivo è cambiare quale immagine viene mostrata, non solo il suo formato. Su schermi larghi 800px e oltre il browser riceve un ritaglio banner orizzontale; gli schermi più stretti ricevono un ritaglio quadrato che mantiene il soggetto leggibile su uno smartphone.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Usa media ogni volta che il contenuto dell'immagine deve essere diverso tra i breakpoint.

Cambio di risoluzione con `srcset` e `sizes`

Se hai bisogno solo della stessa immagine a diverse dimensioni in pixel — senza un ritaglio o formato diverso — di solito non hai bisogno di <picture>. Un singolo elemento <img> con srcset e sizes permette al browser di scegliere la risoluzione migliore per lo schermo, il viewport e la densità di pixel del dispositivo:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

Come interpretare questo codice:

srcset elenca le immagini candidate, ciascuna contrassegnata con un descrittore di larghezza (400w significa che il file è largo 400px). Il browser conosce la larghezza reale di ogni file senza scaricarlo.
sizes comunica al browser quanto sarà larga l'immagine visualizzata. Qui si legge: "al di sotto dei 600px di viewport l'immagine riempie tutta la larghezza (100vw); altrimenti occupa la metà (50vw)." Il browser combina questa informazione con il rapporto di pixel del dispositivo per scegliere il candidato più efficiente da srcset.
src rimane come fallback per i browser che ignorano srcset.

srcset con descrittori di larghezza funziona anche all'interno di un elemento <source>, quindi è possibile combinare il cambio di risoluzione con l'art direction o il cambio di formato.

Quando hai davvero bisogno di `<picture>`?

Obiettivo	Usa
Stessa immagine, lascia che il browser scelga la risoluzione migliore per lo schermo	`<img srcset>` + `sizes`
Stessa immagine in un formato moderno più leggero (AVIF/WebP) con un fallback	`<picture>` + `type`
Un ritaglio/composizione diverso per breakpoint (art direction)	`<picture>` + `media`

Regola pratica: ricorri a <picture> solo quando hai bisogno di controllare quale file il browser deve usare (formato o ritaglio). Per il semplice "servire la dimensione giusta", <img srcset> è più semplice e sufficiente.

Attributi

Questi attributi si applicano agli elementi <source> all'interno di <picture>:

Attributo	Valore	Descrizione
media	media_query	Specifica una media query per corrispondere alla dimensione del viewport.
srcset	URL	Specifica l'URL dell'immagine da usare in situazioni diverse.
sizes	length	Specifica la larghezza dell'immagine per diverse dimensioni del viewport.
type	MIME_type	Specifica il tipo MIME della risorsa collegata (es. `image/webp`).
src	URL	Specifica l'URL dell'immagine. Usato come alternativa a `srcset`.

Ogni elemento <source> deve includere un attributo srcset o src. L'elemento <img> di fallback utilizza l'attributo src.

Il tag <picture> supporta gli Attributi Globali.

Esercitazione

Pratica

Cosa fa l'elemento HTML picture?

Incorpora contenuto audio in un documento.Definisce un contenitore per più sorgenti candidate e un'immagine di fallback, consentendo al browser di caricare l'immagine più adatta al dispositivo, alla dimensione dello schermo o al formato supportato.Funziona solo per grafica vettoriale come SVG.Crea automaticamente un collegamento ipertestuale attorno a un'immagine.

Sintassi

Esempio del tag HTML <picture>: