Image & Picture-Element

HTML bietet mehrere Techniken, um Bilder responsiv auszuliefern: dieselbe Datei in verschiedenen Grössen, komplett unterschiedliche Bildmotive je nach Bildschirmgrösse, oder dasselbe Motiv in mehreren Dateiformaten.

<srcset> und <sizes> im <img>

Der häufigste Fall überhaupt: Für viele Webseiten genügt ein einzelnes <img>-Element mit srcset und sizes – ganz ohne <picture>. Dabei bleibt der Bildinhalt identisch, es werden lediglich unterschiedlich grosse Versionen derselben Datei angeboten. Der Browser wählt automatisch die passende Variante aus und spart dadurch Datenmenge und Ladezeit.

<img
    src="berge.jpg"
    srcset="berge-800.jpg 800w,
            berge-1200.jpg 1200w"
    sizes="(min-width: 900px) 900px, 100vw"
    width="1200"
    height="800"
    alt="Berglandschaft">
  • srcsetListe möglicher Bilddateien, jeweils mit ihrer tatsächlichen Breite (800w = 800 Pixel breit)
  • sizesWie breit das Bild im Layout voraussichtlich dargestellt wird, abhängig vom Viewport

sizes besteht aus einer Liste von Bedingung + Grösse-Paaren, getrennt durch Kommas. Im Beispiel oben bedeuten die beiden 900px nicht dasselbe:

sizes="(min-width: 900px) 900px, 100vw"
        \______________/ \____/  \___/
          Bedingung       Grösse  Fallback
        (Breakpoint)    (falls Be-
                        dingung zutrifft)

Das erste 900px ist die Bedingung ("ist der Viewport mindestens 900px breit?"), das zweite 900px ist die tatsächliche Darstellungsbreite, falls diese Bedingung zutrifft. Beide Werte sind hier zufällig gleich – sie könnten genauso gut unterschiedlich sein, z. B. (min-width: 900px) 300px, wenn das Bild ab dieser Breite nur noch in einer schmalen Spalte Platz hat. 100vw am Schluss ist der Fallback ohne Bedingung.

sizes="auto" – Bleeding Edge

Das manuelle Berechnen von sizes ist oft der mühsamste Teil. Mit loading="lazy" kombiniert, kann der Browser die passende Grösse inzwischen selbst herausfinden: Ein lazy geladenes Bild wird erst angefragt, nachdem der Browser das Layout bereits berechnet hat – die tatsächliche Darstellungsgrösse ist also längst bekannt.

<img loading="lazy" src="berge.jpg"
    srcset="berge-650.jpg 650w,
            berge-960.jpg 960w,
            berge-1400.jpg 1400w"
    sizes="auto, (min-width: 1040px) 650px, 94vw"
    alt="Berglandschaft">

auto steht als erster Wert in sizes, die restlichen Werte danach bleiben als Fallback für Browser, die auto noch nicht kennen – abwärtskompatibel. Einschränkung: Funktioniert nur mit loading="lazy". Bei eager geladenen Bildern (z. B. ein Hero-Bild direkt im sichtbaren Bereich) kennt der Browser die Layoutgrösse zum Anfragezeitpunkt noch nicht – dort bleibt manuelles sizes nötig.

Stand 2026 in Chromium, Firefox und WebKit unterstützt – noch jung, aber schon breit implementiert.

Reicht das nicht mehr – weil unterschiedliche Bildmotive oder Dateiformate benötigt werden – kommt <picture> ins Spiel.

picture-Element

Das <picture>-Element ermöglicht es, je nach Bildschirmgrösse, Dateiformat oder Auflösung unterschiedliche Bilddateien bereitzustellen. Der Browser wählt automatisch die erste passende Bildquelle aus.

Im Gegensatz zum <img>-Element, das nur eine Bildquelle besitzt, können innerhalb von <picture> mehrere <source>-Elemente definiert werden. Das eigentliche <img>-Element bleibt dabei erhalten und dient als Standardbild, falls keine andere Quelle passt – es ist nicht optional, ohne dieses Fallback-Bild funktioniert <picture> nicht.

<source>

Jedes <source>-Element beschreibt eine mögliche Bildquelle. Mit den Attributen media, srcset und type wird festgelegt, wann diese Bilddatei verwendet werden soll.

  • mediaWählt eine Bildquelle abhängig von der Bildschirmgrösse oder anderen Media Queries
  • srcsetEnthält die Bilddatei, die verwendet werden soll
  • typeLiefert je nach Browserunterstützung verschiedene Bildformate wie AVIF, WebP oder JPEG

Art Direction
unterschiedliche Bildmotive

Im folgenden Beispiel wählt der Browser je nach Bildschirmbreite ein eigenes Bildmotiv – nicht nur eine andere Grösse desselben Bilds. Das ist der Anwendungsfall, den nur <picture> lösen kann; reines srcset/sizes skaliert immer nur dieselbe Bilddatei.

<picture>
    <source media="(min-width: 900px)" srcset="header-desktop.jpg">
    <source media="(min-width: 600px)" srcset="header-tablet.jpg">
    <img src="header-mobile.jpg"
         alt="Headerbild"
         width="1200"
         height="600">
</picture>

Typischer Einsatz: ein breites Panoramafoto auf Desktop, aber ein enger zugeschnittener Ausschnitt (z. B. Portrait-Format) auf Mobile, damit das wichtige Motiv nicht winzig klein oder abgeschnitten wirkt.

Fallback mit mehreren Formaten

Der häufigste Anwendungsfall für <picture>: dasselbe Bildmotiv in mehreren Formaten anbieten. Der Browser nimmt automatisch das erste Format, das er unterstützt.

<picture>
    <source srcset="foto.avif" type="image/avif">
    <source srcset="foto.webp" type="image/webp">
    <img src="foto.jpg" alt="Foto">
</picture>

Wichtig: Alle drei Dateien (foto.avif, foto.webp, foto.jpg) müssen tatsächlich auf dem Server bereitliegen – der Browser erzeugt nichts selbst. Das übernimmt meist ein Build-Tool oder eine Bildoptimierungs-Pipeline automatisch, nicht von Hand.

Format-Fallback und Art Direction

Beide Techniken lassen sich auch kombinieren: pro Bildschirmbreite mehrere Formate anbieten, plus srcset/sizes im Fallback-<img> für zusätzliche Auflösungsvarianten.

<picture>
    <source
        srcset="berge-large.webp"
        media="(min-width: 900px)"
        type="image/webp">

    <source
        srcset="berge-small.webp"
        media="(min-width: 600px)"
        type="image/webp">

    <img
        src="berge.jpg"
        srcset="berge-800.jpg 800w,
                berge-1200.jpg 1200w"
        sizes="(min-width: 900px) 900px, 100vw"
        width="1200"
        height="800"
        alt="Berglandschaft">
</picture>

Faustregel: <img srcset sizes> reicht, wenn dieselbe Bilddatei nur in unterschiedlichen Grössen ausgeliefert werden soll – der häufigere Fall. <picture> braucht es erst, wenn wirklich unterschiedliche Bildmotive (Art Direction) oder unterschiedliche Dateiformate (Format-Fallback) zum Einsatz kommen sollen.

Typische Fehler

  • Das Fallback-<img> vergessen – ohne dieses Element funktioniert <picture> gar nicht.
  • Nicht alle in type referenzierten Dateien (z. B. AVIF/WebP) tatsächlich auf dem Server bereitgestellt.
  • <source>-Elemente in der falschen Reihenfolge – der Browser nimmt das erste passende, also müssen die bevorzugten Formate zuerst stehen (AVIF vor WebP vor JPG).
  • <picture> für reine Grössenanpassung verwenden, obwohl <img srcset sizes> gereicht hätte.

Cheat Sheet

  • srcset im <img>gleiche Bilddatei, unterschiedliche Grössen
  • <picture> + mediaunterschiedliche Bildmotive (Art Direction)
  • <picture> + typeunterschiedliche Dateiformate (Format-Fallback)
  • Fallback-<img>Pflicht innerhalb von <picture>

Kurz gesagt

  • Für reine Grössenvarianten derselben Datei reicht <img srcset sizes> – der häufigste Fall.
  • <picture> lohnt sich erst bei unterschiedlichen Bildmotiven oder Dateiformaten.
  • Der Browser wählt innerhalb von <picture> die erste passende <source> – Reihenfolge zählt.
  • Das <img> am Ende von <picture> ist Pflicht, nicht optional.

Nurse width/height reservieren eine feste Grösse – für ein festes Seitenverhältnis bei flexibler Breite siehe aspect-ratio in der Grid-Lektion.