<picture>: Das Picture-Element

Um zu entscheiden, welche URL geladen werden soll, prüft der Benutzeragent die srcset-, media- und type-Attribute der einzelnen <source>-Elemente, um ein kompatibles Bild auszuwählen, das am besten zum aktuellen Layout und zu 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 Rückfallebene, falls keines der angebotenen <source>-Elemente ein verwendbares Bild bereitstellen kann.

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

• Art Direction. Zuschneiden oder Ändern von Bildern für unterschiedliche media-Bedingungen (zum Beispiel das Laden einer einfacheren Version eines Bildes mit zu vielen Details auf kleineren Bildschirmen).

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

  Hinweis: Beispielsweise haben neuere Formate wie AVIF oder WEBP viele Vorteile, könnten jedoch vom Browser nicht unterstützt werden. Eine Liste der unterstützten Bildformate finden Sie im Leitfaden zu Bilddateityp und -format.

• Bandbreite sparen und Ladezeiten der Seite beschleunigen, indem das für das Anzeigegerät des Betrachters am besten geeignete Bild geladen wird.

Wenn Sie höherauflösende Versionen eines Bildes für hochauflösende (Retina-)Bildschirme bereitstellen, verwenden Sie srcset im <img>-Element. Dadurch können Browser in Datensparmodi niedrigauflösende Versionen verwenden, und Sie müssen keine expliziten media-Bedingungen schreiben.

Dieses Element beinhaltet 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 zeigen, wie unterschiedliche Attribute des <source>-Elements die Auswahl des Bildes innerhalb von <picture> verändern.

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

Wenn die Medienbedingung des <source>-Elements auf false evaluiert, ü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 der Größe oder der 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 Bildschirme mit hoher DPI zu bedienen.

Beachten Sie:

• Breiten- und Pixeldichtebeschreiber sollten nicht zusammen verwendet werden
• Ein fehlender Pixeldichtebeschreiber impliziert 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 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 auf dem <img>-Element ohne das <picture>-Element verwendet werden. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet wird, um Bilder in Standardauflösung und hoher Dichte 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 geben, die ihm helfen, die beste Bildquelle auszuwählen.

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

Bitte beachten Sie, dass sizes nur dann wirksam wird, wenn Breitenbeschreibungen mit srcset angegeben werden, anstelle von Pixeldichtewerten (zum Beispiel 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 Ressourcen-URL(s) im srcset-Attribut des <source>-Elements. 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 im Rahmen: object-position und object-fit
• Leitfaden zu Bilddateityp und -format