Das <picture> Element

Der Html Tag <picture> kann als Container für <img> Tags gesehen werden. Wobei der Container dazu dient mehrere Source angaben zu machen und damit unterschiedliche Bilder je nach Display Breite, Höhe bzw. Auflösung auszuliefern. 

Attribut media (optional)

Mit dem Attribut media können Media Queries angegeben werden, sprich Abgrenzungen bei denen unterschiedlicher Inhalt verwendet wird. Der User Agent, in dem Fall der Browser trieft diese Entscheidung und liefert den entsprechenden Inhalt aus. Wird der Media Query zu false evaluiert so wird dieses <source> Element übersprungen.

<picture>
 <source srcset="logo-breit.png" media="(min-width: 600px)">
 <img src="logo-schmal.png" alt="ppp">
</picture>

Attribut type (optional)

Durch das type Attribut kann ein source Element mit einen MIME-Type (Internet Media Type) ausgezeichnet werden. Damit wird dem User Agent mitgeteilt um welches Format es sich bei dieser Datei handelt. Der Browser kann dadurch erneut dieses source Element überspringen sollte das angegebene Format nicht unterstützt werden.

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

Attribut srcset (required)

Durch das Attribut srcset ist es möglich verschiedene Bildgrößen auszuliefern. Dabei werden Auflösung, Zoomstufen im Browser und Bildschirme mit höheren Pixeldichten (DPI) unterschieden.

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

Attribut sizes (optional)

Das sizes Attribut hat ähnliche Absichten als das media Attribut jedoch erlaubt es nur eine Eigenschaft zum Beispiel 100vw oder einen Media Query.

<picture>
 <source srcset="logo-breit.png" sizes="100vw">
 <source srcset="logo-schmal.png" sizes="50vw">
 <img src="logo-schmal.png" alt="ppp">
</picture>

Unterstützung

Bis auf den durch Edge bereits ersetzten Internet Explorer wird dieses Element Mobile und Desktop von allen Browsern unterstützt.