1 4K und Retina Displays
Das Wort „Retina Display“ läuft einem ständig über den Weg – vor allem in der Welt der Technik: in der Werbung, im Fernsehen oder auch im Elektrofachgeschäft. Aber was ist das eigentlich? Und was hat es mit „4K“ auf sich?1.1 Was ist 4K?
4K ist nichts anderes als Ultra HD und bezeichnet die Auflösung von Displays, wie beispielsweise die eines Fernsehers oder Monitors. Die Pixelanzahl von 4K ist 3840 x 2160. 4K ist eine Abkürzung und steht für 4.000, was die ungefähre Zahl der horizontalen Bildpunkte beschreibt. Je höher die Auflösung ist, desto besser sind die Bildqualität und die Schärfe des Bildes. Zurzeit ist allerdings noch der Full-HD Standard am meisten verbreitet. Diese Auflösung wird als 2K bezeichnet und hat eine Pixelzahl von 1920 x 1080. Warum heißt es eigentlich Ultra HD? Ultra HD wird aus der Tatsache abgeleitet, dass diese Auflösung doppelt so hoch ist, wie die des Full-HD.[1] [2]1.2 Was ist ein Retina Display?
Das Wort „Retina“ war bisher nur als Netzhaut des Auges oder vielleicht auch noch im Bereich der Astronomie als Retina-Nebel bekannt. Es handelt sich hierbei nicht, wie irrtümlicherweise verbreitet, um einen technischen Begriff, sondern um eine Wortneuschöpfung. Diese Wortneuschöpfung „Retina Display“ entstand im Jahr 2010, als das Unternehmen Apple sein iPhone 4 auf den Markt brachte und seit dem seine Geräte mit einem Retina Display verkauft. Mit diesem Begriff bezeichnet Apple seine Produkte, welche über eine sehr hohe Pixeldichte verfügen. Als Pixeldichte wird der Wert bezeichnet, der die Pixel pro Zoll auf einem Display beschreibt (bekannte Abkürzungen für die Pixeldichte: ppi = pixel per inch; dpi = dots per inch). Je größer der Wert ist, desto schärfer wird das Bild. Die damaligen Geräte besaßen eine Auflösung mit 960 x 640 Pixeln und 326 ppi, woraus sich der Name Retina Display ableitete, da die Pixelzahl höher als wahrnehmbar war. Im Gegensatz zum Vorgängermodell wurden die Pixelzahlen vervierfacht, was eine deutlich bessere Auflösung von Schriften und Bildern (sofern diese dafür optimiert waren) ermöglicht. [3] Wann ist ein Retina Display sinnvoll? Sich ein Retina Display anzuschaffen ist dann sinnvoll, wenn häufig an einem Display gearbeitet wird und besonders kleine Inhalte mit hohen Details angesehen werden müssen. Als Beispiele gelten Texte von eReadern oder auch von Webseiten.[4]2 4K Monitor und Retina Displays und die Konsequenzen für Responsive Design auf mobilen Endgeräten
2.1 Grundlagen
Ultra hochauflösende Bildschirme oder (4K Monitore) müssen eine minimale Auflösung von 3840 x 2160 Pixeln aufweisen, um sich 4K Monitor nennen zu dürfen. Die Pixelzahl des Monitors gegenüber eines Full HD-Monitors vervierfacht sich dadurch.2.2 4K Monitor in mobilen Endgeräten
Aktuell unterstützt nur ein Endgerät eine native Auflösung von 4K. Der Branchenprimus bei mobilen Endgeräten aktuell das Sony Xperia Z5 Premium, dieses bietet aktuell eine Auflösung von 3840 x 2160 Pixeln. Das Flaggschiff von Apple, das iPhone 6 Plus, bietet eine Auflösung von 1920 x 1080 Pixeln. Selbst das iPad Pro bietet „lediglich“ ein Auslösung von 2732 x 2048 Pixeln und liegt deutlich unter der Ultra Hochauflösenden (UHD)-Bildschirm Bezeichnungsanforderung.2.3 Reale Auflösung von Webseiten auf UHD und Retina-Endgeräten
Aktuell gibt es kein Endgerät welches im Browser mehr als eine Full-HD Auflösung, also Standardauflösung, verwendet. Dies hat im Grunde nur einen Hauptgrund, und zwar die flächenmäßig kleinen Bildschirme. Wenn man auf dem Sony Xperia Z5 Premium eine Webseite in der 4K Auflösung darstellen würde, wäre ein Buchstabe in der Standardgröße von 14 Pixeln knapp 0.9 mm groß und damit viel zu klein um angenehm lesbar zu sein, aus diesem Grund rechnen alle aktuellen, und höchstwahrscheinlich auch zukünftigen, mobilen Endgeräte die Auflösungen von Browsern herunter. Dies wiederum gilt nur für Texte. Bilder werden mit der höchsten Bildschirmauflösung dargestellt, da kleinere Bilder aufgrund der höheren Pixeldichte auf hochauflösenden Bildschirmen unscharf wirken, da die dargestellten Pixel des Bildes auf mindestens vier Pixel beim iPad Pro bzw. acht Pixel beim Xperia Z5 Premium enthalten würden. Dadurch können diese Bilder dort verwaschen oder unscharf dargestellt werden. Aus diesem Grund sollten Bilder auf einem iPad Pro doppelt so groß sein wie auf einem normalen Handy, die Bilder für das Xperia Z5 Premium sogar mindestens 2,8 mal so groß.2.4 Fazit
Aus den zuvor genannten Gründen ist es aktuell bereits anzuraten auf diese Punkte zu achten, damit Bilder auch auf zukünftigen Geräten gut dargestellt werden. Es ist allerdings zu beachten, dass in den nächsten drei bis fünf Jahren sicherlich 4K Bildschirme bei mobilen Endgeräten die Regel werden und selbst 8K Bildschirme bereits in den Startlöchern stehen.3 Technisch – Retina
Retina ist lediglich ein von Apple erfundener Begriff für ein LC Display oder kurz LCD (Liquid Crystal Display) mit IPS (in-plane-switching) Technik. In andere modernen Handys anderer Hersteller wird diese Technik lediglich unter einem anderen Namen genutzt.4 Responsive Webdesign: Retina Display
4.1 Was hat das Eine mit dem Anderen zu tun?
Im Webdesign muss im Normalfall neben der eigentlichen Programmierung der Webseite für den Computer daheim auch eine Programmierung anhand sogenannter „Media Queries“ erfolgen. Das bedeutet, dass besondere Befehle im Code enthalten sind, welche prüfen, ob es sich hierbei um einen Computer oder ein Smartphone handelt. Dementsprechend werden Bilder, Schrift und evtl. auch Funktionen durch den Code für das Gerät angepasst. Nun gibt es aber schon seit einiger Zeit „Retina Displays“, die von Apple für ihre iPhones benutzt werden. – Diese haben eine deutlich höhere Auflösung.4.2 Wenn es nicht berücksichtigt wird
Wenn beim Programmieren des Codes für das Responsive Webdesign die Retina Displays nicht berücksichtigt werden, hat man, wenn man z.B. auf die Schrift zoomt, eine unscharfe Schrift. – Das Gleiche gilt für Bilder.4.3 Lösung bei Bildern
Möchte man Bilder sehr scharf auf einem Retina Display darstellen, so kann man das Bild, welches man hochladen möchte, in der doppelten Größe hochladen und dann per CSS „halbieren“. Es werden dann nur noch 50 % des Bildes genommen. Beispielsweise wird aus einem Bild, welches eine Größe von 300 x 300 px hat, ein Bild, welches nach der Editierung nur noch eine Größe von 150 x 150 px aufweist. Neben der manuellen Version gibt es aktuell schon etliches Plugins für die automatische Optimierung der Bilder. Sehr empfehlenswert ist es, sogenannte SVG‘s zu benutzen. Dies sind Icons die sich, weil es Vektor Grafiken sind, problemlos hoch- und runterskalieren lassen und somit auch glasklar bleiben.5 Hosting – Webspace – Auslastung
Die unterschiedlichen Auflösungen von Bildern sind aktuell Folgende:- Retina – 5120 × 2880 – Beispielbild 8,1 Mb (die heutigen Retina Displays haben eine 5K Auflösung)
- 4K (UHD) – 3840 x 2160 – Beispielbild 14,5 Mb
- Full-HD – 1920 x 1080 – Beispielbild 1,7 Mb
- Aktueller Standard – 1310×960 – 1310 x 980 – Beispielbild 1,1 Mb (aktuelle max. Auflösung von Enfold-Fulllscreen Slidern)
