srcset-Attribut
Was ist das srcset-Attribut?
Das srcset-Attribut ist ein HTML-Attribut für responsive Bilder. Es stellt dem Browser mehrere Bilddateien in unterschiedlichen Breiten oder Pixeldichten bereit. Der Browser wählt daraus passend zu Darstellungsgröße, Bildschirmauflösung und Geräteeigenschaften eine Variante aus. Dadurch lassen sich Bildqualität und übertragene Datenmenge gezielt aufeinander abstimmen.
Wie funktioniert das srcset-Attribut?
Das srcset-Attribut, deutsch: Attribut für responsive Bildquellen, ergänzt das <img>-Element um mehrere Bildkandidaten. Jeder Kandidat besteht aus einer URL und einem Deskriptor. Der Deskriptor teilt dem Browser mit, welche intrinsische Breite oder Pixeldichte die Datei besitzt. Der Browser trifft die Auswahl selbst, bevor das Bild vollständig geladen wird.
Eine Einbindung mit Breitenangaben kann beispielsweise so aussehen:
<img src="produkt-800.webp" srcset="produkt-480.webp 480w, produkt-800.webp 800w, produkt-1200.webp 1200w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="600" alt="Produktansicht"> Das Beispiel bietet drei Dateien mit 480, 800 und 1.200 Pixeln Breite an. Das sizes-Attribut beschreibt, wie breit das Bild im Layout voraussichtlich dargestellt wird.Bei einem Viewport von höchstens 600 CSS-Pixeln belegt das Bild laut sizes die gesamte Viewport-Breite. Auf größeren Bildschirmen beträgt der vorgesehene Darstellungsbereich 800 CSS-Pixel. Ein Gerät mit einer Pixeldichte von 2 kann für einen 400 CSS-Pixel breiten Bildbereich eine Datei um 800 Pixel bevorzugen. Der Browser darf seine Auswahl zusätzlich an technische Bedingungen und Nutzereinstellungen anpassen.
Breiten und Pixeldichten unterscheiden
Das srcset-Attribut unterstützt zwei Arten von Deskriptoren. Breitenangaben mit w beschreiben die tatsächliche Breite einer Bilddatei in Pixeln. Dichteangaben mit x geben an, für welche Pixeldichte eine Variante vorgesehen ist. Beide Deskriptortypen dürfen innerhalb desselben srcset-Werts nicht gemischt werden.
| Variante | Beispiel | Geeigneter Einsatz |
|---|---|---|
| Breitendeskriptor | bild-800.webp 800w | Flexible Layouts mit unterschiedlichen Bildbreiten |
| Dichtedeskriptor | bild@2x.webp 2x | Bilder mit fester CSS-Größe auf Displays verschiedener Pixeldichte |
| Fallback über src | src="bild-800.webp" | Standardquelle und Rückfalllösung |
Breitendeskriptoren sind für responsive Websites meist flexibler, weil sich der benötigte Bildkandidat aus Layoutbreite und Pixeldichte ableiten lässt. Dichtedeskriptoren eignen sich vor allem für Bilder, deren Darstellungsgröße feststeht, etwa ein Logo mit 160 CSS-Pixeln Breite. Definiere bei variablen Layouts deshalb bevorzugt reale Dateibreiten mit w und ergänze ein korrektes sizes-Attribut.
Pagespeed durch passende Bildgrößen
Das srcset-Attribut verbessert den Pagespeed nur dann, wenn die angebotenen Dateien tatsächlich unterschiedliche Abmessungen und Dateigrößen besitzen. Drei URLs, die auf dieselbe große Bilddatei verweisen, sparen keine Daten. Liefert eine mobile Ansicht statt einer 1.600 Pixel breiten Datei eine geeignete 480-Pixel-Variante aus, muss der Browser weniger Bilddaten übertragen und decodieren.
Dieser Effekt betrifft besonders Bilder im sichtbaren Seitenbereich. Ein großes Titelbild kann das Largest Contentful Paint beeinflussen, also den Zeitpunkt, an dem das größte sichtbare Inhaltselement dargestellt ist. Das srcset-Attribut verkleinert jedoch weder Dateien automatisch noch ersetzt es moderne Formate, Komprimierung oder Caching. Prüfe deshalb jede Bildvariante auf Abmessungen, Dateiformat und Dateigröße.
Messbar ist das zum Beispiel so: Vergleiche im Browser-Netzwerkprotokoll bei mehreren Viewport-Breiten die tatsächlich geladene Bild-URL und deren übertragene Datenmenge. Ergänzend zeigt ein Ladezeiten-Check für Desktop und Mobil, ob überdimensionierte Bilder oder weitere technische Faktoren die Seitengeschwindigkeit belasten.
Prüfe deine Seite direkt auf auffällige Ladezeitfaktoren:
srcset, sizes und picture abgrenzen
Der Unterschied zwischen srcset und sizes liegt in ihrer Aufgabe. Das srcset-Attribut listet verfügbare Dateien und deren Eigenschaften auf. Das sizes-Attribut beschreibt die erwartete Darstellungsbreite des Bildes unter verschiedenen Media-Bedingungen. Ohne sizes nimmt der Browser bei Breitendeskriptoren standardmäßig eine Bildbreite von 100vw an. Diese Annahme kann bei schmalen Content-Spalten zu einer unnötig großen Auswahl führen.
Das <picture>-Element löst eine andere Aufgabe. Es kann über mehrere <source>-Elemente unterschiedliche Bildausschnitte, Formate oder Motive verbindlich nach Media-Bedingungen anbieten. Das srcset-Attribut innerhalb eines normalen <img>-Elements eignet sich dagegen für dasselbe Motiv in verschiedenen Auflösungen. Nutze <picture> beispielsweise dann, wenn ein breites Desktop-Motiv auf Mobilgeräten durch einen engeren Ausschnitt ersetzt werden soll.
Typische Fehler beim srcset-Attribut
Ein häufiger Fehler besteht darin, im w-Deskriptor die geplante CSS-Breite statt der tatsächlichen Pixelbreite der Datei anzugeben. Ist eine Datei physisch 1.200 Pixel breit, muss der Kandidat mit 1200w gekennzeichnet sein. Eine falsche Angabe verfälscht die Auswahlrechnung des Browsers und kann zu unscharfen oder unnötig großen Bildern führen.
Bedeutung für SEO und GEO
Das srcset-Attribut beeinflusst SEO indirekt über die technische Qualität und Nutzererfahrung einer Seite. Angepasste Bilddateien können die übertragene Datenmenge reduzieren und die Darstellung zentraler Inhalte beschleunigen. Für die Indexierung des Bildmotivs bleiben ein erreichbarer Bildpfad, ein aussagekräftiges alt-Attribut und eine verständliche Einbindung in den Seiteninhalt relevant.
Für GEO, also Generative Engine Optimization, liefert das srcset-Attribut keinen eigenständigen semantischen Hinweis. KI-Systeme erschließen die Bedeutung eines Bildes eher aus Alternativtext, Bildumfeld, Überschrift und strukturiertem Inhalt. Schnelle, technisch stabile Seiten erleichtern jedoch den Zugriff auf die Inhalte. Eine umfassende Prüfung der technischen SEO sollte responsive Bilder deshalb gemeinsam mit Crawling, HTML-Struktur und Core Web Vitals betrachten.
Umsetzung kontrollieren
Die Kontrolle beginnt im Browser. Öffne die Entwicklertools, stelle verschiedene Gerätebreiten ein und prüfe im Netzwerkbereich, welche Bilddatei geladen wurde. Die Eigenschaft currentSrc zeigt im Browser zudem die aktuell ausgewählte Quelle. Ändere nach einem Test die Viewport-Breite und lade die Seite neu, da eine bereits geladene größere Datei nicht zwingend durch eine kleinere Datei ersetzt wird.
Bei einem Relaunch sollte das srcset-Attribut zusammen mit Bildformaten, Layout-Breakpoints und den Angaben zu Breite und Höhe getestet werden. Die Relaunch-Checkliste hilft dabei, technische Prüfungen vor und nach dem Livegang zu strukturieren. Wenn responsive Bilder bereits bei der SEO-orientierten Website-Entwicklung berücksichtigt werden, lassen sich Bildvarianten und Layoutlogik sauber aufeinander abstimmen.
Häufige Fragen zum srcset-Attribut
Braucht jedes Bild ein srcset-Attribut?
Nein. Ein srcset-Attribut lohnt sich vor allem für Bilder, die je nach Bildschirm oder Layout in unterschiedlichen Größen erscheinen. Kleine Symbole oder Bilder mit fester Größe benötigen häufig keine zusätzlichen Kandidaten.
Was passiert ohne sizes-Attribut?
Bei srcset-Kandidaten mit Breitendeskriptor nimmt der Browser ohne sizes standardmäßig eine Darstellungsbreite von 100vw an. In einer schmalen Content-Spalte kann dadurch eine größere Datei als erforderlich ausgewählt werden.
Kann srcset WebP und AVIF auswählen?
Das srcset-Attribut kann mehrere Dateien desselben unterstützten Formats anbieten. Für eine geordnete Formatwahl zwischen AVIF, WebP und einem Fallback eignet sich das picture-Element mit mehreren source-Elementen.
Warum lädt der Browser nicht das kleinste Bild?
Der Browser berücksichtigt neben der CSS-Darstellungsbreite auch die Pixeldichte des Geräts. Auf einem Display mit hoher Pixeldichte kann deshalb eine breitere Datei für eine scharfe Darstellung erforderlich sein.
Ersetzt srcset die Bildkomprimierung?
Nein. Das srcset-Attribut wählt nur zwischen vorhandenen Dateien. Jede Variante muss separat in geeigneten Abmessungen, mit sinnvoller Komprimierung und möglichst effizientem Dateiformat erzeugt werden.
Funktioniert srcset zusammen mit Lazy Loading?
Ja. Das srcset-Attribut kann mit loading gleich lazy kombiniert werden. Der Browser verschiebt dann das Laden geeigneter Bilder und wählt beim Abruf weiterhin einen passenden Kandidaten aus dem srcset-Attribut.
Wenn du Bildauslieferung, Pagespeed und weitere technische Faktoren deiner Website strukturiert prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
