<picture>

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.

Steckbrief <picture>

Kategorie: Links & Medien
Art: Inline
Beispiele: 4
Browser: 5 von 5
E-Mail: 1 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

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

Beispiele

4 Beispiele

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.

index.html

Format-Fallback

<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 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.

index.html

Art Direction

<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>

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.

index.html

Dark Mode Bilder

<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>

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

4 Fehler

01 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.

02 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.

03 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.

04 <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

5 von 5

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.

Chrome

Komplett

Seit Chrome 38
Firefox

Komplett

Seit Firefox 38
Safari

Komplett

Seit Safari 9.1
Edge

Komplett

Seit Edge 13
Opera

Komplett

Email-Kompatibilität

1 von 5

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.

Apple Mail

Komplett

picture und source werden korrekt verarbeitet.
Gmail

Keine

Gmail entfernt picture und source. Das enthaltene img wird angezeigt, wenn es ein src-Attribut hat.
Outlook

Keine

Outlook unterstützt picture nicht. Verwende einfache img-Tags für E-Mails.
Thunderbird

Teilweise

Grundlegende Unterstützung vorhanden, aber nicht alle source-Attribute werden berücksichtigt.
Yahoo Mail

Keine

picture wird entfernt. Das img-Fallback wird angezeigt.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<picture>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter