<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 User-Agent jedes srcset-, media- und type-Attribut des <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 dessen Darstellung.
2. Es bietet einen Fallback, 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 verschiedene media-Bedingungen (z. B. Laden einer vereinfachten Version eines Bildes, das zu viele Details hat, 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, sind jedoch möglicherweise nicht vom Browser unterstützt. Eine Liste der unterstützten Bildformate finden Sie im: Image file type and format guide.

• Bandbreite sparen und Ladezeiten verkürzen, indem das für die Anzeige des Betrachters am besten geeignete Bild geladen wird.

Wenn Sie höher dichte Versionen eines Bildes für hochauflösende (Retina) Displays bereitstellen, verwenden Sie srcset auf dem <img>-Element stattdessen. Dies ermöglicht es Browsern, in datenparausamen Modi zu niedrigeren Dichten zu wechseln, 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 verwenden, um zu steuern, wie das Bild auf die Größe des Rahmens skaliert wird.

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

Das media-Attribut gibt eine Medienbedingung an (ähnlich wie eine 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 <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 Breiten-Deskriptor, gefolgt von einem w (wie 300w); ODER
• einem Pixeldichte-Deskriptor, gefolgt von einem x (wie 2x), um ein hochauflösendes Bild für hochauflösende Bildschirme bereitzustellen.

Bitte beachten Sie, dass:

• Breiten- und Pixeldichte-Deskriptoren nicht zusammen verwendet werden sollten
• ein fehlender Pixeldichte-Deskriptor 1x impliziert
• doppelte Deskriptorwerte 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 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 wird, um Standardauflösungs- und hochdichte Bilder bereitzustellen:

<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, es wird jedoch empfohlen, es zu verwenden, um dem Browser zusätzliche Informationen zu geben, die ihm bei der Auswahl der besten Bildquelle helfen.

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 unterschiedlichen Kontexten angezeigt wird.

Bitte beachten Sie, dass Größen nur dann ihren Effekt haben, wenn Breitenmaß-Deskriptoren mit srcset bereitgestellt werden anstelle von Pixelverhältnis-Werten (z. B. 200w statt 2x). Weitere Informationen zur Verwendung von srcset finden Sie in der Responsive images Dokumentation.

Das type-Attribut gibt einen MIME-Typ für die Ressourcen-URL(s) im srcset-Attribut des <source>-Elements an. Falls 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 des Rahmens: object-position und object-fit
• Image file type and format guide