<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, prüft der User-Agent die srcset, media und type-Attribute jedes <source>-Elements, um ein kompatibles Bild zu wählen, das am besten zum aktuellen Layout und den Fähigkeiten des Anzeigegerätes passt.

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

1. Es beschreibt die Größe und andere Attribute des Bildes und seiner Darstellung.
2. Es bietet eine Fallback-Option, falls keines der angebotenen <source>-Elemente ein nutzbares Bild liefern kann.

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

• Kunstregie. Zuschneiden oder Anpassen von Bildern für verschiedene media-Bedingungen (zum Beispiel das Laden einer einfacheren Version eines Bildes mit zu vielen Details auf kleineren Anzeigen).

• Anbieten alternativer Bildformate, für Fälle, in denen bestimmte Formate nicht unterstützt werden.

  Hinweis: Zum Beispiel haben neuere Formate wie AVIF oder WEBP viele Vorteile, werden aber möglicherweise vom Browser nicht unterstützt. Eine Liste unterstützter Bildformate finden Sie in: Image file type and format guide.

• Bandbreite sparen und Ladezeiten der Seite beschleunigen, indem das passendste Bild für die Anzeige des Betrachters geladen wird.

Falls Sie hochauflösende Versionen eines Bildes für hochauflösende (Retina) Displays bereitstellen, verwenden Sie stattdessen srcset am <img>-Element. Dies ermöglicht es Browsern, in datenreduzierenden Modi niedrigauflösende Versionen zu wählen, und Sie müssen keine expliziten media-Bedingungen schreiben.

Dieses Element enthält nur globale Attribute.

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

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

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

Wenn die Medienbedingung des <source> als false bewertet wird, überspringt der Browser es und bewertet das nächste Element innerhalb des <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 Größe oder Pixeldichte des Displays anzubieten.

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

• einem Breitenbeschreiber, gefolgt von einem w (wie 300w); ODER
• einem Pixeldichtebeschreiber, gefolgt von einem x (wie 2x), um ein hochauflösendes Bild für hochauflösende Bildschirme zu bieten.

Beachten Sie, dass:

• Breiten- und Pixeldichtebeschreibungen nicht zusammen verwendet werden sollten
• ein fehlender Pixeldichtebeschreiber eine Annahme von 1x impliziert
• doppelte Beschreibungswerte nicht erlaubt sind (2x & 2x, 100w & 100w)

Das folgende Beispiel veranschaulicht die Verwendung des srcset-Attributs mit dem <source>-Element, um ein hochdichtes und ein Standard-Auflösungsbild festzulegen:

<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 am <img>-Element ohne das <picture>-Element verwendet werden. Das folgende Beispiel demonstriert, wie das srcset-Attribut verwendet wird, 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 nicht zwingend erforderlich, wenn srcset verwendet wird, aber es wird empfohlen, es zu verwenden, um dem Browser zusätzliche Informationen zu bieten, um ihm bei der Auswahl der besten Bildquelle zu helfen.

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

Bitte beachten Sie, dass sizes nur wirksam ist, wenn Breiten-Abmaße mit srcset bereitgestellt werden, anstelle von Pixeldichtewerten (z.B. 200w statt 2x). Weitere Informationen zur Verwendung von srcset finden Sie in der Responsive images Dokumentation.

Das type-Attribut spezifiziert einen MIME-Typ für die Ressourcen-URL(s) im srcset-Attribut des <source>-Elements. 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ößenänderung des Bildes innerhalb des Rahmens: object-position und object-fit
• Image file type and format guide