<picture>: The Picture element

L'elemento HTML <picture> contiene zero o più elementi <source> e un elemento <img> per fornire versioni di un'immagine per diversi scenari display / dispositivo. Il browser considererà ogni elemento <source> secondario e sceglierà la migliore corrispondenza tra di essi; se non vengono trovate corrispondenze, l'URL dell'elemento src di <img> è selezionato. L'immagine selezionata viene quindi presentata nello spazio occupato dall'elemento <img> .

La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clonare https://github.com/mdn/interactive-examples e inviarci una richiesta di pull.

Per decidere quale URL caricare, user agent esamina ciascun <source> s srcset, media, etype attributi per selezionare un'immagine compatibile che si adatta meglio al layout corrente della pagina, alle caratteristiche del dispositivo di visualizzazione, ecc.

Casi du uso comune del tag <picture>:

• Art direction: ritagliare o modificare le immagini per diverse condizioni dei media
• Offrire diversi formati di immagine quando determinati formati non sono supportati da tutti i browser

Se fornisci versioni a densità più elevata di un'immagine per display ad alta DPI (Retina), usa srcset invece dell'elemento <img> . Ciò consente ai browser di optare per versioni a bassa densità in modalità di salvataggio dei dati e non è necessario scrivere condizioni esplicite per i media .

Attributes

Questo elemento include solo attributi globali.

Usage notes

You can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame.

Examples

These examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>.

The media attribute

The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element. If the media condition evaluates to false, its <source> element is skipped.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

The type attribute

The type attribute specifies a MIME type for the resource URL(s) in the <source> element's srcset attribute. If the user agent does not support the given type, the <source> element is skipped.

​<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>

Specifications

Browser compatibility

See also

• <img> element
• <source> element
• Positioning and sizing the picture within its frame: object-position and object-fit