<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 <source>-Element anhand der Attribute srcset, media und type, 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 ein Fallback, falls keines der angebotenen <source>-Elemente ein verwendbares Bild bereitstellen kann.

Gängige Anwendungsfälle für <picture>:

• Art Direction. Zuschneiden oder Ändern von Bildern für verschiedene media-Bedingungen (z. B. das Laden einer einfacheren Version eines Bildes mit zu vielen Details auf kleineren Bildschirmen).

• 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 jedoch nicht vom Browser unterstützt werden. Eine Liste der unterstützten Bildformate finden Sie im Leitfaden zu Bilddateitypen und -formaten.

• Bandbreite sparen und Ladezeiten der Seite beschleunigen, indem das passendste Bild für die Anzeige des Betrachters geladen wird.

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

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

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

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

Wenn die Medienbedingung des <source>-Elements zu 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 kommagetrennten Liste von Bildbeschreibungen. Jede Bildbeschreibung besteht aus einer URL des Bildes und entweder:

• einem Breitenbeschreibung, gefolgt von einem w (wie 300w); ODER
• einem Pixeldichtebeschreibung, gefolgt von einem x (wie 2x) um ein hochauflösendes Bild für hochauflösende Bildschirme zu dienen.

Beachten Sie Folgendes:

• Breiten- und Pixeldichtebeschreibungen sollten nicht zusammen verwendet werden
• Eine fehlende Pixeldichtebeschreibung impliziert 1x
• Doppelte Beschreibungswerte sind nicht erlaubt (2x & 2x, 100w & 100w)

Das folgende Beispiel zeigt die Verwendung des srcset-Attributs mit dem <source>-Element, um ein hochdichtes 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 verwendet werden, ohne das <picture>-Element zu benötigen. Das folgende Beispiel zeigt, wie das srcset-Attribut verwendet wird, um Standardauflösungs- und hochdichte 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 ist nicht zwingend erforderlich, wenn Sie srcset verwenden, aber es wird empfohlen, es zu verwenden, um dem Browser zusätzliche Informationen zu geben, die ihm helfen, die beste Bildquelle auszuwählen.

Ohne Größen verwendet der Browser die Standardgröße des Bildes, wie durch seine Abmessungen in Pixeln angegeben. Dies ist möglicherweise nicht der beste Fit 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 ihre Wirkung entfalten, wenn Breitenmaßbeschreibungen mit srcset anstelle von Pixelverhältnissen angegeben werden (200w statt 2x zum Beispiel). Weitere Informationen zur Verwendung von srcset finden Sie in der Dokumentation 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