Ein Retina Display ist ein Bildschirm von Apple, dessen Pixel Density hoch genug ist, dass ein Betrachter aus dem üblichen Abstand keine einzelnen Bildpunkte mehr unterscheiden kann. Der Name stammt aus dem Marketing und bezeichnet keinen technischen Standard. Es gibt deshalb auch keinen festen ppi-Wert, ab dem ein Bildschirm dazugehört. Maßgeblich ist immer das Zusammenspiel aus Dichte und Betrachtungsabstand des jeweiligen Geräts.
- Retina Display
Apples Bezeichnung für Bildschirme, deren Bildpunkte aus dem üblichen Betrachtungsabstand nicht mehr einzeln erkennbar sind.
Beispiel: „Auf dem Retina Display des MacBook fällt jede unscharfe Grafik sofort auf.“Herkunft: Apple führte den Namen 2010 mit dem iPhone 4 ein, dessen Bildschirm 326 ppi erreichte. Später kamen Varianten wie Liquid Retina und Super Retina XDR dazu, die zusätzlich Panel-Technik und Helligkeit beschreiben.
Abgrenzung: Retina Display meint das Anzeigegerät. Retina-Assets meinen die Bilddateien in doppelter oder dreifacher Auflösung, die auf einem solchen Gerät scharf bleiben. Umgangssprachlich wird „Retina“ auch für hochauflösende Bildschirme anderer Hersteller benutzt, obwohl die Marke Apple gehört.
Was hinter dem Namen Retina Display steckt
Apple hat den Begriff an eine Beobachtung geknüpft: Ab einer bestimmten Winkelauflösung kann das menschliche Auge zwei benachbarte Bildpunkte nicht mehr trennen. Wie hoch die nötige Dichte ausfällt, hängt davon ab, wie nah das Gerät am Auge ist. Ein Telefon braucht dafür mehr ppi als ein Notebook auf dem Schreibtisch, und ein Fernseher kommt mit deutlich weniger aus.
Damit gibt es keine Zahl, ab der ein Bildschirm ein Retina Display ist. Apple entscheidet das pro Produktlinie. Für deine Arbeit heißt das: Der Name beschreibt ein Ziel und liefert dir keinen Messwert, an dem du dich ausrichten könntest.
Warum der Browser den Begriff nicht kennt
In CSS und JavaScript taucht „Retina“ nirgends auf. Der Browser kennt die Device Pixel Ratio und das Media Feature resolution, beides neutrale technische Größen. Ein Retina Display meldet sich dort mit einer DPR von 2 oder 3, genau wie ein hochauflösendes Android-Gerät oder ein 4K-Monitor mit Skalierung.
Für die Entwicklung ist das eine gute Nachricht. Du musst weder Geräte erkennen noch Markennamen abfragen. Es genügt, Bilder in mehreren Auflösungen bereitzustellen und den Browser wählen zu lassen.
Was du daraus fürs Design mitnimmst
Auf einem Bildschirm dieser Klasse wird jede Schwäche im Bildmaterial sichtbar. Ausgefranste Logos und alte JPEGs aus einem früheren Relaunch fallen dort sofort auf, während sie auf einem einfachen Monitor durchgehen. Wir prüfen Layouts deshalb immer auf mindestens einem Gerät mit hoher Dichte, bevor sie live gehen.
Schrift und Flächen profitieren von der Dichte ganz von allein, weil der Browser sie bei jedem Faktor neu rastert. Die Arbeit steckt in den Pixelgrafiken. Wo es möglich ist, ersetzt du sie durch SVG, der Rest wird in mehreren Größen ausgeliefert.
Wie du Bilder für Retina-Displays ausspielst
Über mehrere Fassungen desselben Bildes und die Angabe, wie breit jede davon ist. Der Browser wählt dann selbst, was zur Pixeldichte und zur Anzeigebreite passt, und lädt genau eine Datei. Die Dichte lässt sich auch direkt angeben, über Werte wie 1x und 2x; die Angabe nach Breite ist flexibler, weil sie zugleich auf die Fenstergröße reagiert.
<img src="buero-800.jpg"
srcset="buero-400.jpg 400w,
buero-800.jpg 800w,
buero-1600.jpg 1600w"
sizes="(min-width: 1024px) 50vw, 100vw"
width="800" height="600"
alt="Zwei Kolleginnen am Schreibtisch, im Hintergrund das Büro">Die Angabe sizes ist der Teil, der am häufigsten fehlt. Ohne sie rechnet der Browser mit der vollen Fensterbreite und lädt eine größere Datei als nötig; mit ihr weiß er, dass das Bild auf großen Bildschirmen nur die halbe Breite einnimmt.
Was die doppelte Pixeldichte für die Dateigröße bedeutet
Die vierfache Pixelzahl, denn verdoppelt wird in beiden Richtungen. Unkomprimiert wäre das auch die vierfache Datei; in der Praxis liegt der Faktor niedriger, weil sich große Bilder stärker komprimieren lassen. Trotzdem ist das der Punkt, an dem Bildstrecken eine Seite langsam machen.
Drei Griffe helfen. Moderne Formate wie WebP oder AVIF sparen gegenüber JPEG deutlich, ohne sichtbar schlechter zu werden. Bilder unterhalb des sichtbaren Bereichs bekommen loading="lazy". Und bei Fotos darf die Qualitätsstufe für die hochauflösende Fassung niedriger liegen als für die einfache: Was auf einem dichten Display gezeigt wird, verträgt stärkere Kompression, weil die Pixel kleiner sind.
Woran du erkennst, ob es wirklich ankommt
An drei Prüfungen. Im Browser zeigt window.devicePixelRatio die Dichte des Geräts an; in der Netzwerkansicht steht, welche Datei tatsächlich geladen wurde. Und die Entwicklerwerkzeuge markieren Bilder, deren gelieferte Auflösung nicht zur Anzeigegröße passt.
Der häufigste Befund dabei ist das zu große Bild: eine Datei mit 2400 Pixeln Breite in einem Rahmen von 400. Auf dem Telefon kostet das Ladezeit und Datenvolumen, und sichtbar besser wird dadurch nichts.