Foto: Ed Gregory / stokpic.com (Copyright: CC0)
Man kann festhalten, dass sich im Zusammenhang mit Bildern und Grafiken bei mobilen und hochauflösenden Geräten vielfältige Probleme ergeben. Allerdings finden sich im Netz inzwischen zahlreiche Lösungsansätze. Und auch die W3C arbeitet an entsprechenden HTML Erweiterungen (vgl. W3C 2014i, 2013c). Im Folgenden werden einige dieser Techniken vorgestellt.
Neue Möglichkeiten mit Cascading Style Sheets
Insbesondere bei Button-Grafiken und Layout-Elementen lässt sich dank CSS 3 inzwischen vollständig auf Grafiken verzichten. Während man früher bereits bei einem einfarbigen rechteckigen Hintergrund mit abgerundeten Ecken kaum um die Einbindung von Grafiken herumkam, lässt sich dies inzwischen bequem mit der CSS Angabe border-radius realisieren. Hilfreich sind auch die Angaben text-shadow, box-shadow oder opacity (vgl. Shupp 2012).
Ebenfalls praktisch, allerdings noch nicht von allen Browsern sicher unterstützt, ist die linear-gradient bzw. radial-gradient Angabe, mittels der sich auch komplexere Hintergrundverläufe ohne das Einbinden von Bildern umsetzen lassen (vgl. W3C 2014c) [vgl. Kriterium 12].
Vektorgrafiken, Icon-Fonts und das SVG-Format
Eine elegante Möglichkeit, den sich aus unterschiedlichen Auflösungen und Displaygrößen ergebenden Problemen zu entgegnen, sind vektorbasierte Grafiken. Im Unterschied zu den fest auf ein Raster gelegten Pixeln einer Bitmap-Grafik werden Vektorgrafiken durch mathematische Formeln beschrieben. Dies hat den entscheidenden Vorteil, dass sie sich beliebig ohne jegliche Qualitätsverluste skalieren lassen und dabei trotzdem meist nur wenige KB groß sind. Allerdings eignen sich Vektorgrafiken nicht für Fotografien oder komplexe Bilder. Ihr Einsatz beschränkt sich auf Formen aus Kurven und Füllungen, die sich mathematisch gut beschreiben lassen (vgl. Zillgens 2013, S. 226–230; Borowska 2013).
Unterschied Bitmap- und Vektorgrafiken (vgl. Borowska 2013)
Die W3C sieht für vektorbasierte Bilder im Web die Scalable Vector Graphics (SVG) vor. SVG beschreibt zweidimensionale Grafiken mittels XML. Ein gelbes Rechteck ließe sich beispielsweise folgendermaßen zeichnen (vgl. W3C 2014h, 2014e):
Das in HTML5 eingeführte canvas-Element ist hingegen nicht vektor- sondern pixelbasiert. Es wird verwendet, um mittels JavaScript Grafiken zu zeichnen oder Animationen zu erstellen (vgl. Microsoft.com 2014a).
Eine weitere Möglichkeit vektorbasierte Grafiken im Web zu nutzen sind sog. Icon Fonts. Anstatt aus Buchstaben bestehen Icon Fonts aus einem Sammelsurium beliebig skalierbarer Grafiken. Wie eine normale Schriftart auch, lassen sich auch Icon Font Grafiken mittels CSS beeinflussen und somit beispielsweise mit Schatten versehen, in ihrer Farbe ändern oder im Zusammenhang mit Pseudoklassen(:hover, :active usw.) nutzen. Eine sehr beliebte Icon Font ist die von Webdeveloper Dave Gandy kreierte „FontAwesome“ (vgl. FontAwesome 2013; Bradley 2012).
Serverseitige Bildweiche am Beispiel von Adaptive Images
CSS 3 und Vektorgrafiken sind nur für simple Grafiken und Icons geeignet. Um auch komplexe Grafiken und Fotos passend zur Gerätegröße und Auflösung auszuliefern, hat der britische Programmierer Matt Wilcox Adaptive Images entwickelt. Eine Kombination aus server- und clientseitigen Abfragen soll dafür sorgen, dass stets das für die jeweilige Bildschirmbreite passende Bildformat ausgelesen wird. Auch die Pixeldichte des jeweiligen Devices kann berücksichtigt werden. Wird eine entsprechend präparierte Website aufgerufen, so ermittelt Adaptive Images die Bildschirmauflösung des Besuchers und verkleinert die auszuliefernden Bilder on-the-fly. Dank eines integrierten Caches müssen die verschiedenen Bildergrößen nicht jedes Mal erneut erstellt werden. Der Vorteil liegt darin, dass am eigentlichen HTML-Code nichts geändert werden und der Seitenbetreiber nicht händisch dafür sorgen muss, verschiedene Bildergrößen bereitzuhalten. Probleme wird das Tool jedoch bei großen Websites mit umfangreichen Bilddatenbanken machen – zumal diese ihre Bilddateien i.d.R. ohnehin in mehreren Formaten bereithalten (vgl. Wilcox 2013; Zillgens 2013, S. 198–202).
Clientseitige Bildweiche am Beispiel von Responsive Enhance
JavaScript bietet weitere Möglichkeiten, Bilder in einem für das jeweilige Gerät passenden Format auszuliefern. Das OpenSource Tool Responsive Enhance beruht auf dem Mobile First Konzept. Standardmäßig wird als Quelle bei Bildern stets der Pfad zur kleinsten, mobiloptimierten Bildvariante angegeben. Daneben werden jedoch zusätzlich Quellen zu weiteren, größeren Bildern angegeben, die das kleinere Bild ersetzen, sobald die Website mit einem größeren Display betrachtet wird (vgl. Emerson 2012). Nachteilig ist dabei, dass auf größeren Geräten jedes Bild zweimal geladen wird – erst die kleine Variante und anschließend die größere. Gleichzeitig hat dies jedoch auch den Vorteil, dass sich die Seite subjektiv schneller aufbaut, da die kleinen Bilder nur eine geringe Dateigröße besitzen und schnell angezeigt werden können (vgl. Zillgens 2013, S. 202–206).
Einen ähnlichen Ansatz verfolgt auch die auf der JavaScript Bibliothek jQuery basierende Erweiterung jQuery Picture. Der Vorteil dieses Tools liegt darin, dass es bereits die künftig zu diesem Zweck vorgesehenen HTML5 Elemente picture und figure nutzt. Wenn in Zukunft sämtliche Browser das picture Element unterstützen, genügt es das Plug-in wieder zu entfernen und die Auswahl der korrekten Bildquelldatei der Browser-Engine zu überlassen (vgl. Dunne 2013). Es gibt unzählige weitere JavaScript-Lösungen, die allesamt auf demselben Ansatz beruhen (vgl. Smus 2012).
HTML5 schafft Abhilfe
Hintergrundbilder lassen sich im CSS mittels der bereits beschriebenen Media Queries austauschen:
Darüber hinaus hält der HTML5 Standard einige weitere interessante Entwicklungen parat. Das srcset Attribut kann dem img Element zusätzlich zur src Angabe zugewiesen werden. Anhand zusätzlicher Angaben zur Pixeldichte oder Mindestauflösung weiß der Browser dann, welche Bilddatei er aus einem ganzen „Set“ von Bildern ausliefern muss. Nachfolgendes Beispiel liefert bei Browsern mit einer Auflösung von 1dppx image-1x.png aus, bei 2dppx würde image-2x.png angezeigt. Unterstützt der Browser die srcset Angabe nicht, wird schlichtweg image-src.png angezeigt (vgl. W3C 2014i):
Das picture Element bietet noch umfassende Möglichkeiten, da es Media Queries unterstützt und damit auf deren vollen Funktionsumfang zurückgreifen kann. Ähnlich wie beim srcset Attribut werden im HTML-Code mehrere alternative Bilddateien definiert und der Browser „entscheidet“ welche Datei letztlich geladen wird (vgl. W3C 2013c):
Höhere Bildkompression als Alternative zu Bildweichen
Das Bereithalten mehrerer Bildvarianten und das Einrichten client- oder serverseitiger Workarounds ist mit zusätzlichem Aufwand verbunden, der wohl nicht von jedem Seitenbetreiber in Kauf genommen wird. Um Nutzern mit hochauflösenden Displays trotzdem eine passable Nutzererfahrung zu bieten, sollten Bilder eher stark komprimiert, anstatt in niedriger Auflösung abgespeichert werden. Verschiedene Messreihen etablierter Webdesigner bestätigen dies. Noch stärkere Komprimierung bei gleichzeitig geringerem Qualitätsverlust bietet das Speichern im WebP-Format. Leider wird dieses noch nicht von allen Browsern unterstützt. In Fachkreisen wird in diesem Kontext auch das Speichern von Grafiken als JPEG 2000, Progressive JPEG, Progressive PNG oder GIF diskutiert. Progressive Bilder haben den Vorteil, dass sie unmittelbar in reduzierter Qualität erscheinen. In der Theorie sollte der Browser dann solange Bilddaten nachladen, bis das Bild die auf dem jeweiligen Endgerät bestmögliche Qualität erreicht hat. Leider funktioniert auch dies nicht immer einwandfrei und kann insbesondere bei mobilen Datenverbindungen zu Schwierigkeiten mit der Latenzzeit führen (vgl. Smus 2012).
