<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