<picture>: Das Picture-Element

Um zu entscheiden, welche URL geladen werden soll, überprüft der User-Agent die Attribute srcset, media und type 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 Attribute des Bildes und dessen Darstellung.
2. Es bietet eine Fallback-Option, falls keines der angebotenen <source>-Elemente ein nutzbares Bild liefert.

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

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

• 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, werden aber möglicherweise vom Browser nicht unterstützt. Eine Liste der unterstützten Bildformate finden Sie unter: Leitfaden zu Bilddateitypen und -formaten.

• Sparen von Bandbreite und Beschleunigung der Ladezeiten von Seiten durch das Laden des am besten geeigneten Bildes für das Display des Betrachters.

Wenn Sie höher aufgelöste Versionen eines Bildes für hochauflösende (Retina-)Displays bereitstellen, verwenden Sie srcset auf dem <img>-Element. Dies ermöglicht es Browsern, in datensparenden Modi auf niedrigere Auflösungen zurückzugreifen, ohne dass explizite media-Bedingungen erstellt werden müssen.

Dieses Element umfasst 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 in den Rahmen eingepasst wird.

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

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 bewertet 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 durch Kommas getrennten Liste von Bildbeschreibungen. Jede Bildbeschreibung besteht aus einer URL des Bildes und entweder:

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

Beachten Sie, dass:

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

Das folgende Beispiel illustriert die Verwendung des srcset-Attributs mit dem <source>-Element, um ein hochauflösendes und ein Standardauflösungsbild zu spezifizieren:

<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 verwendet werden, ohne dass das <picture>-Element erforderlich ist. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet werden kann, um Standardauflösungs- und hochauflösende Bilder zu spezifizieren:

<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 obligatorisch, wenn srcset verwendet wird, aber es wird empfohlen, es zu verwenden, um zusätzliche Informationen für den Browser bereitzustellen, die ihm helfen, die beste Bildquelle auszuwählen.

Ohne sizes verwendet der Browser die Standardgröße des Bildes entsprechend seiner Pixelabmessungen. 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 sizes nur dann Wirkung hat, wenn statt Pixelverhältniswerten Breitenbeschreibungen mit srcset bereitgestellt werden (zum Beispiel 200w anstelle von 2x). Für weitere Informationen zur Verwendung von srcset siehe die Anleitung zu responsiven Bildern.

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ößenanpassung des Bildes innerhalb seines Rahmens: object-position und object-fit
• Leitfaden zu Bilddateitypen und -formaten