<picture>: Das Picture-Element

<!--Change the browser window width to see the image change.-->

<picture>
  <source
    srcset="/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

Der user agent untersucht die srcset-, media- und type-Attribute jedes <source>, um ein kompatibles Bild auszuwählen, das am besten zum aktuellen Layout und den Fähigkeiten des Anzeigegeräts passt.

Das <img>-Element erfüllt zwei Zwecke:

1. Es beschreibt die Größe und andere Eigenschaften des Bildes und seiner Darstellung.
2. Es stellt einen Fallback bereit, falls keiner der angebotenen <source>-Elemente ein verwendbares Bild bereitstellen kann.

Häufige Anwendungsfälle für <picture>:

• Kunstrichtung. Zuschneiden oder Modifizieren von Bildern für verschiedene media-Bedingungen (zum Beispiel das Laden einer einfacheren Version eines Bildes, das zu viele Details aufweist, auf kleineren Displays).

• Angebot alternativer Bildformate, für den Fall, dass bestimmte Formate nicht unterstützt werden.

  Hinweis: Zum Beispiel haben neuere Formate wie AVIF oder WEBP viele Vorteile, könnten aber vom Browser nicht unterstützt werden. Eine Liste der unterstützten Bildformate finden Sie in: Leitfaden für Bilddateitypen und Formate.

• Einsparung von Bandbreite und Beschleunigung der Ladezeiten von Seiten, indem das am besten geeignete Bild für das Display des Betrachters geladen wird.

Wenn Sie hochauflösende Versionen eines Bildes für High-DPI (Retina)-Displays bereitstellen, verwenden Sie stattdessen srcset auf dem <img>-Element. Dadurch können Browser in Datenverbrauchsparmodi niedrigere Auflösungen wählen, und Sie müssen keine expliziten media-Bedingungen schreiben.

Dieses Element enthält nur globale Attribute.

Sie können die Eigenschaft object-position verwenden, um die Positionierung des Bildes innerhalb des Rahmens des Elements anzupassen, und die Eigenschaft object-fit, um zu steuern, wie das Bild innerhalb des Rahmens angepasst wird.

Diese Beispiele zeigen, wie verschiedene Attribute des <source>-Elements die Auswahl des Bildes innerhalb von <picture> beeinflussen.

Das media-Attribut spezifiziert eine Medienbedingung (ähnlich einer Media Query), die der User Agent für jedes <source>-Element auswertet.

Wenn die Medienbedingung von <source> zu false ausgewertet wird, überspringt der Browser sie und bewertet das nächste Element innerhalb von <picture>.

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

Das srcset-Attribut wird verwendet, um eine Liste möglicher Bilder basierend auf der Größe oder der Pixeldichte des Displays anzubieten.

Es besteht aus einer durch Kommas getrennten Liste von Bilddeskriptoren. Jeder Bilddeskriptor besteht aus einer URL des Bildes und entweder einem:

• Breitendeskriptor, gefolgt von einem w (zum Beispiel 300w); ODER
• Pixeldichtedeskriptor, gefolgt von einem x (zum Beispiel 2x), um ein hochauflösendes Bild für High-DPI-Bildschirme bereitzustellen.

Stellen Sie sicher, dass Sie beachten:

• Breiten- und Pixeldichtedeskriptoren sollten nicht zusammen verwendet werden
• ein fehlender Pixeldichtedeskriptor impliziert 1x
• doppelte Deskriptorwerte sind nicht erlaubt (2x & 2x, 100w & 100w)

Das folgende Beispiel veranschaulicht die Verwendung des srcset-Attributs mit dem <source>-Element zur Angabe eines hochauflösenden und eines Standardauflösungsbildes:

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

Das srcset-Attribut kann auch auf dem <img>-Element ohne das <picture>-Element verwendet werden. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet werden kann, um Standardauflösungs- und hochdichte Bilder anzugeben:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

Das sizes-Attribut ist beim Verwenden von srcset nicht obligatorisch, es wird jedoch empfohlen, um dem Browser zusätzliche Informationen zu geben, damit er die beste Bildquelle auswählen kann.

Ohne Größen verwendet der Browser die Standardsgröße des Bildes wie durch seine Abmessungen in Pixeln angegeben. Dies ist möglicherweise nicht die beste Passform für alle Geräte, insbesondere wenn das Bild auf Bildschirmen unterschiedlicher Größe oder in unterschiedlichen Kontexten angezeigt wird.

Bitte beachten Sie, dass Größen nur dann wirkungsvoll sind, wenn Breitenmaß-Deskriptoren mit srcset anstelle von Pixelverhältniswerten bereitgestellt werden (200w anstelle von 2x zum Beispiel). Für weitere Informationen zur Verwendung von srcset, siehe die Responsive images-Dokumentation.

Das type-Attribut gibt einen MIME-Typ für die Ressourcen-URL(s) im srcset-Attribut des <source>-Elements an. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das <source>-Element übersprungen.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

• <img>-Element
• <source>-Element
• Positionierung und Größeneinstellung des Bildes innerhalb des Rahmens: object-position und object-fit
• Leitfaden für Bilddateitypen und -formate