Grafiken und ppi – iOS, Retina, Android, Metro UI

Letztens habe ich mir gedacht, dass Apple eigentlich einen intelligenten Weg eingeschlagen hat, um die Display- und Auflösungsdiversitäten zu vermeiden, wie man sie z. B. bei Windows oder Android kennt. Dadurch, dass Betriebssystem und Hardware aus dem gleichen Haus kommen, können unerwünschte Abweichungen gezielt unterbunden werden.

Das Retina Display des iPhone 4 und des gestern vorgestellten »neuen iPads« weist im Bezug auf den jeweiligen Vorgänger eine exakt doppelte Pixelmenge in horizontaler und vertikaler Ebene auf, also eine insgesamt vierfache Pixelanzahl. Einerseits ist so eine Verwendung der niedrig auflösenden Grafiken ohne Skalierungsartefakte möglich und andererseits können hochauflösende Grafiken recht einfach erstellt werden. Bei gleicher ppi müssten so nur zwei Grafiken erstellt werden, einmal normal und hoch aufgelöste.

Aber Pustekuchen, das iPad hat nämlich nicht die gleiche Menge Pixel pro Zoll wie ein iPhone. Hier eine kurze Übersicht der Auflösungen:

	iPhone	iPad
Standard	163 ppi	132 ppi
Retina	326 ppi	264 ppi

Das bedeutet, dass man als iOS Designer tatsächlich inzwischen vier verschiedene Varianten derselben Grafik erstellen muss, wenn eine App zu allen Systeme kompatibel sein soll. Ja, man könnte jetzt natürlich argumentieren, dass ein iPad mit gleicher ppi Auflösung wie ein iPhone keinen Sinn ergibt, weil die Betrachtungsabstände unterschiedlich sind. Vielleicht hat ein pfiffiger Apple Mitarbeiter sogar genau dies im Hinterkopf gehabt und die Auflösungen entsprechend definiert, dass für den Betrachter in normaler Haltung Grafiken auf beiden Geräteklassen gleich groß wirken.

Schauen wir uns aber nun kurz andere Systeme im Vergleich an:

Android und dessen dp

Android ist ein System, welches wegen der großen Diversität der Geräte oft in Kritik gerät. Hier sind den Geräteherstellern in Bezug auf die Auflösung der Displays kaum Grenzen gesetzt. Um eine App zu entwickeln, die sowohl auf Smartphones, als auch auf Tablets optimiert ist, werden von Google natürlich auch verschiedene Auflösungen für Grafiken vorgeschrieben. Und zwar ebenfalls vier, unabhängig von der Geräteklasse:

	Auflösung
ldpi (low)	~120 ppi
mdpi (medium)	~160 ppi
hdpi (high)	~240 ppi
xhdpi (extra high)	~320 ppi

Für andere Maßangaben wird hier zusätzlich eine von der Pixeldichte unabhängige virtuelle Maßeinheit verwendet, nämlich der Density-independent pixel (dp), welcher sich nach folgender Formel berechnen lässt:

A px = B dp * (C dpi / 160)

C ist dabei die Pixeldichte des Gerätes.

Im Idealfall gibt der Android Designer also alle Maßeinheiten in dp an, legt seine Grafik in vier verschiedenen Auflösungen ab und hätte damit automatisch alle möglichen Größenvarianten abgedeckt. Das Android System entscheidet sogar selbst, welche Grafik jeweils verwendet werden muss und wie die Maße in Pixel umgerechnet werden.

Das Metro UI Grid

Microsoft geht mit der neuen Metro UI in Windows Phone und Windows 8 sogar einen Schritt weiter und setzt auf ein Pixel-unabhängiges Raster. Da die Displaygrößen vor allem bei Windows noch stärker als bei Android variieren dürften, ist das ein sehr interessanter Weg. In einem späteren Blogeintrag werde ich etwas genauer darauf eingehen.

Fazit

Es drängt sich also die Frage auf, ob die stark pixelabhängige Lösung von Apple die bessere ist. Schließlich ist es durchaus möglich, dass iOS nicht in alle Ewigkeit mit den vier Varianten zurechtkommt. Sollte sich Apple beispielsweise bald für ein iPad Mini entscheiden, gäbe es höchstwahrscheinlich weitere Auflösungen, die die Designer berücksichtigen müssten. Der Vorteil des geringeren Aufwands bei der Erstellung der Layouts und Grafiken ist jedenfalls spätestens mit dem Retina Display des »neuen iPads« im Vergleich zu den anderen Systemen so gut wie nicht mehr vorhanden.

Auf Anwenderseite überwiegen aber nach wie vor die Vorteile: Durch die exakte Doppelung der Pixel beim Retina Display werden unschöne Pixelinterpolationen vermieden, die Grafiken wirken immer scharf (hier gibt es eine schöne Analyse dazu).