<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 die srcset-, media- und type-Attribute jedes <source>-Elements, um ein kompatibles Bild auszuwählen, das am besten zu dem 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 Präsentation.
2. Es bietet eine Ausweichlösung, falls keines der angebotenen <source>-Elemente ein brauchbares Bild liefern kann.

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

• Art direction. Zuschneiden oder Modifizieren 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 der unterstützten Bildformate finden Sie in: Leitfaden zu Bilddateitypen und -formaten.

• Sparen von Bandbreite und Beschleunigen der Seitenladezeiten, indem das am besten geeignete Bild für das Display des Betrachters geladen wird.

Wenn Sie hochauflösende Versionen eines Bildes für hoch-DPI- (Retina-)Displays bereitstellen, verwenden Sie srcset im <img>-Element stattdessen. So können Browser in daten-sparenden Modi niedrigere Auflösungen wählen, und Sie müssen keine expliziten medienbasierten 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 zeigen, wie unterschiedliche Attribute des <source>-Elements die Auswahl des Bildes innerhalb <picture> ändern.

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

Wenn die Medienbedingung des <source> als false ausgewertet wird, überspringt der Browser dieses Element 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 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 hoch-DPI-Bildschirme bereitzustellen.

Beachten Sie dabei:

• Breiten- und Pixeldichte-Deskriptoren sollten nicht zusammen verwendet werden
• Ein fehlender Pixeldichte-Deskriptor impliziert 1x
• Doppelte Deskriptorwerte sind nicht erlaubt (2x & 2x, 100w & 100w)

Das folgende Beispiel zeigt die Verwendung des srcset-Attributs mit dem <source>-Element, um ein hochauflösendes und ein Standard-Auflö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 ohne das <picture>-Element verwendet werden. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet wird, um Bilder mit 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, es wird jedoch empfohlen, es zu nutzen, um dem Browser zusätzliche Informationen bereitzustellen, 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 passt möglicherweise nicht 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 Auswirkungen hat, wenn Breiten-Deskriptoren mit srcset bereitgestellt werden, anstatt Pixeldichtewerte (200w anstelle von 2x zum Beispiel). Weitere Informationen zur Verwendung von srcset finden Sie in der Anleitung zu responsiven Bildern.

Das type-Attribut gibt einen MIME-Typ für die Ressourcen-URL(s) im srcset-Attribut des <source>-Elements an. 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 seines Rahmens: object-position und object-fit
• Leitfaden zu Bilddateitypen und -formaten