Responsive Bilder mit srcset implementieren

srcset ist nicht kompliziert — mit dem richtigen Setup sparst du Bandbreite und verbesserst die Nutzererfahrung. Praktische Beispiele und häufige Fehler, die du vermeiden solltest.

10 Min Lesezeit Fortgeschrittene März 2026

Responsive Bilder auf verschiedenen Geräten: Smartphone, Tablet und Desktop zeigen unterschiedliche Bildgrößen

Warum srcset wirklich wichtig ist

Dein Desktop-Bild auf einem Smartphone laden zu lassen? Das ist Verschwendung. Nicht nur Daten, sondern auch Zeit. Ein 4-MB-Foto auf einem 320px-breiten Display ist nicht nur ineffizient — es frustriert deine Nutzer.

Hier kommt srcset ins Spiel. Es erlaubt dir, mehrere Versionen desselben Bildes anzubieten und dem Browser zu sagen: “Nimm das passende für die aktuelle Bildschirmgröße und Auflösung.” Das Ergebnis? Schnellere Ladezeiten, weniger Bandbreite, zufriedenere Nutzer.

Das Beste daran: Es ist nicht kompliziert. Du brauchst nur ein paar Attribute im img-Tag und vielleicht ein kleines Script, wenn du wirklich smart werden möchtest.

Infografik zeigt wie srcset verschiedene Bildversionen für unterschiedliche Bildschirmauflösungen bereitstellt

Die Grundlagen: srcset und sizes erklärt

srcset funktioniert mit zwei Attributen: srcset selbst und sizes. Vergiss nicht — der Browser entscheidet am Ende, welches Bild er lädt. Du gibst ihm nur Optionen.

Mit srcset stellst du eine Liste von Bildvarianten bereit. Jede Variante hat eine Breite oder ein Pixeldichte-Verhältnis. Das sieht dann so aus:

                  <img src="small.jpg"
                  
                  srcset="small.jpg 480w,
                  
                  medium.jpg 800w,
                  
                  large.jpg 1200w"
                  
                  sizes="(max-width: 600px) 100vw,
                  
                  (max-width: 1000px) 80vw,
                  
                  1000px"
                  
                  alt="Beschreibung">

Das sizes-Attribut sagt dem Browser: “Auf Handys ist das Bild 100% der Viewport-Breite. Auf Tablets 80%. Auf Desktop maximal 1000px.” Der Browser kombiniert diese Info mit dem Geräte-Pixelverhältnis und wählt das beste Bild aus der srcset-Liste.

Code-Editor zeigt ein Beispiel mit srcset und sizes Attributen mit Syntax-Hervorhebung

Vorher-Nachher Vergleich zeigt Ladezeiten mit und ohne srcset Optimierung

So optimierst du deine Bilder richtig

Bevor du srcset einsetzt, brauchst du mehrere Versionen deines Bildes. Das klingt aufwändig, ist es aber nicht. Tools wie ImageMagick, ImageOptim oder Online-Services machen das in Sekunden.

Schritt eins: Bestimme deine Breakpoints. Die meisten Sites brauchen 3-4 Versionen: 480px für Mobilgeräte, 800px für Tablets, 1200px+ für Desktop. Nicht weniger — aber auch nicht 10 verschiedene Versionen für jeden denkbaren Bildschirm.

Schritt zwei: Exportiere deine Bilder. JPG für Fotos (mit 75-85% Qualität), WebP wenn möglich (spart bis zu 30% Dateigröße). PNG nur für Grafiken mit Transparenz.

Schritt drei: Schreib dein srcset. Achte auf konsistente Benennung — das macht später Wartung einfacher. Und vergiss nicht: Das src-Attribut ist immer noch wichtig. Es ist dein Fallback für alte Browser.

Zu viele Bildvarianten

8 oder 10 verschiedene Größen zu erstellen “für alle Fälle” kostet Zeit und Speicher. Drei bis vier gute Größen reichen völlig aus. Der Browser ist smart genug, die beste auszuwählen.

sizes-Attribut vergessen

Ohne sizes weiß der Browser nicht, wie groß das Bild auf dem Bildschirm werden soll. Er rät dann einfach — und rät oft falsch. Das Attribut ist nicht optional.

Pixel-Dichte vs. Bildbreite vermischt

Du kannst nicht “small.jpg 480w” und “retina.jpg 2x” in der gleichen srcset mischen. Wähle dich für eine Methode und bleib dabei. Bildbreite (w) ist moderner und flexibler.

Keine WebP-Unterstützung

WebP spart echte Dateigröße — bis zu 30%. Mit picture-Element oder moderner srcset kannst du WebP anbieten und auf JPG fallback. Das ist nicht kompliziert.

Noch einen Schritt weiter: picture-Element

Manchmal reicht srcset nicht aus. Vielleicht brauchst du nicht nur unterschiedliche Größen, sondern auch unterschiedliche Bilder für unterschiedliche Geräte. Das heißt Art Direction — und dafür brauchst du das picture-Element.

Mit picture kannst du sagen: “Auf dem Handy zeige dieses Portrait-Bild. Auf dem Desktop das Landscape-Bild.” Das ist besonders nützlich bei Fotos, wo Ausschnitt und Komposition wichtig sind.

                  <picture>
                  
                  <source media="(min-width: 1000px)"
                  
                  srcset="landscape-large.jpg 1200w,
                  
                  landscape-small.jpg 800w">
                  
                  <img src="portrait.jpg"
                  
                  srcset="portrait-small.jpg 480w"
                  
                  alt="Beschreibung">
                  
                  </picture>

Das picture-Element ist nicht kompliziert, aber es braucht etwas mehr Planung. Überlege vorher: Welche Bilder brauchst du wirklich für welche Breakpoints? Nicht zu viel, nicht zu wenig.

Desktop-Ansicht zeigt Art Direction Konzept mit verschiedenen Bildausschnitten für mobile und desktop Layouts

Zusammenfassung: Responsive Bilder sind nicht optional

srcset ist ein einfaches Konzept mit großem Effekt. Es geht nicht darum, perfekt zu sein — es geht darum, dass deine Nutzer schneller ins Internet gehen und deine Site schneller lädt.

Das Wichtigste zum Mitnehmen: Erstelle 3-4 Bildversionen (480px, 800px, 1200px), nutze srcset mit Bildbreite-Angaben, und vergiss nicht das sizes-Attribut. Wenn du Art Direction brauchst, nutze picture. Nicht kompliziert — einfach praktisch.

Deine Nutzer werden’s dir danken. Und Google auch.

“Responsive Bilder sind nicht ein Feature — sie’re eine Notwendigkeit. Jedes Byte zählt, wenn es um Nutzererfahrung geht.”
— Web Performance Best Practices

Bereit zum Implementieren?

Starten Sie mit einer Seite und sehen Sie die Unterschiede bei der Ladezeit. Die meisten Nutzer werden es sofort bemerken.

Mehr über Bildoptimierung erfahren

Hinweis zum Inhalt

Dieser Artikel bietet bildungsmäßige Informationen über responsive Bilder und srcset-Implementierung. Die Techniken und Best Practices können je nach Projekt, CMS-System und Anforderungen variieren. Wir empfehlen, die Implementierung an deine spezifischen Bedürfnisse anzupassen und die aktuelle Browser-Kompatibilität zu überprüfen. Die Informationen basieren auf aktuellen Web-Standards und Best Practices, können sich aber mit neuen Browser-Updates ändern.