Was ist ein Retina-Display?
Apple prägte den Begriff "Retina Display" 2010 mit dem iPhone 4. Es bezeichnet Bildschirme mit so hoher Pixeldichte, dass das menschliche Auge bei normalem Betrachtungsabstand keine einzelnen Pixel erkennen kann. Heute haben praktisch alle modernen Smartphones, viele Laptops (MacBook Pro, Dell XPS, Surface) und zahlreiche Monitore ein HiDPI-Display mit einem Device Pixel Ratio (DPR) von 2 oder sogar 3.
Das Problem: Ein normales Bild mit 400 × 300 Pixeln wird auf einem 2x-Retina-Display auf 800 × 600 physische Pixel verteilt — und erscheint dadurch unscharf, weil der Browser die vorhandenen Pixel interpolieren muss.
Das Device Pixel Ratio (DPR)
Das Device Pixel Ratio gibt an, wie viele physische Pixel einem CSS-Pixel entsprechen:
- DPR 1: Standard-Bildschirme, 1 CSS-Pixel = 1 physischer Pixel
- DPR 2: Retina/HiDPI, 1 CSS-Pixel = 4 physische Pixel (2×2)
- DPR 3: Super Retina (iPhone 15 Pro), 1 CSS-Pixel = 9 physische Pixel (3×3)
Für ein Bild das 400 × 300 CSS-Pixel groß dargestellt wird, brauchst du auf einem DPR-2-Display ein 800 × 600 px Quellfoto um pixelscharf zu sein. Auf DPR-3 sogar 1200 × 900 px.
Das Dilemma: Schärfe vs. Dateigröße
Die naive Lösung — immer die doppelt so große Bildversion verwenden — verdreifacht das Dateivolumen für normale Bildschirme unnötig. Eine 800 × 600 px WebP-Datei bei 80% Qualität ist 4× so groß wie eine 400 × 300 px Version. Nutzer auf normalen Bildschirmen laden also unnötig viele Daten.
Die richtige Lösung: jedem Gerät genau die passende Bildversion liefern.
Lösung 1: srcset mit Pixeldichte-Deskriptor
Der einfachste Ansatz für Bilder mit fester Displaygröße — der Browser wählt automatisch die passende Version:
- Erstelle zwei Versionen:
bild.webp(400 px) undbild@2x.webp(800 px) - Komprimiere die 2x-Version etwas aggressiver (70–75% statt 80%) — das kompensiert die größere Auflösung
- Vorteil: Einfach zu implementieren
- Nachteil: Kein responsives Verhalten für verschiedene Viewport-Breiten
Lösung 2: srcset mit Größen-Deskriptor (empfohlen)
Die flexiblere und empfehlenswertere Lösung kombiniert verschiedene Bildgrößen mit dem sizes-Attribut. Der Browser wählt basierend auf Viewport-Breite UND DPR die optimale Version:
- Ein Smartphone (390 px Viewport, DPR 3) bekommt die 800 px-Version
- Ein Standard-Desktop (1440 px, DPR 1) bekommt die 800 px-Version
- Ein MacBook Pro (1440 px, DPR 2) bekommt die 1600 px-Version
- Jedes Gerät bekommt genau was es braucht — nicht mehr
Lösung 3: next/image (Next.js)
Next.js übernimmt das automatisch mit der <Image />-Komponente:
- Automatische Größenanpassung für alle Breakpoints
- Automatische WebP-Konvertierung
- Automatisches Retina-srcset
- Lazy Loading standardmäßig aktiv
- Blur-Placeholder während des Ladens
Du gibst einfach das Originalbild an und Next.js kümmert sich um den Rest — der ideale Workflow.
Komprimierungsstrategie für Retina-Bilder
Ein entscheidender Trick: Retina-Bilder verziehen mehr Komprimierung als Standard-Bilder. Da die Auflösung so hoch ist, werden Komprimierungsartefakte auf physischer Pixelebene so klein, dass das menschliche Auge sie auch bei kritischer Betrachtung kaum wahrnimmt.
| Bildversion | Empfohlene Qualität | Warum |
|---|---|---|
| 1x (Standard) | 80–85% | Artefakte auf 1:1-Pixel-Level sichtbar |
| 2x (Retina) | 65–75% | Artefakte auf 0.5-Pixel-Level, kaum sichtbar |
| 3x (Super Retina) | 55–65% | Artefakte auf 0.33-Pixel-Level, nicht sichtbar |
Durch aggressivere Komprimierung der Hochauflösungs-Versionen kannst du die 2x-Version oft auf die gleiche oder sogar kleinere Dateigröße bringen als eine unoptimierte 1x-Version — bei perfekter Schärfe auf Retina-Displays.
SVG: Die Retina-freie Lösung
Für Logos, Icons, Illustrationen und alle anderen Vektorgrafiken gibt es eine noch einfachere Retina-Strategie: SVG verwenden. SVG ist ein Vektorformat und skaliert mathematisch auf jede Auflösung — kein Pixel-Problem, kein DPR-Problem, eine einzige Datei für alle Bildschirme.
Fazit
Retina-Displays erfordern Bilder mit doppelter (oder dreifacher) Pixelanzahl — aber nicht zwingend doppelte Dateigrößen. Die Kombination aus aggressiverer Komprimierung für hohe Auflösungen und srcset für gerätespezifische Lieferung ist die professionelle Lösung. Next.js-Nutzer profitieren von der automatischen Handhabung durch die Image-Komponente. Für Logos und Icons ist SVG die einfachste und universellste Antwort auf das Retina-Problem.