Hochauflösende Bilder auf Webseiten einbinden

Bild

Während klassische Desktop-Monitore in den letzten Jahren kaum an Auflösung hinzugewonnen haben, sind gerade Tablets und Smartphone mit ihren hochauflösenden Bildschirmen die „Treiber“ in der technischen Weiterentwicklung von Displays. Herkömmliche Desktop-Monitore haben meist eine Auflösung von ~72-100 ppi (Erklärung zu Pixeldichte auf Wikipedia). Tablets und Smartphones hingegen haben oft eine mehr als doppelt so hohe Pixeldichte, also 250 – 350 ppi.
Derart hochaufgelöste Displays stellen natürlich eine besondere Herausforderung für die visuelle Gestaltung und Darstellung einer Webseite dar. In einem meiner letzten Beiträge bin ich auf die Möglichkeit eingegangen, Grafiken die sonst als PNG oder GIF ausgeliefert werden, durch moderne, vektorbasierte Grafiken im SVG-Format zu ersetzen. In diesem Blogeintrag werde ich mich mit der Auslieferung von hochauflösenden Grafiken und Bildern beschäftigen, die wegen ihrer Beschaffenheit nicht als Vektorgrafik ausgeliefert werden können.

Warum keine Vektoren?

Natürlich macht der Einsatz von vektorbasierten Grafiken überall dort Sinn, wo bereits das Ausgangsmaterial vektorbasiert ist. Diest ist vor allem bei Icons, Logos und anderen, einfachen Grafiken der Fall die meist in Vektorprogrammen wie z.B. Adobe Illustrator erstellt werden.
Daneben gibt es aber viele visuelle Elemente einer Webseite, die nicht oder nur schwer als Vektoren bereitgestellt werden können. Dazu zählen aufwendige Grafiken und natürlich vor allem Fotos und Bilder.
Google liefert statistische Daten, die zeigen wie wichtig grafische Inhalte auf Webseiten geworden sind. Durchschnittlich enthält eine Webseite laut Google ~29 einzigartige Bilder – eine Zahl die in Zukunft sicherlich noch steigen wird. Nicht zuletzt durch Responsive Webdesign und die damit einhergehende Optimierung von Seiten auf kleine und große Bildschirme bekommen Bilder und Fotos also immer mehr Relevanz.

Vor- und Nachteile von hochauflösenden Bildern

Immer öfter wird natürlich daher der Wunsch geäußert, vorhandenen Foto und Bildcontent neben einer Standard- auch (sofern vorhanden) in einer hochauflösenden Variante anzubieten. Der Vorteil davon ist natürlich gestochen scharfe Bilder auch auf Tablets, Smartphone und hochauflösende Displays ausliefern zu können um so die visuelle Erscheinung der Seite um ein vielfaches zu verbessern.
Neben dem Vorteil gibt es aber natürlich auch einige Nachteile, vor allem die deutlich größere Dateigröße eines Bildes. Um ein Standardbild von 1000 x 1000 Pixel in einer hochauflösenden Variante ausliefern zu können, muss das High-Resolution-Bild 2000 x 2000 Pixel haben – d.h. theoretisch ist die High-Res Variante eines Bildes vier mal so groß. Bedenkt man weiters, dass viele High-Res Devices unterwegs mit (potentiell langsamen) Mobilnetz benutzt werden, fällt dieser Umstand doppelt ins Gewicht. Dem kann nur mit sorgfältiger und starker Bildkomprimierung entgegengewirkt werden, die pro Bild und Grafik ganz individuell festgesetzt werden muss.
Der zweite Große Nachteil ist, dass es noch kein standardisiertes Verfahren gibt, hochauflösende Varianten von Bildern auszuliefern. In den momentan in Entwicklung befindlichen Spezifikationen für CSS 4 findet sich das „image-set“-Attribut (Link), welches zumindest für Bilder, die per CSS eingebunden werden eine Besserung verspricht. Wichtiger ist natürlich eine zukünftige Änderung im HTML <img>-Attribut, welches den Großteil aller dynamisch eingebundenen Bilder (z.B. über das CMS) abwickelt. Ohne diesen neuen Standard muss bisher noch auf Hacks zurückgegriffen werden, um hochauflösende Bilder anzuzeigen.
Ein nicht zu unterschätzender Faktor liegt nicht in der technischen Einbindung sondern auch in der Aufbereitung des Bildcontents. Das Ausgangsmaterial muss in visuell sehr guter Qualität vorliegen, damit die Einbindung als hochauflösendes Bild überhaupt Sinn macht. Weiters erfordert die Aufarbeitung von Fotos und Bildern in verschiedenen Auflösungen und Qualitäten natürlich auch einiges an Arbeitszeit.

Bibliotheken und Libraries für die Einbindung

Fast alle Libraries, die Bilder in Standardauflösung durch Hochauflösende ersetzen, arbeiten rein mit JavaScript. Die bekannteste Library ist RetinaJS, welche beim Seitenstart alle Bilder in einem <img>-Attribut  auf eine höheraufgelöste Variante am Server prüft und diese dann ggf. nachlädt.
Eine andere vielversprechende Library, Adaptive Images,  greift tiefer ins System ein und erfordernt neben einem PHP-Skript und der Modifikation der .htaccess ebenfalls Javascript. Der Zusatznutzen bei Adaptive Images ist die Möglichkeit, andere Bilder für kleinere Devices auszuliefern um so Bandbreite zu sparen.

Zusammenfassung und Ausblick

Neue Standards etablieren sich im Web langsam, deshalb wird es noch lange dauern, bis ein standardisierter und von allen Browsern akzeptierter Weg gefunden ist, um hochauflösende Bilder intelligent ausliefern zu können.
Die Methoden und Techniken um hochauflösende Bilder anzuzeigen werden bis dahin mit Sicherheit vielfältiger, resourcensparender und intelligenter werden – die zusätzliche Arbeit den Content für hochauflösende Displays aufzubereiten wird weiterhin aufwendig bleiben und viel Auge fürs Detail erfordern.