Das<picture>-ElementHTML enthält null oder mehr<source>-Elemente und ein<img>-Element, um alternative Versionen eines Bildes für unterschiedliche Anzeige-/Geräteszenarien anzubieten.

Der Browser wird jedes untergeordnete<source>-Element betrachten und die beste Übereinstimmung unter ihnen auswählen. Wenn keine Übereinstimmungen gefunden werden – oder der Browser das<picture>-Element nicht unterstützt –, wird die URL dessrc-Attributs des<img>-Elements ausgewählt. Das ausgewählte Bild wird dann in dem Bereich präsentiert, der vom<img>-Element eingenommen wird.

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 derUser-Agent diesrcset-,media- undtype-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 unterschiedlichemedia-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 wieAVIF oderWEBP 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 Siesrcset im<img>-Element. Dies ermöglicht es Browsern, in datensparenden Modi niedrigauflösende Versionen zu wählen, und Sie müssen keine explizitenmedia-Bedingungen schreiben.

Attribute

Dieses Element enthält nurglobale Attribute.

Verwendungshinweise

Sie können die Eigenschaftobject-position verwenden, um die Positionierung des Bildes innerhalb des Rahmens des Elements anzupassen, und die Eigenschaftobject-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

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

Wenn die Medienbedingung des<source> auffalse 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 derprefers-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

Dassrcset-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 undentweder:

• einemBreitenbeschreiber, gefolgt von einemw (wie300w);ODER
• einemPixeldichtebeschreiber, gefolgt von einemx (wie2x), 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 dessrcset-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>

Dassrcset-Attribut kann auch ohne das<picture>-Element am<img>-Element verwendet werden. Das folgende Beispiel zeigt, wie dassrcset-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

Dassizes-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 demsrcset-Attribut auszuwählen, das Bilder mit ihrenintrinsischen 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 aussrcset.

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 vonsrcset finden Sie in derResponsive Images-Dokumentation.

Das type-Attribut

Dastype-Attribut spezifiziert einenMIME-Typ für die Ressourcen-URL(s) imsrcset-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 undobject-fit
• Leitfaden für Bilddateitypen und -formate
• prefers-color-scheme Medienfunktion