Responsive Bilder: srcset, sizes und das picture-Element erklärt

Veröffentlicht 10. Oktober 2026

Ein Handy braucht nicht dieselbe Datei wie ein 4K-Monitor. Responsive Bilder lassen den Browser nur das herunterladen, was er braucht, und senken so das Seitengewicht, ohne die Qualität zu beeinträchtigen. Dieser Ratgeber erklärt das Problem, die Werkzeuge, die HTML bietet, und wie Sie sie einsetzen.

Das Problem: eine Datei für jeden Bildschirm

Wenn Sie jedem Besucher ein Bild mit 2000 Pixeln ausliefern, lädt ein Handy mit 390 Pixeln Bildschirmbreite ein Vielfaches an Daten herunter, als es darstellen kann. Bei einer mobilen Verbindung kostet das Zeit und Geld und bremst die Seite gerade für die aus, die es sich am wenigsten leisten können.

Allen eine kleine Datei zu liefern ist ebenfalls keine Lösung, denn große und hochauflösende Bildschirme würden sie weich und unscharf darstellen. Responsive Bilder lösen das, indem sie mehrere Versionen desselben Bildes bereitstellen und den Browser die passende wählen lassen.

Die drei Werkzeuge: srcset, sizes und picture

Werkzeug	Was es tut	Wofür verwenden
`srcset` mit Breitenangaben	Listet mehrere Dateien und ihre Pixelbreiten auf	Verschiedene Größen desselben Bildes anbieten
`sizes`	Sagt dem Browser, wie breit das Bild angezeigt wird	Ihm helfen, aus `srcset` zu wählen, bevor das Layout bekannt ist
`picture` mit `source`	Erlaubt unterschiedliche Formate oder Ausschnitte	WebP oder AVIF mit Fallback ausliefern oder auf Handys einen engeren Ausschnitt zeigen

Ein einfaches Beispiel sieht so aus: <img src="photo-800.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" alt="...">.

Das src ist der Fallback für alte Browser. Der Browser kombiniert die Layoutbreite, die Bildschirmdichte und sein eigenes Urteil, Sie beschreiben also die Auswahl, statt eine vorzugeben.

Vor- und Nachteile responsiver Bilder

Vorteile

Kleinere Downloads auf Handys und bei langsamen Verbindungen, oft eine große Ersparnis.
Scharfe Bilder auf hochauflösenden Bildschirmen, ohne alle anderen zu benachteiligen.
Bessere Werte bei Geschwindigkeitsmessungen wie dem Largest Contentful Paint.
Funktioniert mit Standard-HTML, ohne JavaScript.

Nachteile

Mehr Dateien, die pro Bild erstellt, benannt und verwaltet werden müssen.
Mehr Markup, und ein sizes-Wert, der ungefähr zu Ihrem Layout passen muss, damit es gut funktioniert.
Ist sizes falsch, wählt der Browser womöglich eine größere Datei als nötig.
Art Direction mit picture vervielfacht die Zahl der Versionen, setzen Sie sie also nur dort ein, wo es zählt.

Die meisten Content-Management-Systeme und Bild-CDNs erzeugen die Versionen und das Markup für Sie, was den wichtigsten Nachteil beseitigt.

Schritt für Schritt: responsive Bilder umsetzen

1Legen Sie Ihre Breiten fest. Gängig sind 480, 800, 1200 und 1600 Pixel. Bei kleinen Websites genügen weniger.
2Skalieren Sie vom größten Original. Mit Bild skalieren erzeugen Sie jede Breite bei beibehaltenem Seitenverhältnis. Skalieren Sie nie von einer bereits verkleinerten Kopie.
3Komprimieren Sie jede Version. Schicken Sie jede durch Bild komprimieren. Qualität 75 bis 85 passt für die meisten Fotos.
4Schreiben Sie das srcset und listen Sie jede Datei mit ihrer Breite in Pixeln, gefolgt von w, auf.
5Fügen Sie sizes hinzu, passend zu Ihrem Layout, zum Beispiel (min-width: 1024px) 800px, 100vw: volle Breite auf kleinen Bildschirmen, 800 Pixel auf großen.
6Behalten Sie einen src-Fallback und ein zutreffendes alt.
7Fügen Sie width und height hinzu, damit das Layout beim Laden nicht springt.
8Testen Sie, indem Sie die Größe des Browserfensters ändern und im Netzwerk-Panel prüfen, welche Datei heruntergeladen wird.

picture für moderne Formate und Art Direction nutzen

Um moderne Formate mit sicherem Fallback anzubieten, verpacken Sie die Quellen in ein picture-Element: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. Der Browser nimmt die erste Quelle, die er unterstützt, sodass niemand ein kaputtes Bild sieht.

Die WebP-Version erstellen Sie mit JPG in WebP. Der Formatratgeber erklärt, wann sich der Mehraufwand für AVIF lohnt.

Dasselbe Element kann mit media-Attributen auf kleinen Bildschirmen einen anderen Ausschnitt zeigen, zum Beispiel einen engeren quadratischen Ausschnitt auf Handys. Bild zuschneiden hilft, jede Version vorzubereiten. Heben Sie sich das für Fälle auf, in denen das Motiv es wirklich braucht, denn jede Version bedeutet Arbeit.

Häufige Fehler

Einen sizes-Wert schreiben, der nicht zum Layout passt. Der Browser wählt dann die falsche Datei.
Versionen durch Skalieren einer Kopie einer Kopie erstellen, was Qualität kostet.
Das erste Bild verzögert laden. Siehe den Ratgeber zum verzögerten Laden.
width und height vergessen, was Layoutverschiebungen verursacht.
Alles von Hand schreiben, obwohl Ihr CMS srcset bereits erzeugt. Prüfen Sie zuerst das HTML.

Häufig gestellte Fragen

Was ist der Unterschied zwischen srcset und sizes?

srcset listet die verfügbaren Dateien und ihre Breiten auf. sizes sagt dem Browser, wie breit das Bild angezeigt wird, damit er die beste Datei wählen kann, bevor das Seitenlayout bekannt ist.

Wann sollte ich das picture-Element verwenden?

Verwenden Sie es, wenn Sie moderne Formate wie WebP oder AVIF mit Fallback anbieten möchten oder wenn auf kleinen Bildschirmen ein anderer Ausschnitt besser funktioniert. Um einfach verschiedene Größen desselben Bildes anzubieten, genügt srcset an einem img-Element.

Wie viele Bildgrößen brauche ich?

Drei oder vier Breiten decken die meisten Websites ab, zum Beispiel 480, 800, 1200 und 1600 Pixel. Mehr Versionen passen genauer, bedeuten aber mehr Arbeit und Speicherbedarf.

Macht WordPress das automatisch?

Ja, WordPress erzeugt mehrere Größen und fügt Bildern im Inhalt srcset hinzu. Prüfen Sie, ob Ihr Theme und Ihre Plugins dieses Markup beibehalten, und optimieren Sie das Original vor dem Hochladen.

Helfen responsive Bilder dem SEO?

Indirekt. Kleinere Downloads verbessern Geschwindigkeit und Core Web Vitals, was die Seitenerfahrung stützt. Sie ändern nicht, wie Suchmaschinen das Bild verstehen, behalten Sie also guten Alternativtext und Dateinamen bei.