Retina-Displays ermöglichen Webdevelopern die sinnvolle Arbeit mit hochauflösenden Bildern. Das neue iPad3 etwa übertrifft mit seiner Auflösung von 2.048 x 1.536 Pixeln sogar das bisherige HD-Format 1.920 x 1.080 (1080p). Auf solchen Geräten erwartet der Benutzer naturgemäß, dass das Bildmaterial die Möglichkeiten des Displays auch nutzt. Gleichzeitig ergibt es keinen Sinn, hochauflösende Bilder an Displays zu senden, die diese nicht darstellen können. Hier würde man unnötig große Datenmengen über das Weltennetz schicken. Ein weiterer Hemmschuh ist das nicht stets in gleicher Geschwindigkeit verfügbare Internet selbst. Hochauflösende Bilder über schmale Datenverbindungen zu jagen, ist ebenfalls keine gute Idee. Die neue JavaScript-Lösung Foresight.js verfolgt einen interessanten Ansatz, um beide Probleme in den Griff zu bekommen.
Demobilder mit dem iPad3 betrachtet: Grün = iPad3, rot = Standarddisplay
Foresight.js: Display gut genug? Verbindung schnell genug? Dann HR-Bild!
Adam Bradley hat sich Gedanken gemacht, viele Gedanken. So formulierte er einen ausführlichen Text zu den Herausforderungen in der Verwendung hochauflösender Bilder. Als Konsequenz seiner Analyse schrieb er das entsprechende Tool zur Lösung aller Probleme direkt hinterher. Foresight.js ist ein schlankes, lediglich 7k großes JavaScript ohne weitere Abhängigkeiten, etwa von jQuery oder anderen. Es steht zur kostenlosen Verwendung unter der MIT-Lizenz auf GitHub zum Download bereit.
Anders als andere Lösungen ermittelt Foresight.js die Möglichkeiten des Clients nicht über den User-Agent, sondern über das Pixel-Verhältnis des anfragenden Geräts. User, die JavaScript abgeschaltet haben, sehen das niedriger aufgelöste Standardbild. Bevor Foresight.js die Auslieferung eines hochauflösenden Bildes auf entsprechend befähigten Geräten auslöst, testet es die Datenverbindung. Bei zu geringer Bandbreite (konfigurierbar) erhalten auch Verwender eines iPad3 nur das Standardbild. Dabei hat Bradley sich bemüht, ansonsten weitgehend standardkonform zu arbeiten, um das Webdesign nicht allzu stark mit Blick auf die Verwendung des Foresight-Scriptes verbiegen zu müssen.
Foresight.js: HTML5 Data-Attribute halten den Abruf der Bilder zurück
Eine Schwierigkeit in der javascript-basierenden Behandlung von Grafiken besteht darin, dass Javascript eine Datei erst dann in die Finger bekommt, wenn sie bereits vom Server geladen ist. Das ist ungünstig. Mit Blick auf hochauflösende Bilder müssten so zunächst beide Varianten geladen werden, was die Ladezeit unnötig deutlich nach oben treibt, um letztlich doch nur eines der beiden zu verwenden. Andererseits würde ein mit JavaScript gebautes Bildelement, das also quasi erst im Moment des Ladens entsteht, nicht von Suchalgorithmen indexiert und in Browsern ohne JavaScript überhaupt nicht angezeigt werden.
Nochmal in groß: Das für HR-Displays ausgelieferte Bild
Bradley umgeht diese Probleme, indem er auf die Data-Attribute aus HTML5 setzt. Bekanntlich werden Inhalte, die in Data-Attribute verpackt werden, im Layout nicht angezeigt. So lassen sich die komplexesten Inhalte im Quelltext einer Seite unterbringen, ohne dass der Besucher etwas davon sieht. Mit JavaScript können diese Inhalte natürlich jederzeit ausgelesen werden. Exakt so geht Foresight.js vor. Unter abgewandelter Verwendung des IMG-Elements wird mit Data-Attributen der Pfad zur hochauflösenden Grafik gestrickt. So sieht das aus:
Das erste IMG-Element verfügt nicht über das Attribut SRC und wird deshalb nicht vom Server abgerufen. Stattdessen trägt es das Attribut data-src, welches erst durch den Einsatz von Foresight.js im Bedarfsfalle zu einem regulären SRC-Attribut gewandelt wird. Durch die PLatzierung des Standardbildes in einem Noscript-Bereich, wird dieses nur geladen, wenn der anfragende Client nicht über Javascript-Verarbeitungsmöglichkeiten verfügt, etwa weil der Benutzer sie abgeschaltet hat. Im Regelfalle sehen aber immerhin noch Suchmaschinen das entsprechende Bild und können es indexieren.
Nochmal in groß: Das für Standard-Displays ausgelieferte Bild
Im Weiteren versucht Foresight.js die Geschwindigkeit der Datenverbindung zu testen. Dieser Test erfolgt nach der Feststellung des Pixel-Verhältnisses, denn er ist immerhin nur dann erforderlich, wenn zuvor ein hochauflösender Client festgestellt wurde. Das Script geht recht konservativ vor und wird eher dazu tendieren, eine Verbindung im Zweifel als langsam zu deklarieren. Nicht zuletzt aus diesem Grund sind die Speed Tests konfigurierbar.
Um die unterschiedlichen Bildvarianten von CSS aus ansprechen zu können, verwendet Foresight.js die recht frische Funktion image-set.(). Sie dient dazu, mehrere Versionen des gleichen Bildes innerhalb einer einzelnen Funktion gemeinsam zu deklarieren, anstatt sie fehleranfällig an verschiedenen Stellen des Stylesheets unterbringen zu müssen.
Im Ergebnis muss man Foresight.js bescheinigen, dass es sich um eine sehr durchdachte, progressiv ausgerichtete Lösung handelt, deren Entwickler Adam Bradley konzeptionell ausgesprochen akribisch vorgegangen ist. Die vielen Demos, die man natürlich am besten über ein iPad3 betrachtet, sind ein ausgezeichneter Beleg für dieses Fazit.
0 Antworten zu „Foresight.js: Hochauflösende Bilder auf modernen Webclients“
— was ist Deine Meinung?
Danke für den Tipp. Werde das Tool gleich mal ausprobieren.
Der Umgang mit unterschiedlichen Auflösungen und Bandbreiten, entwickelt sich „langsam“ zu einem ähnlichen Spaß wie
man ihn früher (wobei früher eher Wunschdenken ist) mit den unterschiedlichen Internet Explorer-Versionen hatte. Foresight scheint da eine gute Richtung zu sein.
Sehr cooles Tool,
was mich aber ein wenig an der neuen Auflösung des iPads ärgert, das es einfach keinen Standard einhält. Da die Lösung aber allgemein auf hochauflösende Displays ausgelegt ist, ist dies kein Problem.
Ja. Alles mit einer Device Pixel Ratio von 2 aufwärts profitiert davon.