Ratgeber: Bei responsiven Bildern die wirklich ausgewählte Datei kontrollieren

Eine Bildadresse kann mehrere Varianten haben

Eine responsive Webseite bietet für dasselbe Motiv unterschiedliche Bilddateien an. Ein Blick auf das src-Attribut zeigt dann nicht zwingend die Variante, die der Browser ausgewählt hat. Nach der MDN-Dokumentation liefert currentSrc die vollständige Adresse der ausgewählten Bildressource, auch bei srcset. Dieser Wert beweist für sich allein allerdings keinen erfolgreichen Ladevorgang. Der Ratgeber erklärt diese bestehende Eigenschaft anhand einer eigenen Prüfsituation; die Quelle wurde am 21. Oktober 2026 gelesen.

Ein Motiv mit klar erkennbaren Ausschnitten

Stell dir eine Anleitung zur Reparatur eines Stuhls vor. Für kleine Bildschirme gibt es einen nahen Ausschnitt der Verbindung, für große einen weiteren Blick auf das Möbel. Notiere vor der technischen Prüfung, was auf beiden Varianten erkennbar bleiben soll. Die Handposition, das Werkzeug und die betreffende Verbindung sind wichtiger als ein möglichst großer Dateiname oder eine hohe Pixelzahl. Eine technisch geladene Datei kann trotzdem den falschen Arbeitsschritt zeigen.

Öffne die Seite in einer schmalen und einer breiten Ansicht. Lies jeweils die ausgewählte Adresse über currentSrc aus und ordne sie dem vorgesehenen Motiv zu. Halte außerdem Bildschirmbreite und Geräteskalierung fest, damit das Ergebnis später nachvollziehbar bleibt. Aus zwei unterschiedlichen Dateinamen allein folgt noch kein Fehler: Genau diese Auswahl kann beabsichtigt sein.

Auswahl, Laden und Darstellung getrennt beobachten

Prüfe nach der Auswahl, ob das Bild tatsächlich decodiert und sichtbar dargestellt wird. In einer Browserkontrolle ist eine positive natürliche Bildbreite ein hilfreicher weiterer Hinweis; zusätzlich bleibt die Sichtprüfung erforderlich. Ein nachträglich geladenes Bild kann außerhalb des momentan sichtbaren Ausschnitts liegen. Scrolle deshalb zur betreffenden Stelle und kontrolliere Beschriftung, Alternativtext und den sichtbaren Bildausschnitt gemeinsam.

Ergänze einen absichtlich fehlenden Testpfad in einer isolierten Entwicklungsansicht. Damit wird deutlich, dass eine gesetzte ausgewählte Adresse nicht automatisch Erfolg bedeutet. Der Fehlerfall sollte einen sinnvollen Text oder eine ruhige Ersatzdarstellung hinterlassen und nicht die gesamte Anleitung unbrauchbar machen.

Das Ergebnis richtig berichten

Schreibe in den Abnahmebericht nicht nur „Bild geprüft“. Nenne die Seite, die ausgewählte Datei, den geprüften Viewport und die Beobachtung zum Motiv. Bei einem späteren Austausch lässt sich so erkennen, ob eine andere Variante oder tatsächlich ein anderer Inhalt ausgeliefert wurde. Behaupte aus einer einzigen Geräteprobe keine richtige Darstellung auf sämtlichen Browsern. Eine kleine, nachvollziehbare Matrix aus real beobachteten Ansichten ist wesentlich hilfreicher als eine unbestimmte Vollständigkeitszusage.