Brille neben Zeitung und Kaffeeetasse

Responsive Images

von Daniel Eicher

Geometrische Figuren auf Papier mit Raster

Unser Blogbeitrag vom 17. November 2016 erklärt den Nutzen und die Bedeutung von Responsive Design. Dank Responsive Design sollte sich die Darstellung der selben Website dynamisch aufgrund des benutzen Endgerätes anpassen. Das Ziel ist somit eine adaptive und optimale Darstellung auf Displays von Desktop-PCs, Tablets und Smartphones. Responsive Design geht aber über eine dynamische Layoutanpassungen hinaus. Eine interessante Herausforderung ist z.B. die Verwendung von Grafiken und Fotos auf Displays mit unterschiedlicher Auflösung und Pixeldichte.

Klären wir aber doch zuerst den Begriff Pixel: Betrachten wir unsere Beispielgrafik in Form eines simplen grünes Kreises und vergrössern einen Teil davon (Abbildung 1). Wir erkennen dank der Vergrösserung einen Raster. Ein Pixel ist nun ein einzelnes quadratisches Rasterelement und besitzt einen eigenen Farbwert. Wir erkennen so auch sehr schön, dass die vermeintlichen Rundung durch Farbverläufe simuliert wird.

Beispielgrafik (original und vergrössert) auf einen normalen Display
Abbildung 1: Beispielgrafik (original und vergrössert) auf einen normalen Display

Wieviele Pixels nun ein Display beinhaltet, wird mit der Auflösung angegeben. Ein Bildschirm mit 1920 x 1080 Pixels (Breite x Höhe) beinhaltet 2'073'600 Pixels. Das alleine sagt aber noch nichts aus, wie klein und dicht diese Pixels zueinander sind. Dies wird mit der Kennzahl ppi (Pixels per Inch) angegeben. Für deren Berechnung werden nebst der horizontalen und vertikalen Anzahl Pixels auch noch die diagonale Länge des Bildschirms in Zoll benötigt.

ppi ist also ein höchst dynamischer Wert. Schauen wir uns doch mal die ppi-Werte von einer paar typischen Displays an:

Gerät Auflösung ppi
15" MacBookPro 2015 (Retina Display) 2560 x 1600 Pixels 227
BenQ XL2430T 2560 x 1440 Pixels 110
Dell 22 Monitor P2217 1680 x 1050 Pixels 90
iPhone 7 Plus 1920 x 1080 Pixels 401


Daraus kann man folgende Erkenntnis ableiten:

Mobile Endgeräte (iPhone und Huawei) haben in der Regel eine wesentliche höhere Pixeldichte als herkömmliche Monitore oder selbst als hochauflösende Displays wie beim MacBookPro. Die Erklärung dafür ist einfach: Die Anzeigefläche ist sehr viel kleiner und die Distanz zwischen Bildschirm und Auge geringer. Eine höhere Pixeldichte erlaubt eine potentiell bessere Darstellung.

Bedeutung für Responsive Design

Früher galt der Grundsatz, dass ein physischer Pixel eines Displays genau einem Pixel eines Bildes oder Grafik entspricht (wie in Abbildung 1). Wenn wir die selbe Grafik auf einem Display mit hohem ppi-Wert anzeigen, müsste diese somit kleiner dargestellt werden, als auf einem Display mit niedrigem ppi-Wert. Das wäre aber über für die Benutzerfreundlich äusserst abträglich und genau deshalb können sich die hochauflösenden Displays auch nicht mehr an diesen Grundsatz halten. Die korrekte Einstellung vorausgesetzt, skaliert die Grafikkarte alle Elemente bezüglich Länge und Breite hoch. Durch diese Skalierung bleiben z.B. Symbole und andere Bedienelemente in etwa gleich gross und damit bedienbar, unabhängig der Auflösung.

Natürlich werden auch Website-Elemente in diesem Fall hochskaliert, so dass die Pixelbreite und -höhe der Seitenelemente beim Design unverändert eingegeben werden können. Aufgrund dieser Skalierung muss deshalb aber nun zwischen physischen Display-Pixels und CSS-Pixels unterschieden werden. Auf hochauflösenden Displays werden mehrere Display-Pixel für die Darstellung eines CSS-Pixels angezeigt. Wichtig ist aber dabei, dass ein Display-Pixel weiterhin das kleinste Element einer Grafik mit einem eigenen Farbwert ist. Nutzt eine Grafik nun dies nicht aus, wird es durch die Skalierung auf hochauflösenden Displays unscharf und pixelig angezeigt. Für ein optimales Nutzererlebnis ist das natürlich suboptimal und um dies zu vermeiden, werden hier zwei Lösungsansätze vorgestellt, die ich selber relativ häufig verwende.

Downsampling-Methode

Die einfachste Methode wäre, die selbe Grafik z.B. mit 200 Pixel Breite und Höhe zu erstellen und dann als Bildelement auf der Website weiterhin mit 100 x 100 Pixel (CSS-Pixels!) einzufügen. Wird nun die Grafik im Browser hochskaliert, werden die 200 Pixels in Breite und Höhe genutzt und dadurch verschwindet auf hochauflösenden Displays die Unschärfe.

Diese Downsampling-Methode ist ein pragmatischer Ansatz - allerdings mit einer entscheidenden Schwäche: Die Abmessung und damit auch die Dateigrösse sind für normale Displays unnötig zu gross. Im Falle unseres einfachen Grafik mag dies nicht ins Gewicht fallen, bei komplexeren Elementen aber kann der Unterschied schnell markant sein.

<img src="kreis@2.png" alt="Kreis" style="width:100px; height:100px;">

Unterschiedliche Versionen mit srcset-Attribut

Die Verwendung von unterschiedlichen Bildern, die je nach Display zur Anwendung kommen, wäre also die Lösung unseres Problems. Genau dies erlaubt das srcset-Attribut, welches unter anderem auch im img-Tag verwendet werden kann. Mit dem srcset-Attribut werden Grafikversionen angegeben, die der Browser je nach angegebenen Bedingungen dann wählt.

Bezüglich Browserkompatibilität sei vorab erwähnt, dass der IE11 und frühere Versionen srcset nicht unterstützen. Edge, Firefox, Chrome, Safari, Opera, iOS Safari unterstützen das Attribut.

Aber schauen wir uns mal folgenden HTML-Code an:

<img src="kreis.png" srcset="kreis.png 1x, kreis@2x.png 2x, kreis@3x.png 3x" alt="Kreis" style="width:100px; height:100px;">

Der x-Wert (1x, 2x, 3x) gibt dabei eine Aussage, wieviele Display-Pixels in einem CSS-Pixel infolge der Hochskalierung verwendet werden.

  • 1x normale Bildschirmauflösung
  • 2x Displays mit 2 Displaypixels in einem CSS-Pixel
  • 3x Displays mit 3 Displaypixels in einem CSS-Pixel

Wenn wir nun unser Kreisbild wieder nehmen, sehen wir, dass kreis.png bei einem normalen Display angezeigt wird, kreis@2.png bei einem hochauflösenden Display mit doppelter Pixeldichte wie beispielsweise auf dem Retina-Display.

Im srcset-Attribut kann man alternativ zum x-Wert einen w-Wert angeben. Der w-Wert beschreibt die Breite des Bildes in Anzahl Pixels. Unterschreitet der Viewport des Browsers den w-Wert, wird das dort angegebene Bild geladen.

Darauf gehe ich in diesem Beitrag nicht mehr näher ein. Genauso wenig auf das sizes-Attribut, welches definiert, wie breit das Bild angezeigt werden soll, wenn eine bestimmt Bedingung erfüllt wird.

Fazit

Die oben beschriebenen Methoden sind bewusst einfach gehalten und bilden natürlich auch nicht die ganze Bandbreite der Möglichkeiten von Responsive Images ab. Wer sich verstärkt über das Thema informieren will, findet z.B. im Blog kulturbanause.de eine vertiefte Beschreibung sowie auch eine gute Erklärung von Art Direction und dem Picture-Element, dass die Adaption von Bildern noch ein ganzes Stück weiterführt.

Wichtig scheint mir aber die Erkenntnis, dass Responsive Design nicht einfach nur eine dynamische Layoutanpassung der Website ist, sondern auch eine völlig andere Herangehensweise von Bildern bedingt.

Möchten Sie mehr erfahren?

Haben Sie Fragen oder Anmerkungen zu Responisve Images? Dann freuen wir uns auf Ihren Kommentar oder nehmen Sie doch gleich direkt mit uns Kontakt auf. Als auf Online Marketing spezialisierte Agentur freuen wir uns mit Ihnen in Kontakt zu treten.

Zurück

Einen Kommentar schreiben

Was ist die Summe aus 7 und 4?