<picture>: Das Picture-Element

Probieren Sie es aus

<!--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, prüft der User-Agent die srcset-, media- und 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 dessen Präsentation.
2. Es bietet eine Fallback-Option, falls keines der angebotenen <source>-Elemente ein verwendbares Bild bereitstellen kann.

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

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

• 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 für Bilddateitypen und -formate.

• Bandbreite sparen und Seitenladezeiten beschleunigen durch das Laden des geeignetsten Bildes für das Anzeigegerät des Betrachters.

Wenn Sie hochauflösende Versionen eines Bildes für hochauflösende (Retina) Displays bereitstellen, verwenden Sie srcset im <img>-Element. Dies ermöglicht es Browsern, in datensparenden Modi niedrigauflösende Versionen zu wählen, und Sie müssen keine expliziten media-Bedingungen schreiben.

Attribute

Dieses Element enthält nur globale Attribute.

Verwendungshinweise

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 innerhalb des Rahmens skaliert wird.

Beispiele

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

Das media-Attribut

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

Wenn die Medienbedingung des <source> auf 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="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

Sie können Bildressourcen für helle und dunkle Designs mit der prefers-color-scheme-Medienfunktion austauschen:

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="logo-light.png" media="(prefers-color-scheme: light)" />
  <img src="logo-light.png" alt="Product logo" />
</picture>

Das srcset-Attribut

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 Bild-URL 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 hochauflösende Bildschirme bereitzustellen.

Beachten Sie, dass:

• Breiten- und Pixeldichtebeschreiber nicht zusammen verwendet werden sollten
• ein fehlender Pixeldichtebeschreiber 1x impliziert
• doppelte Beschreibungswerte nicht erlaubt 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ösendes Bild 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 am <img>-Element verwendet werden. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet wird, um standard- 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

Das sizes-Attribut des <source>-Elements ermöglicht es Ihnen, ein Set von Paaren aus Medienbedingungen und Längen anzugeben und die Anzeigengröße des Bildes für jede Bedingung zu bestimmen. Dies hilft dem Browser, das geeignetste Bild aus dem srcset-Attribut auszuwählen, das Bilder mit ihren intrinsischen Breiten auflistet.

Der Browser bewertet die Medienbedingungen im sizes-Attribut, bevor er irgendwelche Bilder lädt. Weitere Informationen finden Sie im sizes-Attribut der <img> und <source>-Elemente.

Beispielsweise:

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="Example image" />
</picture>

In diesem Beispiel:

• Wenn das Ansichtsfenster 600px breit oder schmaler ist, beträgt die Slot-Größe 400px; andernfalls 800px.
• Der Browser multipliziert die Slot-Größe mit dem Gerätepixelverhältnis, um die ideale Bildbreite zu ermitteln und wählt dann das am nächsten verfügbare Bild aus srcset.

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

Bitte beachten Sie, dass sizes nur dann Auswirkungen hat, wenn mit srcset Breitenbeschreibungswerte anstelle von Pixeldichtewerten bereitgestellt werden (200w anstelle von 2x zum Beispiel). Weitere Informationen zur Verwendung von srcset finden Sie in der Responsive Images-Dokumentation.

Das type-Attribut

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>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <img>-Element
• <source>-Element
• Positionierung und Größenanpassung des Bildes im Rahmen: object-position und object-fit
• Leitfaden für Bilddateitypen und -formate
• prefers-color-scheme Medienfunktion