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 Viewport eine Datei aus. Dadurch können kleinere Geräte weniger Bilddaten laden, ohne dass hochauflösende Displays an Bildschärfe verlieren.
Das srcset-Attribut (deutsch: Attribut für responsive Bildquellen) ergänzt das <img>-Element um mehrere Bildvarianten. Statt jedem Gerät dieselbe große Datei auszuliefern, kann der Browser eine geeignete Quelle auswählen. Das reduziert unnötig übertragene Bilddaten und unterstützt kurze Ladezeiten.
Wie funktioniert das srcset-Attribut?
Das srcset-Attribut enthält eine durch Kommas getrennte Liste aus Bild-URLs und Deskriptoren. Ein Deskriptor beschreibt entweder die tatsächliche Breite einer Datei mit w oder deren vorgesehene Pixeldichte mit x. Der Browser berücksichtigt zusätzlich die Größe des Viewports, die Darstellungsbreite des Bildes und die Pixeldichte des Displays.
Ein typisches Beispiel mit Breitenangaben sieht so aus:
<img src="produkt-800.jpg" srcset="produkt-480.jpg 480w, produkt-800.jpg 800w, produkt-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="600" alt="Produktansicht"> Der Browser erfährt dadurch, dass Bilddateien mit 480, 800 und 1.600 Pixeln Breite verfügbar sind. Das sizes-Attribut beschreibt, wie breit das Bild im Layout voraussichtlich dargestellt wird. Die Auswahl erfolgt nicht ausschließlich anhand der Bildschirmbreite. Ein Smartphone mit einem Viewport von 390 CSS-Pixeln und einer Pixeldichte von 2 kann eine Bilddatei benötigen, die deutlich breiter als 390 Pixel ist. Die endgültige Entscheidung trifft der Browser anhand der verfügbaren Kandidaten und seiner eigenen Ladeoptimierung.
Breitenangaben mit w-Deskriptor
Der w-Deskriptor nennt die tatsächliche Breite der jeweiligen Bilddatei. Die Angabe 800w bedeutet, dass die Datei 800 Pixel breit ist. Das srcset-Attribut sollte bei dieser Variante mit dem sizes-Attribut kombiniert werden, damit der Browser die voraussichtliche Darstellungsbreite kennt.
Fehlt eine passende sizes-Angabe, nimmt der Browser häufig eine sehr breite Darstellung an. Dadurch kann er eine größere Datei auswählen, als das Layout tatsächlich benötigt. Prüfe deshalb, ob die Bedingungen im sizes-Attribut mit den CSS-Breakpoints und der realen Bildbreite übereinstimmen.
Pixeldichten mit x-Deskriptor
Der x-Deskriptor eignet sich für Bilder, deren Darstellungsgröße im Layout weitgehend feststeht. Eine Liste wie logo.png 1x, logo-2x.png 2x bietet eine Standarddatei und eine Variante für Displays mit höherer Pixeldichte an. Das sizes-Attribut ist bei dieser Schreibweise nicht erforderlich.
w– und x-Deskriptoren dürfen innerhalb derselben Kandidatenliste nicht vermischt werden. Entscheide dich anhand des Layouts: Variable Bildbreiten sprechen für w, eine feste CSS-Größe mit unterschiedlichen Displayauflösungen spricht für x.
PageSpeed durch passende Bildgrößen
Der PageSpeed-Vorteil des srcset-Attributs entsteht durch die geringere Datenübertragung. Wenn ein Bild im mobilen Layout nur 360 Pixel breit erscheint, muss der Browser keine Datei laden, die für eine Darstellung mit 1.600 Pixeln vorbereitet wurde. Voraussetzung ist, dass die kleineren Kandidaten tatsächlich als eigenständige, komprimierte Dateien vorliegen.
Besonders relevant ist das srcset-Attribut für das größte sichtbare Element im ersten Bildschirmbereich. Handelt es sich dabei um ein Hero-Bild, kann dessen Ladezeit den Largest Contentful Paint, kurz LCP, beeinflussen. Ein korrektes srcset-Attribut unterstützt die Auswahl einer angemessenen Datei, behebt aber keine langsamen Serverantworten oder ungeeigneten Bildformate.
Messbar ist das zum Beispiel so: Öffne die Seite in verschiedenen Viewport-Größen, leere den Browser-Cache und kontrolliere im Netzwerkbereich der Entwicklertools den Dateinamen sowie die übertragene Datenmenge. Ergänzend zeigt ein kostenloser Ladezeiten-Check, welche Bilder die Seitengeschwindigkeit belasten.
Prüfe die Ladezeit und die technischen Optimierungsmöglichkeiten deiner Seite direkt:
Relevanz für SEO und GEO
Das srcset-Attribut erzeugt keinen direkten Rankingvorteil. Der SEO-Nutzen entsteht über die technische Qualität der Seite: passend dimensionierte Bilder können die übertragene Datenmenge reduzieren, den LCP verbessern und die mobile Nutzung erleichtern. Das srcset-Attribut gehört deshalb zur technischen Onpage-Optimierung, muss aber gemeinsam mit Kompression, Caching und geeigneten Dateiformaten betrachtet werden.
Für GEO, also Generative Engine Optimization, ist das srcset-Attribut ebenfalls kein unmittelbares Auszeichnungssignal. Schnelle, zuverlässig nutzbare Seiten erleichtern jedoch den Zugriff auf Inhalte und bilden zusammen mit sauberem HTML, klaren Textinformationen und zugänglichen Bildern eine belastbare technische Grundlage für Google und KI-Systeme.
Das alt-Attribut bleibt unabhängig vom srcset-Attribut erforderlich, wenn das Bild inhaltliche Informationen vermittelt. Das srcset-Attribut beschreibt verfügbare Dateien und Auflösungen, während der Alternativtext den Bildinhalt erklärt. Eine vollständige technische Prüfung sollte beide Attribute sowie Dateigröße, Format und Seitenverhältnis abdecken, etwa im Rahmen eines SEO-Audits.
Unterschied zu sizes und picture
| Element oder Attribut | Aufgabe | Typischer Einsatz |
|---|---|---|
src | Definiert die reguläre oder ersatzweise Bildquelle. | Fallback und einfaches Bild ohne Varianten. |
srcset | Listet mehrere Dateien mit Breiten oder Pixeldichten auf. | Responsive Auflösungsauswahl. |
sizes | Beschreibt die erwartete Darstellungsbreite im Layout. | Auswahl aus Kandidaten mit w-Deskriptor. |
picture | Erlaubt unterschiedliche Bildinhalte oder Formate über mehrere source-Elemente. | Art Direction und formatabhängige Quellen. |
Der Unterschied zwischen srcset-Attribut und sizes-Attribut liegt in der Informationsebene. Das srcset-Attribut beschreibt, welche Dateien verfügbar sind. Das sizes-Attribut beschreibt, wie viel Platz das Bild unter bestimmten Viewport-Bedingungen voraussichtlich im Layout einnimmt. Erst beide Informationen ermöglichen bei Breitenkandidaten eine fundierte Auswahl.
Das <picture>-Element wird eingesetzt, wenn sich nicht nur die Auflösung, sondern auch der Bildausschnitt oder das Dateiformat ändern soll. Ein breites Desktop-Motiv kann beispielsweise durch einen engeren mobilen Ausschnitt ersetzt werden. Für dasselbe Motiv in mehreren Größen reicht in der Regel ein <img>-Element mit srcset-Attribut.
Typische Fehler beim srcset-Attribut
Ein häufiger Fehler ist ein sizes-Wert von 100vw, obwohl das Bild im Desktop-Layout nur die Hälfte des Viewports einnimmt. Der Browser kalkuliert dann mit einer zu großen Darstellungsfläche und kann eine unnötig breite Datei laden. Verwende Bedingungen, die das reale Spaltenlayout abbilden.
Das srcset-Attribut ersetzt außerdem weder width und height noch CSS-Regeln. Die Attribute width und height helfen dem Browser, das Seitenverhältnis früh zu berechnen. CSS bestimmt weiterhin die sichtbare Größe, beispielsweise mit max-width: 100% und height: auto.
Bei einem LCP-relevanten Hero-Bild sollte Lazy Loading gezielt geprüft werden. Wird das zuerst sichtbare Hauptbild erst verzögert angefordert, kann sich der LCP verschlechtern, obwohl das srcset-Attribut korrekt ist. Verwende loading="lazy" bevorzugt für Bilder außerhalb des anfänglichen Sichtbereichs.
Häufige Fragen zum srcset-Attribut
Braucht jedes Bild ein srcset-Attribut?
Nein. Das Attribut lohnt sich vor allem, wenn ein Bild je nach Gerät in unterschiedlichen Größen dargestellt wird oder Varianten für hochauflösende Displays verfügbar sind. Bei kleinen Bildern mit fester Größe kann eine einzelne optimierte Datei ausreichen.
Funktioniert srcset ohne sizes?
Ja, bei Pixeldichteangaben wie 1x und 2x funktioniert srcset ohne sizes. Bei Breitenangaben wie 480w und 800w sollte sizes die erwartete Darstellungsbreite beschreiben, damit der Browser passend auswählen kann.
Welche Bildgröße lädt der Browser aus srcset?
Der Browser entscheidet anhand der Darstellungsbreite, der Pixeldichte, des Viewports und der verfügbaren Kandidaten. Die Auswahl kann deshalb auf zwei Geräten mit derselben Bildschirmbreite unterschiedlich ausfallen.
Ist srcset auch für WebP und AVIF geeignet?
Ja. Bildkandidaten innerhalb eines srcset-Attributs können moderne Formate verwenden. Wenn der Browser zwischen unterschiedlichen Dateiformaten wählen soll, wird srcset meist innerhalb von source-Elementen im picture-Element eingesetzt.
Ersetzt srcset das Lazy Loading?
Nein. srcset wählt eine geeignete Bilddatei aus, während Lazy Loading den Zeitpunkt des Ladens steuert. Beide Techniken erfüllen unterschiedliche Aufgaben und können bei Bildern außerhalb des ersten Sichtbereichs kombiniert werden.
Kann ein falsches srcset Bilder unscharf machen?
Ja. Zu kleine Kandidaten oder fehlerhafte Breitenangaben können dazu führen, dass eine Datei für die sichtbare Größe und Pixeldichte nicht ausreicht. Prüfe die Darstellung deshalb auch auf hochauflösenden Mobilgeräten und Desktop-Bildschirmen.
Wenn du responsive Bilder, Ladezeiten und weitere technische Signale strukturiert prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
