Retina Display Images: Serve Sharp Graphics on High-DPI Screens

Last updated: June 28, 2026

Retina- und High-DPI-Bildschirme packen mehr Pixel in denselben physischen Raum, weshalb ein für einen Standardbildschirm dimensioniertes Bild auf diesen Geräten weich und pixelig wirkt. Um scharfe Bilder auf diesen Bildschirmen zu liefern, müssen höhere Auflösungen vorbereitet werden und der Browser muss angewiesen werden, wann er welche Version verwenden soll. Dieser Leitfaden behandelt den 2x- und 3x-Workflow, die srcset-Syntax zur Bereitstellung des richtigen Files sowie das Gleichgewicht zwischen Schärfe und Seiten-Gewicht.

Kurzantwort: Wie mache ich Bilder für Retina-Bildschirme scharf?

Erstellen Sie eine Version des Bildes mit doppelt (und für Smartphones dreifach) der Anzeigepixeldimensionen und verwenden Sie dann das srcset-Attribut, um beide Versionen anzubieten. Der Browser lädt die hochauflösende Datei nur auf Bildschirmen, die sie darstellen können, sodass Standardanzeigen die zusätzlichen Bytes nicht herunterladen müssen. Ein Foto, das bei 400 Pixeln Breite angezeigt wird, benötigt eine 800-Pixel (2x) Quelle für Retina. Exportieren Sie beide Versionen mit angemessener Kompression – die 2x-Datei ist größer, aber nicht doppelt so groß, da die Komprimierungseffizienz mit der Auflösung zunimmt.

Was ist ein Retina- oder High-DPI-Display?

Ein Retina-Display ist ein Marketingbegriff für einen Bildschirm mit einer ausreichend hohen Pixeldichte, bei der das Auge einzelne Pixel aus normaler Betrachtungweite nicht unterscheiden kann. Apple prägte den Begriff, aber das Konzept gilt für die meisten modernen Smartphones, Tablets und Laptops. Die praktische Messgröße ist das Device Pixel Ratio (DPR) – wie viele physische Pixel einen CSS-Pixel darstellen.

• Ein 2x-Bildschirm benötigt doppelt so viele lineare Pixel (viermal das Gesamtvolumen), um scharf auszusehen.
• Ein 3x-Smartphone-Bildschirm benötigt dreimal so viele lineare Pixel.
• Standard-1x-Bildschirme laden nur das Basisbild und verschwenden nichts.

Der Mozilla guide to device pixel ratio dokumentiert, wie Browser DPR melden und verwenden, was die Grundlage jeder Retina-Bildstrategie ist.

Wie erstelle ich 2x- und 3x-Bildversionen?

Beginnen Sie mit einer hochauflösenden Quelle und skalieren Sie diese auf jede Zielgröße herunter, anstatt ein kleines File hochzuskalieren. Ein Foto, das für einen 400 Pixel breiten Anzeigebereich bestimmt ist, benötigt eine 400px (1x) und eine 800px (2x) Version sowie eine 1200px (3x) Version für Smartphones.

1. Beginnen Sie mit einer Quelle, die mindestens so groß ist wie Ihr größtes Ziel (3x).
2. Skalieren Sie auf 1x, 2x und 3x Breiten herunter.
3. Komprimieren Sie jede Version – die 2x- und 3x-Files komprimieren pro Pixel besser.
4. Exportieren Sie als WebP für die kleinsten hochqualitativen Files.
5. Stellen Sie alle Versionen bereit und lassen Sie den Browser wählen.

• Skalieren Sie niemals ein kleines Bild auf 2x hoch – es bleibt weich und wird nur schwerer.
• Die 2x-Datei ist aufgrund der besseren Komprimierung in der Regel weniger als doppelt so groß wie die 1x-Bytes.
• 3x-Versionen sind am wichtigsten für Smartphones mit kleinen, dichten Bildschirmen.

Wie stelle ich die richtige Version mit srcset bereit?

Das srcset-Attribut an einem <img>-Tag teilt dem Browser mit, welche Datei er basierend auf dem DPR des Bildschirms laden soll. Der Browser übernimmt die Auswahl, Sie liefern also die Optionen und das Markup.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Deskriptiver Alt-Text"
  width="400" height="300"
/>

• Die Deskriptoren 1x, 2x, 3x ordnen Dateien den Device Pixel Ratios zu.
• Der Browser lädt nur die Version, die zum Bildschirm passt.
• Fügen Sie immer Breite und Höhe hinzu, um Layout Shifts zu verhindern.
• Das src-Attribut ist der Fallback für ältere Browser.

Für responsive Bilder, deren Dimensionen sich über verschiedene Bildschirmbreiten ändern, kombinieren Sie srcset mit dem sizes-Attribut und Breitendeskriptoren (400w, 800w) anstelle von DPR-Deskriptoren. Der responsive images guide behandelt dieses fortgeschrittenere Muster genauer, und der image SEO guide erklärt, wie scharfe, korrekt dimensionierte Bilder auch die Suchmaschinenleistung verbessern.

Wann sollte ich SVG statt Raster verwenden?

Für Logos, Icons und Illustrationen mit flachen Formen können Sie das gesamte 2x/3x-Problem umgehen, indem Sie SVG verwenden. Vektorgrafiken skalieren unendlich ohne Auflösungsverlust – dieselbe SVG-Datei ist an einem 1x-Monitor und einem 3x-Smartphone gestochen scharf, weil sie aus Mathematik und nicht als Pixel gespeichert wird.

SVG ist die richtige Antwort, wann immer das Bild aus Formen und nicht aus fotografischen Details besteht. Der Kompromiss ist, dass SVGs optimiert werden müssen – ungenutzte Metadaten und Editor-Müll lassen sie anschwellen – und der SVG to PNG guide behandelt den Workflow, wenn Sie für eine Umgebung, die keine Vektoren rendern kann, einen Raster-Fallback benötigen. Für eine Unternehmensseite mit einem Logo im Header eliminiert ein SVG die Retina-Frage vollständig für dieses einzelne Element.

Testen Ihrer Retina-Bilder

Die Generierung der Files ist die halbe Miete; zu überprüfen, ob sie tatsächlich korrekt geladen werden, ist die andere Hälfte. Einige Prüfungen bestätigen, dass das Setup funktioniert und nicht stillschweigend die falsche Datei liefert.

1. Öffnen Sie die Seite auf einem Retina-Gerät oder stellen Sie in den Entwicklertools das Browser-DPR auf 2x ein.
2. Untersuchen Sie das Bildelement und bestätigen Sie, dass der geladene currentSrc die 2x- oder 3x-Datei ist.
3. Wechseln Sie zu einem 1x DPR und bestätigen Sie, dass stattdessen die 1x-Datei geladen wird.
4. Überprüfen Sie den Netzwerk-Tab, um zu verifizieren, dass pro Bildschirm nur eine Version heruntergeladen wird.
5. Betrachten Sie auf dem Retina-Bildschirm bei 100% und bestätigen Sie, dass das Bild scharf ist, nicht weich.

Die Device Pixel Ratio Override in den Browser-DevTools ermöglicht es Ihnen, ohne physische Geräte zu testen, obwohl ein echtes Retina-Display der endgültige Beweis ist. Ein häufiger Fehlerfall ist ein Markup-Tippfehler im srcset, der dazu führt, dass der Browser auf das Basis-src zurückfällt, was auf einem Retina weich aussieht, ohne einen Fehler auszulösen. Der Netzwerk-Tab fängt dies sofort ab – wenn Sie sehen, dass die 1x-Datei auf einem 2x-Bildschirm geladen wird, ist das srcset nicht korrekt eingerichtet.

Schärfe und Seiten-Gewicht ausbalancieren

Die Falle bei Retina-Bildern besteht darin, hochauflösende Files an jeden Bildschirm zu liefern, was das Seiten-Gewicht für Benutzer, die den Unterschied nicht sehen können, verdoppelt oder verdreifacht. Der srcset-Ansatz vermeidet dies, aber nur, wenn Sie tatsächlich die kleineren Versionen generieren und darauf verweisen. Eine einzige 3x-Datei, die an alle geliefert wird, ist der häufigste Fehler.

Der web.dev guide to responsive images dokumentiert die Performance-Auswirkungen, wenn dies richtig gemacht wird, und der Core Web Vitals guide verbindet das Bildgewicht direkt mit der LCP-Metrik, welche die Rangfolge beeinflusst. Das Ziel ist Schärfe dort, wo sie sichtbar ist, und Zurückhaltung überall sonst – lassen Sie den Browser wählen und generieren Sie jede Version, damit er etwas Gutes auswählen kann.

Häufig gestellte Fragen

Wie mache ich Bilder für Retina-Bildschirme scharf?

Stellen Sie 2x (und optional 3x) Versionen von Rasterbildern in der Anzeigegröße bereit und verwenden Sie srcset, damit der Browser die richtige Datei basierend auf dem Device Pixel Ratio auswählt. Ein 1x-Bild auf einem Retina-Bildschirm wirkt weich; die 2x-Variante stellt die Schärfe wieder her.

Brauche ich für jede Grafik 2x-Bilder?

Für scharfe Grafiken und Hero-Fotos: Ja – ansonsten zeigen Retina-Bildschirme Weichheit. Für dekorative oder unterhalb des Falzes liegende Bilder reicht oft eine einzige 1x-Datei. Stellen Sie beide mit srcset bereit, damit Nicht-Retina-Geräte die große Datei nicht herunterladen.

Wann sollte ich SVG statt 2x Raster verwenden?

Für Logos, Icons und flache Grafiken: Ja – SVG ist auflösungsunabhängig und bleibt bei jeder Größe scharf, ohne zusätzliche Dateien. Für Fotografien ist Raster (mit 2x-Varianten) immer noch die richtige Wahl. Sehen Sie sich den SVG to PNG guide an.

Wie stelle ich Retina-Bilder bereit?

Verwenden Sie srcset mit 1x und 2x (und optional 3x) Quellen, lassen Sie den Browser die Auswahl basierend auf dem Device Pixel Ratio treffen. Versenden Sie das 1x als Standard-src, damit ältere Browser sauber zurückfallen können. Der Browser lädt nur die benötigte Variante herunter.

Verlangsamt srcset die Seite?

Nein – der Browser lädt nur die eine benötigte Variante, sodass ein kleiner Bildschirm die kleine Datei erhält. Ohne srcset lädt jedes Gerät die größte Datei. srcset spart Bytes, es fügt keine hinzu.