Die Herkunft der beiden Begriffe lässt sich in wenigen Worten erklären: „Retina“ ist eine von Apple erfundene Bezeichnung, welche nur die hochauflösenden Displays (und deren Technologie) von eben diesem Unternehmen bezeichnet.

„Amoled“ beschreibt im Prinzip das gleiche, ist aber ein allgemeingültiger Begriff, und nicht gebunden an eine bestimmte Marke. Die beiden Begriffe verhalten sich zueinander ähnlich wie die Wörter „Tempo“ und „Taschentuch“. Amoled heißt ausgeschrieben „active-matrix organic light-emitting diode„. Diese Technologie findet man heutzutage in Smartwatches, mobilen Endgeräten, TV-Geräten und Monitoren.

Ab wann spricht man bei einer Auflösung von Retina oder Amoled?

Natürlich ist eine Bildschirmauflösung dann „Retina“ oder „Amoled“, wenn die ensprechende Technologie auf dem Gerät verwendet wird. Im Allgemeinen jedoch verwendet man diese beiden Begriffe, wenn die Auflösung eines Displays so hoch ist, dass das menschliche Auge ohne Hilfsmittel auch bei näherem Betrachten keine einzelnen Pixel mehr erkennen kann.

Die Einführung von Retina und Amoled Displays sorgte 2012 mit der Einführung des Ipad 3 dafür, dass Designer und Programmierer nun einen Arbeitsschritt mehr hatten, wenn sie Grafiken für Webseiten erstellten. Genaugenommen müsste man nämlich alle Bilder in doppelter Ausführung abspeichern: einmal „normal“ in der gewohnten 1:1 Auflösung für Nicht-Retina-Displays, und einmal in doppelter Auflösung für hochauflösende Displays. Denn hochauflösende Displays besitzen eine so hohe Pixeldichte, dass Bilder (und auch Texte) eigentlich viel zu klein dargestellt werden, und deswegen vom Computer interpoliert und auf das doppelte vergrößert werden müssen, so dass der Inhalt wieder eine Größe erreicht, die der Benutzer vom Display/dem Monitor gewohnt ist und mit seinem Auge verarbeiten kann. Details zum Thema Pixeldichte findet ihr auch in unserem anderen Blogbeitrag „Warum 72 dpi“.

Wie genau werden Bilder auf Retina oder Amoled Displays abgebildet?

Um diese Frage zu beantworten, haben wir uns nicht nur auf theoretische Zahlen und Rechenbeispiele verlassen, sondern haben ganz analog mit einem Lineal ein und das gleiche Bild an verschiedenen Monitoren ausgemessen. In der folgenden Grafik beschreibt die X-Achse die Pixeldichte des jeweiligen Monitors, die Y-Achse gibt die gemessene Breite des Bildes an:

Wir selbst waren über das Ergebnis überrascht, dass das gleiche 700 Pixel breite Bild im hier gemessenen Extremfall (iPad 2 Quer vs. Mac Cinema Display) ungefähr 5 cm Größenunterschied aufwies.

Um nun unsere analogen Messergebnisse mit Mathematik zu unterstützen, haben wir aus der Angabe „72 dpi“ eine kleine Funktion abgeleitet:

72 dpi
= 72 dots per inch
= 72 dots / inch
= 72 dots / 2,54 cm

Will man nun die Größe von einem Pixel errechnen:

2,54 cm / 72 dots = 0,0353 cm

Und wenn man die Breite eines Bildes mit 700 Pixel errechnen möchte:

2,54 / 72 * 700 = 24,69 cm

In Worten: Auf einem 72 ppi Monitor (80er Jahre), würde ein 700 Pixel breites Bild 24,69 cm auf dem Bildschirm einnehmen.

Wenn man nun eine beliebige Pixelbreite auf einer bestimmten Pixeldichte berechnen möchte:

2,54 / Pixeldichte * Bildbreite_des_Bildes = x

Oder in einer Funktion ausgedrückt:

f(x) = 2,54 / x * b      (x = Pixeldichte des Monitors und b = Pixelbreite des Bildes)

Daraus wiederum lässt sich eine aussagekräftige Funktionskurve ableiten, die sich ziemlich genau mit unseren analogen Linealmessungen deckt:

Wie man in der Kurve sehr gut sehen kann, reduziert sich die Breite des angezeigten Bildes dramatisch mit steigender ppi-Dichte. Hat das 700 Pixel Bild bei einem gängigen 96 ppi Monitor noch ca. eine Breite von 18 cm, so wird das gleiche Bild bei einer Pixeldichte von 190 ppi (z.B. das Asus Zenbook Prime) nur noch mit ca. 9 cm angezeigt – also gut die Hälfte! Gleiches passiert natürlich auch mit der Schrift.

(Eine kleine Anmerkung abseits dieses Blogthemas: an der oben gezeigten Kurve ist auch sehr gut sichtbar, dass zukünftige Displays nur sehr unwahrscheinlich die 500 oder 600 ppi Marke knacken werden, da der Nutzer schlicht und einfach keinen qualitativen Unterschied mehr sehen würde – an der Kurve sehr gut erkennbar an den sich kaum veränderten Y-Werten bei 500 und 600 ppi.)

Aber wie genau stellen Retina und Amoled Displays die Bilder dar?

Würde man nun beispielsweise die Auflösung/Pixeldichte eines iPad 3 mit Retina Auflösung nehmen (264 ppi), so würde die Bildbreite von 700 Pixel nur noch bei rund 6 cm liegen:

Diese Darstellung wäre eindeutig zu klein und würde sehr stark von dem abweichen, was der Benutzer von anderen Bildschirmen gewohnt ist. Ganz abgesehen davon, dass Schrift wahrscheinlich auf einem 264 ppi Display so klein abgebildet werden würde, dass man sie nicht mehr lesen könnte, und wichtige Bildinhalte ebenfalls einfach zu klein dargestellt werden würden.

Um dieses Problem zu lösen, interpolieren Retina und Amoled Displays die Inhalte einfach mit dem Faktor 2, um Schriften und Bilder wieder in ein Maß zu bringen, dass vom Benutzer gewohnt und auch gelesen/erkannt werden kann:

Das heißt, dass die Bilder auf diesen hochauflösenden Displays eigentlich unscharf abgebildet werden, da sie mit dem Faktor 2 multipliziert und vergrößert werden – allerdings fällt dies fast nicht auf, da die hochauflösenden Displays eine so große Pixeldichte haben, dass man keine einzelnen Pixel mehr erkennen kann. Ein vergrößerter Screenshot jedoch verdeutlicht die Problematik:

 

Und genau hier liegt die Herausforderung für Designer und Programmierer: Bei Bildern fällt die Skalierung nicht unbedingt auf, jedoch bei Pixelgrafiken mit Schrift oder Linien wird die Unschärfe sehr wohl sichtbar. Um dieses Problem der unscharfen Darstellung zu lösen, müsste der Designer theoretisch jedes Bild in doppelter Auflösung speichern (einmal „normal“ und einmal „x2“) und der Programmierer müsste eine Abfrage einbauen, ob die Website nun auf einem hochauflösenden Display dargestellt wird, oder nicht, und dementsprechend das passende Bild laden.

Daraus ergeben sich aber wieder neue Probleme: Was passiert, wenn die Website erkennt, dass sie gerade auf einem hochauflösendem Display angezeigt wird und das entsprechende hochauflösende Bild lädt, der Benutzer sich aber gerade in einem Funkloch befindet oder das Datenvolumen aufgebraucht ist? Der Aufbau/das Laden der Website würde sich aufgrund der Datenmenge der hochauflösenden Bilder deutlich verlangsamen und den Benutzer in den Wahnsinn treiben.

Was ist die Lösung für die Darstellung auf hochauflösenden Displays?

Wie so oft im Leben ist auch hier ein Mittelweg die Lösung: in der Praxis werden maximal wichtige Bilder oder das Logo in doppelter Auflösung bereitgestellt. Es wird viel mit Vektoren gearbeitet, denn diese werden bei jeder Auflösung scharf angezeigt, und prinzipiell tendieren moderne Websites zu Minimalismus, um dem Problem der mobilen Usability und der oftmals immer noch mangelhaften Internetverbindung entgegenzukommen. So kann man als Designer und Programmierer auch weiterhin mit Retina und Amoled leben, ohne bei jedem Projekt an den Rand des Wahnsinns getrieben zu werden.