<picture>

Zuletzt aktualisiert am 4. Februar 2026

Das <picture>-Element gibt dir die volle Kontrolle darüber, welches Bild der Browser in welcher Situation lädt. Du kannst moderne Formate wie AVIF und WebP mit einem JPEG-Fallback kombinieren, verschiedene Bilder für verschiedene Bildschirmgrößen liefern oder sogar unterschiedliche Motive für Desktop und Mobil bereitstellen. Der Browser entscheidet automatisch, welche <source> am besten passt.

Grundlagen

<picture> ist ein Container, der selbst nichts anzeigt. Die eigentliche Arbeit machen die <source>-Kind-Elemente und das <img>-Fallback. Stell es dir wie einen Entscheidungsbaum vor: Der Browser geht die <source>-Elemente von oben nach unten durch, prüft die Bedingungen (Format, Viewport, Pixeldichte) und nimmt das erste, das passt. Wenn keine <source> matcht, greift das <img>.

• <picture> ist ein Container ohne eigene Darstellung: Es hat keine eigenen visuellen Attribute
• Es enthält beliebig viele <source>-Elemente und genau ein <img> als letztes Kind
• Das <img>-Element ist Pflicht: Ohne es wird nichts angezeigt
• Der Browser prüft die <source>-Elemente von oben nach unten und wählt die erste passende
• Alle Attribute wie alt, width, height, class und style stehen auf dem <img>, nicht auf <picture>
• <picture> hat keine eigenen Attribute außer den globalen: Die Magie steckt in den <source>-Kindern

Syntax

<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg"
       alt="Beschreibung des Bildes">
</picture>

Beispiele

Format-Fallback: AVIF, WebP, JPEG

Der wichtigste Anwendungsfall: Moderne Bildformate anbieten und für ältere Browser einen Fallback bereithalten. AVIF bietet die beste Kompression, WebP ist breiter unterstützt, JPEG funktioniert überall.

<picture>
  <!-- Bestes Format zuerst -->
  <source srcset="produkt.avif"
          type="image/avif">
  <!-- Guter Kompromiss -->
  <source srcset="produkt.webp"
          type="image/webp">
  <!-- Universelles Fallback -->
  <img src="produkt.jpg"
       alt="Produktfoto">
</picture>

Art Direction: Verschiedene Bilder pro Viewport

Art Direction bedeutet: Du zeigst je nach Bildschirmgröße ein anderes Motiv, nicht nur eine andere Auflösung. Auf dem Smartphone ein quadratisches Close-up, auf dem Desktop ein breites Panorama. Dafür nutzt du das media-Attribut auf den <source>-Elementen.

<picture>
  <!-- Desktop: breites Panorama -->
  <source srcset="berg-desktop.jpg"
          media="(min-width: 800px)">
  <!-- Mobil: quadratisches Close-up -->
  <source srcset="berg-mobil.jpg"
          media="(max-width: 799px)">
  <!-- Fallback -->
  <img src="berg-fallback.jpg"
       alt="Berglandschaft">
</picture>

Dark Mode: Unterschiedliche Bilder

Mit prefers-color-scheme im media-Attribut kannst du verschiedene Bilder für helle und dunkle Systemeinstellungen liefern. Ideal für Logos, Diagramme oder Screenshots.

<picture>
  <!-- Dark Mode -->
  <source srcset="logo-dark.svg"
          media="(prefers-color-scheme: dark)">
  <!-- Light Mode -->
  <source srcset="logo-light.svg"
          media="(prefers-color-scheme: light)">
  <!-- Fallback -->
  <img src="logo-default.svg" alt="Firmenlogo">
</picture>

Kombination: Format + Viewport

In der Praxis kombinierst du oft Format-Fallbacks mit Art Direction. Das ergibt mehr <source>-Elemente, gibt dir aber die maximale Kontrolle.

<picture>
  <!-- Desktop + AVIF -->
  <source srcset="hero-desktop.avif"
          media="(min-width: 800px)"
          type="image/avif">
  <!-- Desktop + WebP -->
  <source srcset="hero-desktop.webp"
          media="(min-width: 800px)"
          type="image/webp">
  <!-- Mobil + AVIF -->
  <source srcset="hero-mobil.avif"
          media="(max-width: 799px)"
          type="image/avif">
  <!-- Mobil + WebP -->
  <source srcset="hero-mobil.webp"
          media="(max-width: 799px)"
          type="image/webp">
  <!-- Universelles Fallback -->
  <img src="hero-fallback.jpg"
       alt="Hero-Bild der Startseite">
</picture>

Barrierefreiheit

Das <picture>-Element selbst ist für Screenreader unsichtbar: Es ist nur ein Container. Die Barrierefreiheit hängt vollständig vom <img>-Kind ab. Deshalb gelten die gleichen Regeln wie für ein normales <img>:

• Das alt-Attribut muss auf dem <img>-Element stehen, nicht auf <picture> oder <source>
• Alle Bildvarianten (verschiedene Formate, Viewports, Dark Mode) sollten denselben Inhalt zeigen: Das alt muss für alle passen
• Bei Art Direction mit deutlich unterschiedlichen Motiven (z.B. Close-up vs. Panorama) wähle ein alt, das den gemeinsamen Inhalt beschreibt

Häufige Fehler

Fehlendes <img>-Fallback: <picture> ohne <img> zeigt nichts an. Das <img> ist nicht optional: Es ist das Element, das der Browser tatsächlich rendert. Die <source>-Elemente beeinflussen nur, welche Datei geladen wird.

Attribute auf <picture> statt auf <img>: alt, width, height, class, style: All diese Attribute gehören auf das <img>, nicht auf <picture>. <picture> ist nur ein Container und hat keine eigenen visuellen Attribute.

Falsche <source>-Reihenfolge: Der Browser nimmt die erste passende <source>. Wenn du JPEG vor AVIF stellst, wird der Browser immer JPEG nehmen. Stelle das spezifischste oder beste Format immer zuerst: AVIF → WebP → JPEG.

<picture> statt srcset verwenden: Wenn du nur verschiedene Auflösungen desselben Bildes brauchst (keine Art Direction, kein Format-Wechsel), ist srcset auf einem einfachen <img> die bessere Lösung. <picture> ist für den Fall gedacht, dass du dem Browser unterschiedliche Dateien unter verschiedenen Bedingungen liefern willst.

Browser-Kompatibilität

Das picture-Element wird von allen modernen Browsern vollständig unterstützt. In älteren Browsern ohne picture-Support wird automatisch das enthaltene img-Element verwendet.

Email-Kompatibilität

Die Unterstützung von picture in Email-Clients ist sehr eingeschränkt. Die meisten Clients ignorieren picture und source komplett. Das enthaltene img-Element wird aber in der Regel angezeigt.

Verwandte Elemente