<picture>

Das HTML-Element <picture> ist ein Container, der zur Angabe mehrerer <source> (en-US)s (Bildquellen) für ein <img> dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.

Usage Context

Content categories	Flow content, phrasing content, embedded content
Permitted content	Null oder mehr <source> (en-US)-Elemente, gefolgt von einem `<img>`-Element, optional vermischt mit Skript-unterstützenden Elementen.
Tag omission	Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Permitted parent elements	Jegliches Element, das eingebetteten Inhalt erlaubt.
DOM interface	`HTMLPictureElement` (en-US)

Attribute

Dieses Element beinhaltet nur globale Attribute.

Beispiel 1: Verwendung des Attributs `media`

Das Attribut media erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte <source> (en-US)-Element auszuwählen. Wenn ein Media Query zu false evaluiert, wird das <source> (en-US)-Element übersprungen.

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

Beispiel 2: Verwendung des Attributs `type`

Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements <source> (en-US) angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das <source> (en-US)-Element übersprungen.

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

Beispiel 3: Verwendung des Attributs `srcset`

Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.

<picture>
 <source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x">
 <img src="mdn-logo.png" alt="MDN">
</picture>

Spezifikation

Spezifikation	Status	Kommentar
HTML Living Standard Die Definition von '<picture>' in dieser Spezifikation.	Lebender Standard	Initial definition

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch

<img>-Element