Das neue Macbook Pro mit Retina Display und die Probleme für Web-Entwickler

Nach dem Erfolg von iPhone 4(S) und dem iPad war es eigentlich nur eine Frage der Zeit, bis Apple das “Retina Display” auch auf den Mac bringt. Das Macbook Pro ist nun offiziell der erste Computer von Apple, der das Prädikat “mit Retina Display” tragen darf. Apple beschreibt das Phänomen Retina Display folgendermaßen: Es “liegt an der Pixeldichte des Retina Displays, die so hoch ist, dass das menschliche Auge die einzelnen Pixel nicht mehr erkennt.” Wichtig ist bei der Bezeichnung Retina Display also nicht irgend eine numerische Schranke, zum Beispiel wie viel Pixel per Inch (ppi) ein Bildschirm haben muss, sondern ein scheinbar subjektiver Wert. Eben so, dass man mit dem bloßen Auge keine einzelnen Pixel mehr erkennen kann. Natürlich gibt es dabei auch eine wissenschaftliche Berechnung.

Bei TUAW findet man eine sehr gute Beschreibung, wie man das ganze auch relativ leicht selbst ausrechnen kann. Im Grunde läuft es darauf hinaus, dass neben der Pixeldichte (ppi) auch die Distanz vom Auge zum Bildschirm zählt. Ein iPhone hält man demnach näher zum Auge als einen Computerbildschirm oder ein Macbook – genau deswegen kann auch die Pixeldichte variieren. Was aber bei allen Retina Display-Implementierungen von Apple bisher gleich war, ist die Verdopplung der vertikalen und horizontalen Pixelzahlen, wodurch eine Vervierfachung der Auflösung herauskommt. Beim iPhone 3GS zum iPhone 4 zum Beispiel von 480×320 auf 960×640 Pixel. Die Auflösung des neuen Macbook Pro wurde von vormals 1440×900 auf 2880×1800 aufgestockt. Was der Vorteil einer so radikalen Vergrößerung ist, hat man in der Vergangenheit beim iPhone und iPad bereits miterleben dürfen. Auch ohne Änderung der Grafiken sieht eine Oberfläche noch mäßig bis ok aus, aber eben nicht besonders hübsch. Texte werden sowieso in der höheren Auflösung gerendert, wodurch eine App schnell besser aussieht obwohl sich die Grafiken nicht geändert haben. Wenn sich Entwickler die zusätzliche Arbeit antun und die Apps aktualisieren, sieht für Besitzer  eines Retina Displays alles hübscher, schärfer und besser aus.

Was aber am Desktop stärker zu Tragen kommt, ist das Internet. Am iPhone und iPad lebt man in Apps. Für alles gibt’s irgend eine Applikation – den Browser ruf man eigentlich nur ungern auf. Ganz anders am Desktop. Bis auf Skype, meine (Web)-Entwicklungs-Programme und den Twitter-Client sowie Spotify habe ich eigentlich selten irgendwelche Applikationen laufen. Meine Mails frage ich über GMail ab, die Notizen werden oft in Google Docs gemacht. Den RSS-Feed lasse ich mir in Google Reader anzeigen und gebloggt wird auch über die Web-Oberfläche. Das ist genau der Grund, warum mir Chrome OS so logisch erscheint. Ich bin am Desktop ein Browser-Typ. Am liebsten wär’s mir, wenn ich alles im Browser und über die Cloud mache. Doch genau da liegt das Problem von Retina Displays begraben, vor allem, da es mich als Web-Entwickler selbst auch trifft. Es gibt bisher keine gute Lösung, Retina Grafiken für hochauflösende Displays & Geräte auszuliefern. Spontan sind mir folgende drei Methoden und Lösungen eingefallen:

Möglichkeit Nr 1: Ignorieren

Wahrscheinlich in der ersten Zeit die praktikabelste Methode, mit Retina Displays umzugehen. Benutzer eines solchen Geräts bekommen dann halt die schlechteren Grafiken ausgeliefert und diese werden vom Gerät hochskaliert. Nutzer mit Retina Displays sind derzeit noch in der Unterzahl und bis auf die optische Darstellung gibt haben sie mit einer nicht optimierten Seite keine Probleme. Ich schätze das neue Macbook Pro derzeit sowieso in der Klasse “Mac Pro im Notebook-Sektor” ein – heißt, dass wir in der nächsten Zeit mit keiner großen Anzahl an Nutzern rechnen können. Aber der Anteil wird steigen, irgendwann werden auch “normale” Macbooks und Displays mit einer Retina-Darstellung herauskommen und die Anzahl von iPads & iPhones wird auch weiterhin in die Höhe gehen. Man sollte sich also vorbereiten.

Möglichkeit Nr 2: Javascript- & CSS-Hacks

Bei der Frage, wie man seine Websites Retina-Ready macht, sollte man sich eigentlich zuerst einmal anschauen, wie der Meister höchstpersönlich mit dem Problem umgeht. Immerhin weiß Apple schon länger als wir alle, dass Retina Displays in Entwicklung sind und gehört auch zu den Unternehmen, die auf die Produktpräsentation im Internet viel Wert legen. Also sollte man erwarten können, dass die Website von Apple bereits mit den notwendigen Retina-Grafiken ausgestattet ist? Halb-Richtig. Apples Seite ist noch nicht komplett mit Retina-Grafiken bestückt, einige Einzelseiten stehen aber bereits hochauflösend zur Verfügung. Dazu gehört unter anderem die Produktseite des neuen iPads und Macbook Pros sowie wiederkehrende Elemente wie die Navigationsleiste. Aber wie regelt Apple die Darstellung? Ganz einfach und entäuschenderweise sehr simple, ich hätte mir da eigentlich mehr erwartet: Über das data-hires=”true” Attribut von einem Container-Element wird ein Javascript-Code (“alter” Code in Gist, seit Macbook Pro-Veröffentlichung die ac_retina.js) angewiesen, alle Bilder darin gegen die hochauflösenden Pendants auszutauschen – falls diese existieren. Es wird demnach zuerst das normal aufgelöste Bild heruntergeladen, danach wird gecheckt, ob es ein hochauflösendes Bild gibt und erst dann wird dieses heruntergeladen und gegen das alte ausgetauscht. Für ein Bild werden also ganze drei HTTP Requests verwendet – also nicht gerade performant. Das Titelbild auf der Macbook Pro-Produktseite hat in hochauflösender Form (Apple verwendet hier die x2-Dateinamen wie bei iOS-Apps) dann schon 1.23MB, die normal aufgelöste Version nur 322kb. Schon eine ganze Menge, wenn das ganze Internet diese Technik implementieren würde und man es auf einen ganzen Tag aufsummiert. Vor allem via Tethering bzw. das Handynetz könnte der ein oder andere ans Limit seines Mobilfunk-Vertrags kommen. Aber vielleicht – beziehungsweise bin ich mir eigentlich sicher, dass Apple ganz genau weiß, dass diese Methode nicht das Gelbe vom Ei ist. Sonst hätten sie diese längst für Web-Entwickler in Form von Javascript-Kits zu Verfügung gestellt. Apple achtet wie keine anderes Unternehmen dieser Welt daraf, dass auf ihren Produkten alles perfekt aussieht.

Andere Javascript-Methoden auf diesem Gebiet sind zwar schon viel näher an einer guten Lösung, zum Beispiel liefert foresight.js gleich nur die benötigten Ressourcen auf Basiss von Auflösung und Netzwerkgeschwindigkeit aus, eine wirklich gute Javascript-basierende und optimale Lösung habe ich nicht gefunden. Falls ihr erfolgreicher wart, ich würde mich auf einen Kommentar freuen.

Möglichkeit Nr 3: Warten bis es was offizielles gibt.

Anscheinend machen sich mehrere Entwickler bereits gedanken darüber, wie man das Problem am effektivsten und besten lösen kann. Die optimale Lösung wäre natürlich gänzlich ohne Javascript und direkt im Browser integriert. Bei dem W3C gibt es schon eine User-Group, die sich mit Responsive Images beschäftigt und eine Lösung dafür ausarbeitet. Dort sieht man bereits die Tendenz, dass es auf eine Lösung wie bei den <video>-Tags hinauslaufen wird. Es soll ein Container-Element geben, in dem verschiedene Quellen und Bildgrößen eingebettet sind. Der Browser entscheidet dann selbst, welches davon geladen und angezeigt wird. Denn ein Browser bzw. das Betriebssystem weiß selbst am besten, wie viel Netzwerk-Kapazität und Bildschirm-Fläche zur Verfüngung steht.

Möglichkeit Nr 4: Es gibt keine Möglichkeit Nr. 4!

Auch wenn Font-basierte Icons und SVG eine Möglichkeit bieten würden, auflösungsunabhängige Grafiken darzustellen, sind diese für viele Einsatzzwecke keine Lösung. Vektor-Grafiken haben einen wahnsinnig großen Nachteil und der heißt Sub-Pixel Rendering und das sieht fast genauso schlecht aus, wie non-retina Grafiken ;) Aber dazu hier mehr.

Was den Entwicklerung und Designern auf alle Fälle nicht ersparrt bleibt, ist die Erstellung und Wartung von zwei verschiedenen Auflösungen der Assets. Theoretisch müssen nämlich nicht nur Bilder sondern in späterer Folge auch Videos angepasst werden. Aber schon alleine die Bilder anzupassen kann gerade bei großen Websites sehr aufwendig werden. Außerdem müssen Content Management-Systeme darauf ausgelegt werden, verschiedene Image-Auflösungen bereit zu stellen. Was bei statischen Elementen nämlich noch einfach wirkt, könnte spätestens bei dynamischem Content und Redaktions-Inhalten wirklich zur Qual werden.

Insgesamt bin ich von Apple ein wenig enttäuscht, nicht im Vorhinein an einer besseren Lösung zu basteln. Retina Displays sind jetzt schon einige Zeit auf dem Markt und scheinbar hält man es bei Apple selbst nicht für wichtig, eine Lösung parat zu haben. Da Apple aber selbst unter anderem im W3-Consortium sitzt, wäre eine Stellungnahme oder eine Mitarbeit an einem Vorschlag nicht schlecht. Immerhin ist es die User-Experience ihrer Kunden, die mit einem Non-Retina-Internet den Bach runter geht.

Kommentar verfassen