Retina-Screenshot

Ein Retina-Screenshot entsteht auf einem High-DPI- beziehungsweise Retina-Display. Er besitzt zwei- oder dreimal so viele Pixel pro Achse wie der sichtbare Viewport und ist dadurch schärfer, aber auch größer.

Related workflow terms: Pixeldichte.

Warum Retina-Screenshots größer sind

Auf einem Display mit normaler Dichte entspricht ein CSS-Pixel einem physischen Pixel. Ein Browserfenster mit 1440 CSS-Pixeln Breite erzeugt einen 1440 Pixel breiten Screenshot.

Bei DPR 2 wird jeder CSS-Pixel durch ein Raster aus 2 × 2 physischen Pixeln dargestellt. Dasselbe Fenster ergibt 2880 Pixel Breite. Bei DPR 3, wie auf leistungsfähigen Mobilgeräten, sind es 4320 Pixel.

Das Bild enthält mehr Details, braucht aber deutlich mehr Speicher. Eine 2×-Aufnahme besitzt viermal so viele Pixel wie dieselbe Ansicht in 1×. Ein PNG mit 500 KB bei 1× kann bei 2× etwa 1,5 bis 2 MB groß sein.

Darum überrascht schon ein kleiner Bildschirmausschnitt mit großen Bildabmessungen: Die Zahl physischer Pixel liegt weit über der sichtbaren logischen Pixelzahl.

Wo das wichtig ist

• Web: Ein 2×-Bild in vollen Pixelabmessungen erscheint doppelt so breit wie vorgesehen. Lege CSS-Breite und -Höhe fest; bei korrekter logischer Größe wirkt es auf Retina-Displays besonders scharf.
• Druck: Die zusätzlichen Pixel sind vorteilhaft. Sie reichen für einen scharfen Druck bei 300 DPI in einer vernünftigen Größe, während dieselbe Ansicht in 1× pixelig wirken kann.
• Dokumentation: Retina-Aufnahmen sind auf High-DPI-Displays klar, können für die Webauslieferung aber unnötig groß sein. 1,5× oder responsive Bilder gleichen Schärfe und Größe aus.
• Speicher: Hunderte Seiten in 2× benötigen wesentlich mehr Speicher und Bandbreite als derselbe Stapel in 1×.

Aufnahmeauflösung steuern

Viele Aufnahme-Tools und Headless-Browser erlauben eine feste Device Pixel Ratio.

Puppeteer und Playwright steuern sie über deviceScaleFactor. Der Wert 1 erzeugt Standarddichte, 2 eine Retina-ähnliche Aufnahme – unabhängig von der tatsächlichen Hardware.

Das macOS-Systemwerkzeug mit Cmd + Umschalt + 3 oder 4 erfasst immer in der nativen DPR des Displays. Auf einem Retina-MacBook bedeutet das 2×. Drittanbieter-Tools können eine 1×-Option anbieten.

Das Windows Snipping Tool verwendet den Skalierungsfaktor des Systems, etwa 100, 125, 150 oder 200 Prozent. Einige automatisierte Werkzeuge können in einem Stapel sowohl 1×- als auch 2×-Varianten erzeugen.

In wiederholbaren Abläufen steht „Retina“ letztlich für eine bewusst gesetzte DPR. Teams können dann kleine 1×-Bilder zur Prüfung oder scharfe 2×-Ausgaben für Marketing, Druck und Archiv wählen.

Häufige Fehler

• Retina-Bilder im Web mit vollen Pixelmaßen anzeigen. Setze die Anzeigeabmessungen ausdrücklich, damit 2880 Bildpixel nicht 2880 CSS-Pixel belegen.
• Dateigröße bei Stapeln übersehen. 500 Seiten in 2× benötigen ungefähr viermal so viel Speicher wie in 1×. Lege vor der Aufnahme fest, ob das nötig ist.
• Mit einer ungeeigneten Methode verkleinern. Nearest Neighbor erzeugt beim Herunterskalieren gezackte Kanten. Bikubisch oder Lanczos liefert ein glatteres Ergebnis.
• Alle Aufnahmen für Retina halten. Unterschiedliche Teamgeräte produzieren 1× und 2× und damit uneinheitliche Größen. Standardisiere die DPR oder setze sie automatisiert.