HTML <picture>-Tag

Das <picture>-Element ist ein Container für ein oder mehrere <source>-Elemente und ein <img>-Element, das als letztes Kindelement im Block steht.

Das <source>-Element enthält Versionen eines Bildes für verschiedene Anzeigeszenarios. Das <img>-Element beschreibt die Größe und andere Attribute des Bildes. Der Browser wertet jedes der untergeordneten <source>-Elemente aus und lädt das am besten geeignete Bild. Wird kein passendes Element gefunden, zeigt der Browser das im <img>-Tag angegebene Bild an.

Das <picture>-Element erlaubt es, mehrere Bilder anzugeben, um sich besser an verschiedene viewport-Größen anzupassen, ohne ein einzelnes Bild skalieren zu müssen. Es kann für folgende Zwecke eingesetzt werden:

um Bilder für verschiedene Medienbedingungen zuzuschneiden und anzupassen,
um alternative Bildformate anzubieten, wenn bestimmte Formate nicht unterstützt werden.

Hinweis: Die Eigenschaften object-position und object-fit gelten für das <img>-Fallback-Element und steuern dessen Größe und Ausrichtung innerhalb des Containers.

Der <picture>-Tag ist neu in HTML5.

Syntax

Der <picture>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<picture>) und schließenden (</picture>) Tag geschrieben.

HTML <picture>-Tag

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Beispiel des HTML `<picture>`-Tags:

HTML <picture>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Probier es selbst »

Der Browser wertet <source>-Elemente der Reihe nach aus und lädt das erste, dessen media-Abfrage mit dem aktuellen viewport übereinstimmt. Stimmt kein <source> überein, wird auf das <img>-Element zurückgegriffen. Das <picture>-Element wird von allen modernen Browsern weitgehend unterstützt.

Das alt-Attribut am Fallback-<img> ist obligatorisch: Welches Bild der Browser letztendlich rendert, es verwendet diesen einen alt-Text. Schreiben Sie stets eine Beschreibung des tatsächlichen Bildinhalts, kein Platzhalter wie alt="img".

Zwei Aufgaben von <picture>

<picture> löst zwei verschiedene Probleme, und die Technik wird durch das Attribut bestimmt, das Sie den <source>-Elementen geben:

Art Direction — zeigt je nach viewport einen anderen Ausschnitt oder eine andere Komposition. Auf dem Desktop ein breites Querformat, auf dem Mobilgerät ein eng zugeschnittenes Hochformat. Verwenden Sie das media-Attribut (eine CSS-Medienabfrage), um das richtige Bild auszuwählen.
Formatverhandlung — liefert dasselbe Bild in einem moderneren, kleineren Format, wenn der Browser es unterstützt (AVIF oder WebP), mit JPEG/PNG als Fallback überall sonst. Verwenden Sie das type-Attribut (ein MIME-Typ), damit der Browser nicht unterstützte Formate überspringt.

Der Browser durchläuft die <source>-Liste von oben nach unten und verwendet das erste Element, das sowohl übereinstimmt (seine media-Abfrage, falls vorhanden) als auch unterstützt wird (sein type, falls vorhanden). Die Reihenfolge ist wichtig: Stellen Sie die bevorzugte Option an den Anfang.

Formatwechsel (AVIF, dann WebP, dann JPEG)

Dies ist die häufigste praktische Anwendung von <picture>. Moderne Browser, die AVIF verstehen, laden die kleinste Datei; ältere greifen auf WebP zurück, und alle anderen erhalten das universell unterstützte JPEG. Der Browser lädt genau ein Bild.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Da die <source>-Elemente nur ein type tragen, werden alle drei jedem Browser angeboten — er wählt einfach das erste Format, das er dekodieren kann. Hier sind keine Medienabfragen beteiligt; es geht ausschließlich um das Dateiformat.

Art Direction (verschiedene Ausschnitte mit `media`)

Hier besteht das Ziel darin, zu ändern, welches Bild angezeigt wird, nicht nur sein Format. Auf Bildschirmen ab 800px Breite erhält der Browser einen breiten Banner-Ausschnitt; schmalere Bildschirme erhalten einen quadratischen Ausschnitt, der das Motiv auf dem Smartphone lesbar hält.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Verwenden Sie media, wenn sich der Inhalt des Bildes je nach Breakpoint unterscheiden soll.

Auflösungswechsel mit `srcset` und `sizes`

Wenn Sie dasselbe Bild lediglich in unterschiedlichen Pixelgrößen benötigen — ohne anderen Ausschnitt oder anderes Format — brauchen Sie <picture> in der Regel gar nicht. Ein einzelnes <img> mit srcset und sizes lässt den Browser die beste Auflösung für den Bildschirm, viewport und die Pixeldichte des Geräts wählen:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

So lesen Sie das:

srcset listet Kandidatenbilder auf, jedes mit einem Breitendeskriptor (400w bedeutet, die Datei ist 400px breit). Der Browser kennt die tatsächliche Breite jeder Datei, ohne sie herunterzuladen.
sizes teilt dem Browser mit, wie breit das Bild dargestellt wird. Hier steht: "Unterhalb eines 600px-viewport füllt das Bild die gesamte Breite (100vw); ansonsten nimmt es die Hälfte ein (50vw)." Der Browser kombiniert dies mit dem Gerätepixelverhältnis, um den sparsamsten Kandidaten aus srcset zu wählen.
src bleibt als Fallback für Browser, die srcset ignorieren.

srcset mit Breitendeskriptoren funktioniert auch innerhalb eines <source>-Elements, sodass Sie Auflösungswechsel mit Art Direction oder Formatwechsel kombinieren können.

Wann benötigen Sie `<picture>` wirklich?

Ziel	Verwenden
Gleiches Bild, Browser wählt die beste Auflösung für den Bildschirm	`<img srcset>` + `sizes`
Gleiches Bild in einem kleineren modernen Format (AVIF/WebP) mit Fallback	`<picture>` + `type`
Einen anderen Ausschnitt/eine andere Komposition je Breakpoint (Art Direction)	`<picture>` + `media`

Faustregel: Greifen Sie nur dann auf <picture> zurück, wenn Sie kontrollieren müssen, welche Datei der Browser verwendet (Format oder Ausschnitt). Für einfaches „die richtige Größe liefern" ist <img srcset> einfacher und ausreichend.

Attribute

Diese Attribute gelten für die <source>-Elemente innerhalb von <picture>:

Attribut	Wert	Beschreibung
media	media_query	Gibt eine Medienabfrage zur Übereinstimmung mit der viewport-Größe an.
srcset	URL	Gibt die URL des Bildes für verschiedene Situationen an.
sizes	length	Gibt die Breite des Bildes für verschiedene viewport-Größen an.
type	MIME_type	Gibt den MIME-Typ der verknüpften Ressource an (z. B. `image/webp`).
src	URL	Gibt die URL des Bildes an. Wird als Alternative zu `srcset` verwendet.

Jedes <source>-Element muss entweder ein srcset- oder ein src-Attribut enthalten. Das Fallback-<img>-Element verwendet das src-Attribut.

Der <picture>-Tag unterstützt die globalen Attribute.

Übung

Was macht das HTML-picture-Element?

Es bettet Audioinhalt in ein Dokument ein.Es definiert einen Container für mehrere Quellkandidaten und ein Fallback-Bild, sodass der Browser das am besten geeignete Bild für das Gerät, die Bildschirmgröße oder das unterstützte Format laden kann.Es funktioniert nur für Vektorgrafiken wie SVG.Es erstellt automatisch einen Hyperlink um ein Bild.

Syntax

Beispiel des HTML <picture>-Tags: