<picture>: Das Picture-Element

Um zu entscheiden, welche URL geladen werden soll, untersucht der user agent die [srcset](/de/docs/Web/HTML/Element/source#srcset), [media](/de/docs/Web/HTML/Element/source#media), und [type](/de/docs/Web/HTML/Element/source#type)-Attribute jedes <source>-Elements, 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 Attribute des Bildes und seiner Darstellung.
2. Es bietet eine Fallback-Möglichkeit, falls keines der angebotenen <source>-Elemente ein verwendbares Bild bereitstellen kann.

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

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

• 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, könnten aber vom Browser nicht unterstützt werden. Eine Liste unterstützter Bildformate finden Sie in: Leitfaden für Bilddateitypen und -formate.

• Bandbreite sparen und Ladezeiten der Seite verkürzen, indem das geeignetste Bild für das Display des Betrachters geladen wird.

Wenn Sie höher aufgelöste Versionen eines Bildes für hochauflösende (Retina) Displays bereitstellen, verwenden Sie das srcset Attribut auf dem <img>-Element. Dies ermöglicht es Browsern, sich für niedriger auflösende Versionen in datenreduzierenden Modi zu entscheiden, ohne dass Sie explizite media-Bedingungen schreiben müssen.

Dieses Element umfasst nur globale Attribute.

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

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

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

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

<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 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 Breitendeskriptor, gefolgt von einem w (wie 300w); ODER
• einem Pixeldichtedeskriptor, gefolgt von einem x (wie 2x), um ein hochauflösendes Bild für hochauflösende Bildschirme bereitzustellen.

Stellen Sie sicher, dass:

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

Das folgende Beispiel veranschaulicht die Verwendung des srcset-Attributs mit dem <source>-Element, um ein hochauflösendes und ein Standardauflösungsbild 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 ohne das <picture>-Element auf dem <img>-Element verwendet werden. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet wird, um Standardauflösungs- 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 beim Verwenden von srcset nicht obligatorisch, aber es wird empfohlen, es zu verwenden, um dem Browser zusätzliche Informationen zur Auswahl der besten Bildquelle zu geben.

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

Bitte beachten Sie, dass Größen nur dann eine Wirkung haben, wenn Breitenmaße mit srcset angegeben werden, anstatt Pixeldichtewerte (z.B. 200w statt 2x). Weitere Informationen zur Verwendung von srcset finden Sie in der Dokumentation zu responsiven Bildern.

Das type-Attribut spezifiziert einen MIME-Typ für die Ressource(n) 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
• Leitfaden für Bilddateitypen und -formate