Responsive Images: <picture> oder Picture?
Kommentare

Da immer mehr Nutzer Websites von mobilen Geräten aus ansteuern, ist das Einbinden von Responsive Images umso wichtiger, damit Bilder trotz kleiner Displaygrößen oder schlechter Mobilfunkverbindungen

Da immer mehr Nutzer Websites von mobilen Geräten aus ansteuern, ist das Einbinden von Responsive Images umso wichtiger, damit Bilder trotz kleiner Displaygrößen oder schlechter Mobilfunkverbindungen geladen werden können. Das Problem, Bilder in ein Responsive Design einzubinden, kann auf unterschiedliche Weisen gelöst werden. Das -Element wird von immer mehr Browsern unterstützt und wird somit immer beliebter, um Bilder responsiv einzubinden. Doch ist das -Element tatsächlich immer die einfachste und eleganteste Lösung? Jason Grigsby erklärt, warum man meistens auf die Nutzung von verzichten sollte. 

Picture-Spezifikation oder -Element?

Bilder sollten als Responsive Images in Websites eingebunden werden. Das lässt sich zum Beispiel mit dem -Element durchführen. Doch ist nicht gleich Picture. Die Picture-Spezifikation umfasst mehr, als das reine -Element, zum Beispiel die Attribute sizes und srcset – und diese können auch ganz ohne das -Element benutzt werden.

Ein Unterschied zwischen der Nutzung des -Elements und der Picture-Spezifikation ist, dass das -Element dem Browser genau vorgibt, welches Bild geladen wird. Mit den Attributen scrset und sizes hingegen wird dem Browser die Entscheidung überlassen, welche Bildquelle für die Darstellung geeignet ist –etwa anhand der Bandbreite der Internetverbindung – weil die Attribute dem Browser verschiedene Optionen für unterschiedliche Display-Auflösungen zur Verfügung stellen.

Wann man das -Element benutzen sollte

Im Gegensatz zum -Element ist die Picture-Spezifikation also deutlich flexibler bei der Einbindung von Responsive Images. Da stellt sich natürlich die Frage, in welchen Fällen das -Element überhaupt genutzt werden sollte.

Die zwei gebräuchlichsten Fälle für Responsive Images sind das Resolution Switching und die Art Direction. Beim Resolution Switching werden unterschiedliche Quellen des gleichen Bildes ausgewählt, weil für verschiedene Displaygrößen und Pixeldichten unterschiedliche Auflösungen benötigt werden. Dies lässt sich leichter mit der Anwendung der Attribute scrset und sizes auf ein -Element erstellen, als mit dem -Element.

Das -Element ist vor allem für die Nutzung von Art Direction – also dem Verändern des Inhalts eines Bildes, etwa indem Bilder auf kleinen Displays anders zurechtgeschnitten werden – geeignet, weil dem Browser in jedem Fall vorgegeben wird, welches Bild dargestellt wird.

Natürlich lässt sich das -Element auch beim Resolution Switching einsetzen. Jason Grigsby verweist allerdings darauf, dass damit dem Nutzer häufig kein Gefallen getan wird, weil Bilder trotz eines Responsive Designs nicht richtig angezeigt werden. Tatsächlich kann der falsche Einsatz des -Elements die Zukunft des Webs beeinflussen:

If we create thousands of web pages that use the element for resolution switching, we doom ourselves to having to specify every single image needed

Bilder responsiv zu machen, ist also weiterhin eine wichtige Aufgabe für Entwickler. Allerdings müssen sie sich im Klaren sein, welche Methode die richtige für das eigene Projekt ist und dementsprechend handeln – bevor das Netz mit sogenannten Responsive Images überschwemmt wird, die tatsächlich nur wenig responsiv sind. 

Aufmacherbild: Old picture frame hanging on clothesline on wood background. von Shutterstock / Urheberrecht: Theeradech Sanin

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -