Bilder mit picture, srcset und passenden Alternativtexten

Ein responsives Bild muss mehrere Fragen beantworten. Welcher Ausschnitt bleibt auf einer schmalen Ansicht verständlich? Welche Datei passt zur benötigten Darstellungsgröße? Welche Information vermittelt das Bild Menschen, die es nicht sehen? Diese Aufgaben hängen zusammen, sind aber nicht identisch. picture, srcset und alt besitzen deshalb unterschiedliche Rollen.

Eine gute Umsetzung beginnt mit dem Inhalt und dem tatsächlichen Layout. Danach werden passende Dateien angeboten und die Ausgabe überprüft. Dieser Beitrag verwendet eine eigene einfache Zeichnung eines roten Rings auf hellem Grund. Breite und schmale Fassungen bleiben als Lernzeichnungen erkennbar. Die Browserprüfungen dokumentieren tatsächliche Auswahlentscheidungen unter benannten Bedingungen. Sie behaupten weder einen universellen Auswahlalgorithmus für alle Browser noch eine gemessene Ladezeitverbesserung.

Drei Entscheidungen auseinanderhalten

Ein Auflösungswechsel stellt dasselbe Motiv mit unterschiedlichen Pixelmaßen bereit. Eine bewusste Bildregie verändert dagegen den Ausschnitt für eine bestimmte Platzsituation. Der Alternativtext beschreibt die im jeweiligen Zusammenhang wichtige Information. Wer diese Aufgaben vermischt, kann technisch mehrere Dateien ausliefern und trotzdem den entscheidenden Bildinhalt verlieren oder falsch erklären.

Die MDN-Einführung zu responsiven Bildern unterscheidet diese Anwendungsfälle. Praktisch sollte zunächst feststehen, ob wirklich nur mehr Bildpunkte gebraucht werden oder ob eine andere Komposition nötig ist. Eine größere Datei macht einen weit entfernten kleinen Gegenstand innerhalb derselben Darstellung nicht automatisch verständlicher. Ein engerer Ausschnitt kann dagegen wichtige Umgebung entfernen.

Lege deshalb die Bildaufgabe fest. Unsere Zeichnung soll einen roten Ring zeigen. Die breite Fassung enthält mehr freie Fläche, die schmale Fassung konzentriert sich auf denselben Ring. Diese Vereinfachung erlaubt einen nachvollziehbaren technischen Vergleich. Für ein echtes Produktbild müssten die relevanten Teile und Zusammenhänge erst anhand des tatsächlichen Motivs beurteilt werden.

Die tatsächliche Bildbreite im Layout bestimmen

Die Browserbreite ist nicht automatisch die Bildbreite. Eine Webseite kann Innenabstände, Spalten und eine maximale Inhaltsbreite besitzen. Für die Dateiauswahl ist deshalb wichtig, welcher Platz für das Bild vorgesehen ist. Diese Entscheidung entsteht im Layout. Ein Dateiname mit 1440 sagt noch nicht, dass das Bild in der Seite 1440 CSS-Pixel breit erscheinen wird.

Im Lernbeispiel besitzt der Seitenkörper keinen Außenabstand. Das Bildelement füllt seine verfügbare Breite und wird bei 960 CSS-Pixeln begrenzt. Bei 360 Pixeln Browserbreite ist der Bildplatz daher 360 Pixel breit. Bei 1200 Pixeln bleibt er 960 Pixel breit. Diese Werte sind bewusst gewählte Prüfbedingungen und keine allgemeine Vorgabe für jede Webseite.

Wenn die tatsächliche Gestaltung andere Abstände verwendet, muss die Beschreibung des Bildplatzes dazu passen. Ein Hinweis auf die volle Browserbreite wäre dann möglicherweise ungenau. Prüfe die berechnete Elementbox im fertigen Layout. Die Auswahl einer großen Quelle allein ist kein Beweis, dass die übermittelte Platzinformation richtig war.

srcset als Angebot tatsächlicher Dateien verstehen

Mit srcset werden mehrere Kandidaten angegeben. Ein Breitenbezeichner wie 480w beschreibt die tatsächliche Breite der zugehörigen Bildquelle in Bildpunkten. Er ist kein frei gewähltes Qualitätskennzeichen. Wenn die Datei in Wirklichkeit andere Maße besitzt, wird dem Browser eine unzutreffende Grundlage geliefert. Deshalb werden die vorbereiteten PNG-Dateien des Beispiels auf ihre tatsächlichen Maße geprüft.

Für die breite Komposition gibt es die Breiten 480, 960 und 1440. Für die schmale Komposition werden 480 und 960 angeboten. Innerhalb einer Gruppe bleibt der Ausschnitt gleich. Zwischen den Gruppen ändert er sich bewusst. Diese Unterscheidung erlaubt, die Funktion von picture und die Auswahl innerhalb eines srcset getrennt zu beobachten.

Die Eigenschaften der Dateiformate bleiben eine eigene Frage. Ein größeres Pixelmaß ist nicht automatisch eine größere übertragene Datenmenge als jede denkbare andere Datei. Kompression und Inhalt wirken ebenfalls mit. Der Lernvergleich untersucht Quellen und Darstellung. Er ist kein vollständiger Vergleich von Formaten und misst keine Netzwerkleistung.

sizes beschreibt den vorgesehenen Platz

Bei Breitenkandidaten ergänzt sizes die Information über die erwartete Darstellungsbreite. Die Angabe ersetzt keine CSS-Gestaltung. Sie ist auch nicht die Pixelbreite der Bilddatei. Im Beispiel wird für die schmale Gruppe die volle Browserbreite angegeben. Die breite Gruppe nennt unterhalb der Inhaltsgrenze ebenfalls die volle Breite und darüber den festen maximalen Bildplatz.

Diese Angaben müssen die tatsächlich vorgesehene Gestaltung möglichst zutreffend beschreiben. Wenn das Bild später in einer halben Spalte landet, kann eine unverändert behauptete volle Breite ungeeignet sein. Eine redaktionelle Umplatzierung ist deshalb auch eine technische Prüffrage. Wiederverwendete Bildbausteine sollten ihre Platzsituation nachvollziehbar berücksichtigen.

Der HTML-Standard zu Bildern beschreibt die Verarbeitung der Quellen und Größenangaben. Für die Anwendung ist wichtig, diese Angaben als Grundlage einer Browserentscheidung zu verstehen. Ein einfacher Rechenansatz kann den Bedarf erklären. Er sollte aber nicht als Zusicherung formuliert werden, dass jeder Browser unter allen Bedingungen exakt dieselbe Datei wählen muss.

picture für eine bewusste Bildregie einsetzen

Das MDN-Referenzblatt zu picture beschreibt die Auswahl aus unterschiedlichen Quellen. Im Beispiel verwendet eine Browserbreite bis einschließlich 599 Pixel die schmale Komposition. Für größere Breiten steht die breite Komposition im img-Element bereit. Die Entscheidung ist absichtlich einfach, damit sie in frischen Browserkontexten geprüft werden kann.

<picture>
  <source media="(max-width: 599px)"
          srcset="/beispiel/detail-480.png 480w,
                  /beispiel/detail-960.png 960w"
          sizes="100vw" width="480" height="600">
  <img src="/beispiel/gesamt-960.png"
       srcset="/beispiel/gesamt-480.png 480w,
               /beispiel/gesamt-960.png 960w,
               /beispiel/gesamt-1440.png 1440w"
       sizes="(max-width: 959px) 100vw, 960px"
       width="1440" height="810"
       alt="Roter Ring auf hellem Grund">
</picture>
<style>
body { margin: 0; }
picture { display: block; max-width: 960px; }
img { display: block; width: 100%; height: auto; }
</style>

Die Dateipfade sind Lernpfade. Für die isolierten Tests werden sie gezielt mit den tatsächlich vorbereiteten eigenen Dateien beantwortet. Es wird keine fremde Webseite kontaktiert. Wer das Beispiel übernimmt, benötigt passende eigene Dateien und zutreffende Pfade. Ein kopierter Verweis ohne vorhandene Bildquelle ist keine funktionierende Umsetzung.

Die schmale Komposition hat ein anderes Seitenverhältnis als die breite. Ihre Maßangaben werden deshalb passend mitgeführt. Das CSS lässt die Höhe der gewählten Darstellung folgen. Die Prüfung betrachtet nach dem tatsächlichen Laden die Elementbox und die Quelle. Sie nimmt nicht nur anhand der HTML-Schreibweise an, dass die Ausgabe bereits richtig ist.

Pixeldichte und Auswahl ohne falsche Gewissheit erklären

Ein CSS-Pixel kann auf einem Gerät durch mehrere Ausgabepixel dargestellt werden. Eine höhere Pixeldichte kann deshalb eine höher aufgelöste Quelle sinnvoll machen, ohne den Platz im Layout zu vergrößern. Die Breite einer ausgewählten Datei und die Breite des Bildes auf der Seite sind unterschiedliche Messgrößen. In einer Erklärung sollten beide ausdrücklich benannt werden.

Das Beispiel verwendet Browserbreiten von 360, 800 und 1200 CSS-Pixeln sowie Pixeldichten von eins und zwei. Jede Kombination beginnt in einem frischen Kontext. Anschließend wird currentSrc ausgelesen. Diese Eigenschaft dokumentiert die tatsächlich verwendete Quelle des Bildelements. Das Ergebnis wird als Beobachtung des geprüften Browsers festgehalten.

Es wäre ungenau, daraus eine unveränderliche Zusage für alle späteren Situationen abzuleiten. Ein Browser besitzt seinen eigenen Auswahlspielraum und kann vorhandene Ressourcen berücksichtigen. Für die fachliche Prüfung wird deshalb kontrolliert, ob die passende Kompositionsgruppe verwendet wird und das Bild korrekt geladen und dargestellt wird. Der konkrete Dateiname bleibt ein beobachtetes Ergebnis.

Die intrinsischen Dateimaße gesondert prüfen

Die Eigenschaft naturalWidth ist nicht in jeder responsiven Konstellation einfach die rohe Pixelbreite der gespeicherten Datei. Dichtebezogene Verarbeitung kann die angegebene intrinsische Größe beeinflussen. Für die Prüfung der Breitenbezeichner wird deshalb zusätzlich die tatsächliche PNG-Datei betrachtet. So werden zwei unterschiedliche Fragen nicht versehentlich über dieselbe Zahl beantwortet.

Die eine Frage lautet: Was meldet das dargestellte Bildelement über die gewählte Ressource? Die andere lautet: Wie viele Bildpunkte hat die vorbereitete Datei tatsächlich? Beide Informationen können nützlich sein. Sie müssen jedoch mit ihrer jeweiligen Bedeutung dokumentiert werden. Ein unbeschrifteter Zahlenwert in einer Tabelle wäre hier leicht missverständlich.

Prüfe auch die Höhe und das Seitenverhältnis jeder Variante. Innerhalb einer Auflösungsgruppe sollte die angekündigte Komposition erhalten bleiben. Wenn eine Datei versehentlich einen anderen Ausschnitt enthält, kann sie bei höherer Pixeldichte plötzlich andere Informationen zeigen. Dieser Fehler ist inhaltlich relevant und wird nicht allein durch einen richtigen Breitenbezeichner verhindert.

Alternativtext aus der Verwendung ableiten

Der Alternativtext steht im img-Element. Er beschreibt die wichtige Information des Bildes in seinem Zusammenhang und wird nicht für jede zusätzliche source-Zeile als eigener Text vervielfacht. Der WAI-Entscheidungsbaum zu Alternativtexten hilft bei der Einordnung von dekorativen, informativen und funktionalen Verwendungen. Die Entscheidung beginnt bei der Aufgabe des Bildes.

Im Lernfall bleibt der rote Ring in beiden Kompositionen erhalten. Der gemeinsame Alternativtext Roter Ring auf hellem Grund passt deshalb zu der erklärten Bildaufgabe. Er behauptet weder ein reales Produkt noch zusätzliche Details, die nur in einer Variante vorkommen. Für die englische Fassung wird dieser Inhalt entsprechend auf Englisch beschrieben.

Bei einem echten Ausschnitt muss diese Eignung erneut geprüft werden. Wenn ein Detail wichtige andere Informationen zeigt, kann ein einziger unveränderter Text für den geplanten Zusammenhang unzureichend sein. Vielleicht braucht es eine andere Auswahl oder eine eigene getrennte Abbildung. picture sollte nicht dazu verwendet werden, völlig verschiedene Aussagen unbemerkt hinter einem einzigen Alternativtext auszutauschen.

Was der ausgeführte Test tatsächlich zeigt

Die Browserprüfung liest den Code aus beiden Sprachfassungen aus. Die zugehörigen Dateien werden aus eigenen nativen Zeichnungen erzeugt und unter den Lernpfaden bereitgestellt. Pro Sprachfassung werden sechs Kombinationen aus Breite und Pixeldichte betrachtet. Damit werden zwölf tatsächliche Fälle dokumentiert, statt eine theoretische Auswahl lediglich als Bildschirmansicht nachzubauen.

Die erklärende Grafik verwendet die tatsächlichen geladenen Ansichten und ausgewählte beobachtete Quelldateien. Sie nennt die Testbedingungen. Die Bildflächen werden für den Artikel passend angeordnet und als Vergleich gezeigt. Ihre Größe innerhalb der Erklärung darf nicht mit der ursprünglichen Browserbreite des Tests verwechselt werden.

Häufige Fehler an ihrer Ursache untersuchen

Wenn eine unerwartet große Datei erscheint, prüfe zuerst den tatsächlichen Bildplatz und die Angaben in sizes. Vielleicht wird eine volle Breite behauptet, obwohl die Komponente schmaler ist. Vielleicht wurde eine bereits vorhandene Ressource verwendet. Die Beobachtung eines Dateinamens allein erklärt die Ursache noch nicht. Halte Umgebung und tatsächliche Ausgabe zusammen fest.

Wenn der falsche Ausschnitt erscheint, liegt die Frage eher bei Quellenreihenfolge, Medienbedingungen oder tatsächlich vorhandenen Dateien. Ein höherer Qualitätswert bei der Kompression löst dieses Problem nicht. Öffne die ausgewählte Quelle und prüfe ihren Inhalt. Eine richtig benannte Datei kann trotzdem versehentlich den falschen Bildausschnitt enthalten.

Wenn der Alternativtext unpassend ist, hilft keine weitere srcset-Variante. Dann muss die Bildaufgabe und ihre Beschreibung betrachtet werden. Ein Wort wie Bild ist meist keine ausreichende inhaltliche Erklärung eines informativen Motivs. Eine dekorative Verwendung braucht dagegen eine andere Entscheidung als eine funktionale Verlinkung. Diese Fälle werden redaktionell beurteilt und nicht anhand der größten Datei entschieden.

Redaktion und Entwicklung gemeinsam aktualisieren

Ein ausgetauschtes Motiv kann die technische Aufbereitung verändern. Vielleicht ist der bisherige mobile Ausschnitt nicht mehr geeignet. Vielleicht passt der alte Alternativtext nur zur früheren Aufnahme. Prüfe deshalb beim Bildwechsel Dateien, Ausschnitte und Beschreibung zusammen. Die technische Komponente und die redaktionelle Information gehören an dieser Stelle zu derselben Aufgabe.

Bewahre geeignete Quellen und die tatsächlich verwendeten Ausgaben nachvollziehbar auf. Wer eine neue Breite benötigt, sollte nicht aus einer stark reduzierten Kopie eine vermeintlich größere Quelle erzeugen. Die Beschreibung eines Kandidaten muss zu dessen Datei passen. Ein längerer Dateiname und ein höherer Breitenbezeichner schaffen keine zusätzlichen vorhandenen Bildinformationen.

Die Übergabe sollte außerdem die jeweiligen Verwendungen benennen. Eine Datei für eine Titelansicht ist nicht automatisch für eine technische Detailerklärung geeignet. Ein bewusster enger Ausschnitt besitzt eine andere Rolle als die vollständige Übersicht. Diese Zuordnung hilft, spätere Änderungen sinnvoll zu beurteilen, ohne jeden Bildfall erneut anhand bloßer Optik diskutieren zu müssen.

Die tatsächliche Ausgabe freigeben

Die letzte Kontrolle erfolgt mit den ausgelieferten Dateien im vorgesehenen Layout. Ein korrektes Beispiel in einer Entwicklungsnotiz genügt nicht, wenn die fertige Seite andere Maße oder Pfade verwendet. Prüfe schmale und breite Ansichten, sinnvolle Pixeldichten und die tatsächlich vorhandene Bildinformation. Dokumentiere dabei die konkreten Beobachtungen statt pauschal bessere Performance zu behaupten.

• Bildaufgabe und relevante Information sind benannt.
• Auflösungswechsel und andere Kompositionen werden unterschieden.
• Breitenbezeichner stimmen mit den tatsächlichen Dateien überein.
• sizes passt zum vorgesehenen Bildplatz.
• Die passende Kompositionsgruppe wird tatsächlich geladen.
• Seitenverhältnisse und Ausschnitte bleiben sinnvoll.
• Der Alternativtext passt zu allen verwendeten Fassungen.
• Beobachtete Quellen werden mit ihren Prüfbedingungen dokumentiert.
• Ein Bildwechsel aktualisiert technische und redaktionelle Angaben gemeinsam.
• Erklärung, Browserprüfung und reale Leistungswirkung bleiben unterscheidbar.

Eine gute responsive Bildlösung verbindet damit passende Quellen mit einer klaren Aussage. Der Browser erhält brauchbare Informationen zur Auswahl. Die Gestaltung erhält einen geeigneten Ausschnitt. Der Alternativtext erklärt die wichtige Information. Keine dieser Aufgaben wird allein durch eine besonders große Bilddatei erledigt. Die Qualität entsteht aus ihrem tatsächlich geprüften Zusammenspiel.

Grenzen und Dateigruppen gezielt gegeneinander prüfen

Eine Medienbedingung braucht einen klaren Übergang. Im Beispiel gilt die schmale Komposition bis einschließlich 599 Pixel. Bei 600 Pixeln soll die breite Gruppe verwendet werden. Diese beiden Werte werden zusätzlich zu den allgemeinen Größenfällen betrachtet. Der Test bestätigt nicht jede denkbare Browserbreite. Er untersucht gezielt die Stelle, an der die beschriebene Entscheidung wechselt.

Die Mediengrenze ist eine andere Entscheidung als die Auswahl einer Auflösung innerhalb der Gruppe. Bei 599 Pixeln kann die größere schmale Datei sinnvoll sein. Daraus wird jedoch keine breite Komposition. Bei 600 Pixeln ist die breite Gruppe zuständig, obwohl der Unterschied der Browserbreite nur ein Pixel beträgt. Diese Beobachtung zeigt, warum Dateibreite und Bildregie getrennt benannt werden müssen.

Wird die Grenze später geändert, müssen Quelle, Layoutbeschreibung und Prüffälle gemeinsam betrachtet werden. Eine gestalterische Entscheidung für eine andere schmale Ansicht kann völlig sinnvoll sein. Sie sollte aber nicht nur im CSS stattfinden, wenn die Medienbedingung im Bildbaustein unverändert einen anderen Ausschnitt auswählt. Die tatsächlich sichtbare Kombination ist die richtige Grundlage für die Kontrolle.

Eine aussagekräftige Prüfnotiz führen

Eine Prüfnotiz sollte mindestens Browserbreite, konfigurierte Pixeldichte, tatsächlich verwendete Quelle und gemessenen Bildplatz enthalten. Ergänzend werden die rohen Maße der zugehörigen Datei festgehalten. Diese Angaben erlauben, eine spätere Rückfrage konkret zu beantworten. Die Aussage das Bild war groß genug würde dagegen offenlassen, ob Dateigröße, Darstellungsfläche oder vorhandene Detailinformation gemeint ist.

Frische Kontexte helfen, einzelne Beobachtungen besser zuzuordnen. Ein zuvor bereits geladenes großes Bild kann die Beurteilung erschweren, wenn anschließend nur die Fensterbreite verändert wird. Das bedeutet nicht, dass eine normale Browsernutzung fehlerhaft wäre. Es erklärt, warum ein isolierter Test seinen Ausgangszustand bewusst festlegt. Die Prüfmethode und die tatsächliche Alltagssituation sind zu unterscheiden.

Die Lernanfragen werden gezielt aus vorbereiteten eigenen Dateien beantwortet. So lässt sich die Auswahl untersuchen, ohne fremde Dienste einzubeziehen. Aus diesem Aufbau entsteht jedoch keine verlässliche Aussage über eine öffentliche Verbindung oder Servergeschwindigkeit. Wer eine reale Ladezeit beurteilen möchte, braucht einen eigenen geeigneten Messaufbau und muss dessen Bedingungen nennen.

Schließlich gehört eine tatsächliche Sichtung zur Notiz. Eine korrekt ausgewählte Quelle kann eine fehlerhafte Zeichnung, einen unpassenden Ausschnitt oder eine kaum erkennbare Beschriftung enthalten. Technische Auswahl und inhaltliche Eignung sind verschiedene Fragen. Die Erklärung hält beide zusammen, ohne das Ergebnis einer einzelnen Kontrolle als Freigabe sämtlicher Aspekte auszugeben.

Für eine spätere Übergabe bleiben die Bildaufgabe und die Ausgangszeichnung deshalb zusammen mit den Varianten auffindbar. Eine neue Person kann dadurch erkennen, warum die schmale Fassung anders komponiert ist und welche Information erhalten bleiben soll. Diese Begründung ist dauerhafter als eine zufällig beobachtete Auswahl eines einzelnen Dateinamens.

Quellen und technischer Stand

Quellenstand: 9. November 2026. Die verlinkten Primärquellen von MDN, WAI und WHATWG wurden tatsächlich aufgerufen. Zeichnung, Bildgrößen und Layout sind eigene Lernparameter. Die Tests dokumentieren eine isolierte Browserauswahl. Sie behaupten keine öffentliche Ladezeitmessung, keinen realen Produktnachweis und keine vollständige Prüfung aller assistiven Technologien.