Image & Picture-Element

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

srcset und sizes im img-Element

Der häufigste Fall überhaupt: Für viele Webseiten genügt ein einzelnes <img>-Element mit srcset und sizes – ganz ohne <picture>. Typischerweise bleibt der Bildinhalt identisch, es werden lediglich unterschiedlich grosse Dateien desselben Motivs 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 voraussichtliche 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.

Innerhalb von <picture> können mehrere <source>-Elemente für unterschiedliche Bildmotive oder Dateiformate definiert werden. Das abschliessende <img>-Element ist Pflicht und dient als Fallback, wenn keine der vorherigen Quellen passt. Es kann zusätzlich ein eigenes srcset für verschiedene Bildgrössen enthalten.

<source>

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

<picture>
    <source
        media="(min-width: 900px)"
        srcset="bild-desktop.jpg">

    <img
        class="responsive"
        src="bild-mobile.jpg"
        width="800"
        height="600"
        alt="Bildbeschreibung">
</picture>

mediaWählt eine Bildquelle abhängig von der Bildschirmgrösse oder anderen Media Queries
srcsetEnthält eine oder mehrere mögliche Bilddateien
typeLiefert je nach Browserunterstützung verschiedene Bildformate wie AVIF, WebP oder JPEG

Art Direction
unterschiedliche Bildmotive

Mit <picture> lässt sich über media gezielt festlegen, welches Bildmotiv bei welcher Bildschirmbreite verwendet wird. Bei einem einzelnen <img> mit srcset wählt dagegen der Browser die passende Datei anhand der Darstellungsgrösse und Pixeldichte aus.

<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 der Browser aus mehreren Bildgrössen auswählen soll. <picture> wird verwendet, wenn die Auswahl über media oder type gezielt gesteuert werden soll.

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>mehrere Bilddateien, Auswahl durch den Browser
<picture> + mediaunterschiedliche Bildmotive (Art Direction)
<picture> + typeunterschiedliche Dateiformate (Format-Fallback)
Fallback-<img>Pflicht innerhalb von <picture>

Kurz gesagt

Mit srcset bietet das <img>-Element mehrere Bilddateien an. Der Browser wählt abhängig von Darstellungsgrösse und Pixeldichte eine passende Datei aus.
Mit <picture> lässt sich über media oder type gezielt festlegen, welche Bildquelle verwendet werden soll.
Der Browser verwendet innerhalb von <picture> das erste passende <source>-Element.
Das abschliessende <img>-Element ist Pflicht und dient als Fallback.