Responsive Bilder mit dem srcset-Attribut und dem picture-Element
Kommentare

Den größten Anteil beim Laden von Webseiten nimmt das Bildmaterial in Anspruch, zumal großformatige Fotos und Slideshows bei modernen Webseiten keine Seltenheit mehr darstellen. Angesichts der Bedeutung von mobilem Traffic wird die Ladezeitenoptimierung immer wichtiger.

Abhilfe schaffen das neue srcset-Attribut und das picture-Element. Wie man sie einsetzt, um responsive Bilder zu generieren, erklärt Jens Grochtdreis im Beitrag „Der neue Standard für responsive Bilder“ auf dem Webkrauts-Blog.

Herausforderungen und Anforderungen an die „responsive Technik“

Zuerst einmal sollte man sich der verschiedenen Herausforderungen bzw. Anforderungen an die zu generierende Technik bewusst werden. Dass man unterschiedliche Bilder für unterschiedliche Bildschirmgrößen zur Verfügung stellen kann, ist nichts Neues. Ebenso ist es natürlich wünschenswert, die Bandbreite der mobilen Devices zu ermitteln und infolge einer schlechten Datenverbindung ein kleineres Bild herunterzuladen, um endlos dauernde Downloadvorgänge zu vermeiden. Der dritte Punkt wird hingegen gerne mal übersehen: Es ist wichtig, auch das Motiv des Bildes miteinzubeziehen. Denn bei einer einfachen Verkleinerung des Gesamtbildes würden manche, kleinere Motive womöglich nur noch wenig oder gar nicht mehr zu erkennen sein. Daher empfiehlt es sich bei kleineren Motiven, an diese heranzuzoomen. Zuletzt werden für hochauflösende Bildschirme wie die Retina-Displays von Apple Bilddaten mit einer entsprechend höheren Auflösung benötigt.

Umsetzung einer responsiven Bildselektion

Mittlerweile existieren über 20 Vorschläge zur Umsetzung von responsiven Bildern; jeder einzelne mit seinen individuellen Vor- und Nachteilen. Herauskristallisiert hat sich zuletzt die kombinierte Verwendung des srcset-Attributs und des picture-Elements. Im Chrome-Browser wird das srcset-Attribut beispielsweise seit der Version 34 unterstützt.

Das srcset-Attribut enthält kommagetrennt mehrere Bildquellen, die sich in der Größe der Bilder unterscheiden, und liefert zusätzlich einen Faktor zur Berechnung der jeweiligen Bildauflösung. Im srcset-Attribut werden Breite (w) und Höhe (h) des Bildschirms angegeben und das dazu passende Bild bereitgestellt. Umschlossen sind die srcset-Attribute vom picture-Element, das außerdem in einem normalen img-Tag ein Fallbackbild zur Verfügung stellt, falls der Browser picture und somit auch srcset nicht erkennt. Eine verlässliche Methode zur Ermittlung der Netzwerkgeschwindigkeit, um anhand der verfügbaren Datenrate ein geeignetes Bild zu ermitteln, wurde bislang nicht gefunden.

Browserunterstützung und Probleme

Ältere Browser unterstützen die neuen Techniken (srcset und picture) nicht. Um eine flächendeckende Nutzung responsiver Bilder zu erzielen, dürften die Internet-Explorer-Versionen bis einschließlich Version 11 nicht mehr auf dem Markt sein. Zur Erkennung der neuen Techniken kann ein Polyfill, zum Beispiel „Picturefill“, verwendet werden. Dieses Polyfill muss lediglich möglichst früh im HTML-Dokument verlinkt werden und schon können damit die responsiven Bilder geladen werden.

So lautet wenigstens die theoretische Vorgehensweise; ganz so einfach scheint es – zumindest aus Sicht der Anwender – nicht zu sein. Die Usergemeinde ist sich uneinig darüber, ob das srcset-Attribut und das picture-Element die Allheilmethode für responsive Bilder darstellen. Einige User empfehlen, das srcset-Attribut gänzlich wegzulassen und folglich einen zwar invaliden Code, aber ein schnelleres Seitenladen zu erzielen. Andere wiederum sprechen sich dafür aus, Polyfill nicht zu verwenden, dafür jedoch das srcset-Attribut einzusetzen. Diskutiert wird auch die alte Technik der Content Negotiation, bei welcher der Server aufgrund der Browserpräferenzen festlegt, welche Inhalte er liefert.

Weitere Pros und Contras zur Verwendung des picture-Elements gibt’s im Beitrag „Responsive Images: oder Picture?„.

Aufmacherbild: responsive web design via Shutterstock / Urheberrecht: moham’ed

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -