<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>

Um zu entscheiden, welche URL geladen werden soll, untersucht der Benutzeragent jedes <source>-Attribute srcset, media und type, um ein kompatibles Bild auszuwählen, das am besten mit dem aktuellen Layout und den Fähigkeiten des Anzeigegeräts übereinstimmt.

Das <img>-Element hat zwei Aufgaben:

1. Es beschreibt die Größe und andere Attribute des Bildes sowie dessen Präsentation.
2. Es bietet eine Rückfallebene, falls keines der angebotenen <source>-Elemente ein verwendbares Bild liefern kann.

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

• Art Direction. Zuschneiden oder Modifizieren von Bildern für verschiedene media-Bedingungen (zum Beispiel das Laden einer einfacheren Version eines Bildes, das zu viele Details für kleinere Anzeigen hat).

• Anbieten 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 zu Bilddateitypen und -formaten.

• Sparen von Bandbreite und Beschleunigung der Ladezeiten durch das Laden des geeignetsten Bildes für die Anzeige des Betrachters.

Wenn höhere Dichteversionen eines Bildes für hochauflösende (Retina-)Displays bereitgestellt werden sollen, verwenden Sie srcset auf dem <img>-Element. Dies ermöglicht es den Browsern, in datensparenden Modi Versionen mit niedrigerer Dichte zu verwenden, ohne explizite media-Bedingungen schreiben zu müssen.

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 skaliert wird, um in den Rahmen zu passen.

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

Das media-Attribut gibt eine Medienbedingung an (ähnlich einer Medienabfrage), die der Benutzeragent für jedes <source>-Element auswertet.

Wenn die Medienbedingung des <source> als false ausgewertet wird, überspringt der Browser es und wertet das nächste Element innerhalb von <picture> aus.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-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 Pixeldichte der Anzeige anzubieten.

Es besteht aus einer durch Kommas getrennten Liste von Bildbeschreibungen. Jede Bildbeschreibung besteht aus einer URL des Bildes und entweder:

• einem Breiten-Beschreiber, gefolgt von einem w (wie 300w); ODER
• einem Pixeldichte-Beschreiber, gefolgt von einem x (wie 2x), um ein hochauflösendes Bild für hochauflösende Bildschirme zu liefern.

Bitte beachten Sie:

• Breiten- und Pixeldichte-Beschreiber sollten nicht zusammen verwendet werden
• ein fehlender Pixeldichte-Beschreiber bedeutet 1x
• doppelte Beschreibungswerte sind nicht erlaubt (2x & 2x, 100w & 100w)

Das folgende Beispiel veranschaulicht die Verwendung des srcset-Attributs mit dem <source>-Element, um ein Bild mit hoher Dichte und Standardauflösung anzugeben:

<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 demonstriert, wie das srcset-Attribut verwendet wird, um Standardauflösung und hochauflösende 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 nicht zwingend erforderlich, wenn srcset verwendet wird, aber es wird empfohlen, es zu verwenden, um dem Browser zusätzliche Informationen bereitzustellen, damit er die beste Bildquelle auswählen kann.

Ohne sizes verwendet der Browser die Standardgröße des Bildes, wie durch seine Abmessungen in Pixeln angegeben. Dies ist möglicherweise nicht die beste Wahl für alle Geräte, besonders wenn das Bild auf unterschiedlichen Bildschirmgrößen oder in unterschiedlichen Kontexten angezeigt wird.

Bitte beachten Sie, dass sizes nur wirksam ist, wenn Breitenmaß-Beschreiber mit srcset statt Pixeldichte-Werten bereitgestellt werden (200w anstelle von 2x zum Beispiel). Für weitere Informationen zur Verwendung von srcset siehe die Dokumentation zu responsiven Bildern.

Das type-Attribut gibt einen MIME-Typ für die Ressourcen-URL(s) im srcset-Attribut des <source>-Elements an. Wenn der Benutzeragent 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ößenanpassung des Bildes innerhalb seines Rahmens: object-position und object-fit
• Leitfaden zu Bilddateitypen und -formaten