HTMLWiki.de: picture
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Das picture-Element: Das passende Bild für jede Lage

vom von

Ein Bild für alle ist nicht immer die beste Idee. Das Panorama das auf dem Monitor großartig aussieht, ist auf dem Handy ein unlesbarer Streifen. Und das moderne AVIF-Format spart ordentlich Datenvolumen, wird aber nicht von jedem alten Browser verstanden. Für genau solche Fälle gibt es <picture>: Du bietest mehrere Varianten an und der Browser nimmt die erste die passt.

Syntax und Beispiel

HTML-Code: modernes Format mit Rückfallebene

<picture>
    <source srcset="diskette.avif" type="image/avif">
    <source srcset="diskette.webp" type="image/webp">
    <img src="diskette.png" alt="Pixelgrafik einer blauen Diskette"
         width="120" height="120">
</picture>
Ergebnis (hier greift die PNG-Rückfallebene)
Pixelgrafik einer blauen Diskette

Der Browser geht die <source>-Einträge von oben nach unten durch. Kann er AVIF, nimmt er AVIF. Kann er es nicht, probiert er WebP, und als letzte Rettung greift immer das normale <img> am Ende. Das ist der wichtigste Punkt am ganzen Element: das img innen ist Pflicht. Es liefert die Rückfallebene und trägt das alt-Attribut für alle Variantn.

Variante zwei: verschiedene Bildausschnitte

HTML-Code: anderes Motiv für schmale Bildschirme

<picture>
    <source srcset="buero-breit.webp" media="(min-width: 800px)">
    <img src="buero-ausschnitt.webp" alt="Schreibtisch mit Röhrenmonitor"
         width="400" height="400">
</picture>

Mit dem media-Attribut knüpfst du eine Variante an eine Bedingung, hier die Fensterbreite. Breite Bildschirme bekommen das Panorama, schmale einen sinnvollen Auschnitt. Das nennt sich Art Direction und ist der zweite große Einsatzzweck von picture. Die Bedingungen funktionieren wie Media Queries in CSS.

Wann reicht img mit srcset?

Wenn es nur um dasselbe Motiv in verschiedenen Auflösungen geht, genügt oft das schlankere srcset-Attribut direkt am img-Element. picture brauchst du, wenn Format oder Bildausschnitt wechseln sollen. Faustregel: gleiche Datei in mehreren Größen = srcset, unterschiedliche Dateien = picture.

Typische Fehler

  • Das innere img weglassen. Dann zeigen manche Browser gar nichts und niemand hat einen Alternativtext.
  • Das alt an ein source hängen. Es gehört ans img, source-Elemente kennen kein alt.
  • Es übertreiben. Fünf Formate mal vier Größen will auch gepflegt werden. Meist reichen zwei Formate plus Rückfallebene völlig.

Verwandt: img · figure · Responsive Design