Tag <picture>

Tag <picture>

Definition

Status: Aktueller Standard

Das Tag <picture> steht für picture (Bild).

Das <picture>-Element in HTML dient dazu, responsive Bilder und alternative Bildquellen bereitzustellen. Es erlaubt dem Browser, abhängig von Viewportgröße, Displayauflösung, Bildformat oder Media-Query, die optimale Bilddatei zu wählen. Der Browser prüft die im <picture>-Element enthaltenen <source>-Tags der Reihe nach von oben nach unten. Sobald eine Bedingung (Media-Query oder Dateityp) zutrifft, wird diese Quelle geladen und im nachfolgenden <img>-Tag angezeigt. Das <img>-Element dient dabei als Platzhalter für die Anzeige und als Fallback für alte Browser.

Syntax

<picture>
  <source media="(min-width: ...px)" srcset="..." type="...">
  <source media="(min-width: ...px)" srcset="...">
  <img src="..." alt="...">
</picture>

Attribute bzw. Unterelemente

<source>

Definiert alternative Bildressourcen

srcset

Pfad zur Bilddatei (Pflichtattribut in <source>)

media

Eine Media-Query (z. B. Bildschirmbreite), die erfüllt sein muss (z.B.: "min-width: ...px" oder "orientation: portrait").

type

Spezifiziert den MIME-Typ (z. B. image/webp), um moderne Formate nur an kompatible Browser auszuliefern.

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <picture>

Der Code:

<picture>
  <source media="(min-width: 800px)" srcset="gross.webp" type="image/webp">
  <source media="(min-width: 450px)" srcset="mittel.jpg">
  <img src="fallback.jpg" alt="Beschreibung des Bildes">
</picture>