<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 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 seiner Präsentation.
2. Es bietet eine Fallback-Lösung, falls keines der angebotenen <source>-Elemente ein verwendbares Bild liefern kann.

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

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

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

• Sparen von Bandbreite und Beschleunigung der Seitenladezeiten durch das Laden des am besten geeigneten Bildes für das Anzeigegerät des Betrachters.

Wenn Sie höherauflösende Versionen eines Bildes für High-DPI- (Retina-)Displays bereitstellen, verwenden Sie srcset auf dem <img>-Element statt. Dadurch können Browser in Datensparmodi geringere Auflösungen auswählen, und Sie müssen keine expliziten media-Bedingungen schreiben.

Attribute

Dieses Element enthält nur globale Attribute.

Nutzungshinweise

Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des Rahmens anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie das Bild innerhalb des Rahmens in der Größe angepasst wird.

Beispiele

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

Das media-Attribut

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

Wenn die Medienbedingung des <source>-Elements zu false ausgewertet wird, überspringt der Browser es und wertet das nächste Element innerhalb von <picture> aus.

<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 Themen mit der prefers-color-scheme-Medieneigenschaft 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 der Größe oder der Pixeldichte des Anzeigegeräts 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 High-DPI-Bildschirme bereitzustellen.

Beachten Sie, dass:

• Breiten- und Pixeldichtebeschreiber nicht zusammen verwendet werden sollten
• ein fehlender Pixeldichtebeschreiber bedeutet 1x
• 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ö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 Standardauflösungs- 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, eine Menge von Medienbedingung-Längen-Paaren anzugeben und die Bildanzeigegröße für jede Bedingung zu kennzeichnen. Dies hilft dem Browser, das am besten geeignete Bild aus dem srcset-Attribut auszuwählen, das Bilder mit ihren intrinsischen Breiten auflistet.

Der Browser wertet die Medienbedingungen im sizes-Attribut aus, bevor er Bilder herunterlädt. Informieren Sie sich über das sizes-Attribut der <img>- und <source>-Elemente für weitere Informationen.

Zum Beispiel:

<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 der Viewport 600px breit oder weniger ist, beträgt die Slot-Größe 400px; andernfalls beträgt sie 800px.
• Der Browser multipliziert die Slot-Größe mit dem Pixeldichteverhältnis des Geräts, um die ideale Bildbreite zu bestimmen, und wählt dann das am nächsten verfügbare Bild aus srcset aus.

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

Bitte beachten Sie, dass sizes nur dann seine Wirkung hat, wenn Breitenbeschreiberdimensionen anstelle von Pixeldichtewerten mit srcset angegeben 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 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>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <img>-Element
• <source>-Element
• Positionierung und Größenanpassung des Bildes innerhalb seines Rahmens: object-position und object-fit
• Leitfaden für Bilddateitypen und -formate
• CSS prefers-color-scheme Medieneigenschaft