Titelbild dieses Eintrags

Das srcset Attribut – Responsive Images

Responsives Webdesign wird uns mit Hilfe von CSS und Frameworks immer einfacher gemacht, nur diese blöden Bilder wollen meist nicht so. Zwar passen sich pixelbasierte Bilder (wie JPEG, PNG, GIF…) der gewünschten Größe an, doch bleibt die Auflösung dabei immer gleich, was leider schnell zu hässlichen Ergebnissen führen kann.

Bisherige Lösungen

Hochauflösende Bilder

Einfach überall hochauflösende Bilder zu verwenden ist zwar der einfachste Weg, doch gibt es ein paar Punkte, die dagegen sprechen.

Denn mittlerweile werden Webseiten häufiger von mobilen Endgeräten als von klassischen Desktop-Computern aufgerufen. Es würde Deine Nutzer stark verärgern, wenn jedes ach so kleine Bild in Wahrheit eine Full-HD 5mb große Datei wäre, die nicht nur lange lädt, sondern auch noch das Datenvolumen unnötig belastet. Außerdem wird gemunkelt, dass das auch aus der SEO-Sicht eine schlechte Idee ist, übergroße Bilder auszuliefern.

JavaScript

Mit Hilfe verschiedener Scriptchen oder Libraries ist es möglich, die Bildschirmgrößen der Anwender auszulesen und jeweils die richtigen Bilder auszuliefern. Doch hast Du mit dieser Lösung Scripte, die stark in die Anzeige eingreifen und vielleicht sogar das Benutzererlebnis beeinträchtigen, sobald JavaScript im Browser deaktiviert ist.

CSS

Ähnlich geht das auch mit CSS. Einfach mehrere Bilder in verschiedenen Auflösungen einbinden, aber nur eines davon, mit Hilfe von Media-Queries, anzeigen lassen. Obwohl auch diese Lösung suboptimal ist, da der Browser im Hintergrund alle angegebenen Bilder herunterlädt und somit für unnötig viel Datenverkehr sorgt. Benutzer mit wenig Datenvolumen wird diese Methode nicht erfreuen.

Richtige Lösung

Mit HTML5 wurden ein paar neue Attribute für das img-Element eingeführt. Die wichtigen hierbei sind srcset und sizes.

Das srcset-Attribut

Im Attribut srcset kannst Du mehrere Bildquellen angeben, von denen sich der Browser die (hoffentlich) richtige auswählt. Denn neben der einfachen Angabe der Quelle, wird auch noch ein weiterer Wert verlangt, der angibt, in welchem Fall die jeweilige Quelle die richtige ist.

Dieser Deskriptor der Quellen kann in zwei verschiedenen Formen angegeben werden. Einmal mit x und einmal mit w. Die Werte mit x stehen für die Pixeldichte des Bildschirms, wobei w für die gegebene Bildbreite steht.

Pixeldichte

Mit dem x-Deskriptor weist Du Quellen einer bestimmten Pixeldichte zu. Diese Angaben werden z.B. von Smartphones verwendet, da diese für gewöhnlich eine höhere Pixeldichte als normale Monitore haben und dementsprechend auch Bilder mit einer höheren Pixeldichte bzw. Auflösung für eine gute Darstellung brauchen.

Die Lösung hierfür sieht wie folgt aus.

Hier siehst Du, dass für Geräte mit einer einfachen Pixeldichte, ein Bild mit 200×200 Pixel vorgesehen ist. Dagegen ist für ein Gerät mit einer doppelt so hohen Pixeldichte ein 400×400 Pixel großen Bild vorgesehen. Neben Ganzzahlen kannst Du sogar Dezimalzahlen wie 1.5x angeben. Das src-Attribut ist in diesem Fall der Fallback und wird als 1x behandelt.

Damit die verschieden großen Bilder nicht dein Layout sprengen, rechnet der Browser automatisch deine Angaben gegen. Das heißt, dass deine Bilder auf verschiedenen Monitoren mit verschiedenen Pixeldichten trotzdem gleich groß dargestellt werden.

Mit dem w-Deskriptor gibst Du dagegen an, welche Breite die jeweilige Quelle hat. Somit ist der Browser in der Lage, je nachdem wie viel Platz das Elternelement bietet, die richtige Quelle zu wählen.

Wenn das Bild in diesem Fall nun in einem 300px breiten Element eingebunden ist, wird der Browser also das 400w Bild auswählen, da das 200w Bild eine zu geringe Auflösung bietet.

Egal ob x oder w, Du kannst sogar komplett unterschiedliche Bildquellen angeben. Dies führt dazu, dass in verschiedenen Fällen völlig unterschiedliche Bilder zu sehen sind. Ist nicht zu empfehlen, aber theoretisch machbar.

Das sizes-Attribut

Das Attribute sizes funktioniert ausschließlich im Zusammenspiel mit srcset und dann auch nur, wenn w-Deskriptoren verwendet werden.

In sizes kannst Du angeben, bei welcher Bedingung das Bild welche Breite haben soll. Das ganze funktioniert mit Media-Queries und simplen Breitenangaben.

Somit kannst Du für jedes Bild individuelle Regeln festlegen, wie es sich in verschiedenen Situationen zu verhalten hat.

Sonstiges

Solange Du in keinem uralten Browser unterwegs bist und alle Angaben richtig gemacht hast, sollte es funktionieren. Bedenke aber auch, dass Veränderungen dank dem Browser-Cache, nur nach oben gehen. Damit will ich sagen, dass wenn Du verschiedene Auflösungen angibst, der Browser dir aber schon das Bild mit der höchsten Auflösung anzeigt, dann wird er kein schlechteres Bild mehr nachladen. Wenn Du dagegen klein anfängst und dein Browsefenster responsiv immer größer ziehst, wirst Du sehen, dass auch die anderen Bilder nachgeladen werden.