Retina-Bildschirmaufnahme und warum Text in Aufnahmen unscharf wird

Eine Webseite wird in CSS-Pixeln gesetzt, der Bildschirm zeichnet sie in physischen Pixeln. Das Verhältnis heißt Device Pixel Ratio: 1 auf einem klassischen Display, 2 bei dem, was Apple Retina und das Web HiDPI nennt, 3 auf vielen Smartphones. Bei einem Verhältnis von 2 wird eine 1280 Pixel breite Seite mit 2560 physischen Pixeln gezeichnet, jeder Buchstabe hat also viermal so viele Pixel für seine Form.

Eine Retina-Aufnahme behält diese Pixel. Eine Aufnahme mit Verhältnis 1 wirft drei Viertel davon weg, und kein späterer Schritt holt sie zurück. Darum geht es: Schärfe entscheidet sich bei der Aufnahme, nicht beim Export.

Wenn dir das Format selbst neu ist, erklärt was ein Screencast ist die Grundlagen.

Wir haben unscharfen Text durch viele Renderings verfolgt. Das sind die Ursachen, und das macht unsere Pipeline dagegen.

Die fünfte Zeile überrascht. Wir haben sie auf echten Marketing-Websites gemessen: In voller Breite von 1920 Pixeln gesetzt, nahm 14 Pixel großer Fließtext 1,3 % der Bildhöhe ein; mit 1280 Pixeln gesetzt und hochskaliert waren es 1,94 %, also anderthalbmal so groß, bei unverändertem Desktop-Design. Scharfer, aber zu kleiner Text bleibt unlesbar.

Jede gefilmte Szene erzeugt zwei Dinge, und die sind nicht austauschbar.

Ein Videoclip. Der Browser zeichnet die Szene auf, während sie passiert: der gleitende Cursor, der Klick, das Scrollen, die Reaktion der Seite. Diese Aufnahme entsteht in Viewport-Größe, 1280 Pixel breit für einen 16:9-Film und 414 für einen 9:16-Film. Wir haben getestet, den Recorder stattdessen um die volle Filmgröße zu bitten: Er liefert dann nicht das Retina-Bild, sondern setzt die Seite mit Rändern in einen größeren Rahmen. Im Vergleich mit der gerenderten Seite erreichte die Aufnahme in Viewport-Größe mit Hochskalierung einen SSIM von 0,93, die Aufnahme in Filmgröße 0,65 (im Hochformat 0,89 gegen 0,61). Der Clip wird also in Viewport-Größe aufgenommen und einmal, sorgfältig, auf 1920×1080 oder 1080×1920 hochskaliert.

Ein Retina-Standbild. Am Ende der Aktion, mit ausgeblendetem Cursor, machen wir einen Screenshot in voller Dichte: 2× am Desktop, also 2560 Pixel breit, bevor er auf 1920 herunterskaliert wird, und 3× im Smartphone-Viewport. Bei einer Scroll-Szene ist es die ganze Seite. Das Standbild ist das Vorschaubild der Szene, der unscharfe Hintergrund hinter späteren Motion-Graphic-Szenen und das Bild, auf dem die Szene läuft, wenn ihr Clip nicht sauber geschnitten werden kann. Weil es mehr Pixel hat, als das Bild zeigt, kann die Kamera hineinzoomen und scharf bleiben.

Für beide gelten dieselben Kameraregeln. In einem Desktop-Film rahmt eine Szene, die auf eine Karte oder einen Button zielt, dieses Element ein, bis etwa 1,9× bei dieser Größe, und hält dann still; ein Abschnitt in voller Breite bekommt keinen Zoom, weil er das Bild schon füllt. Ein Hochformat-Film wird nie gezoomt: Das mobile Layout füllt die Breite bereits, jeder Zoom würde es beschneiden. Mehr zu den Formaten im Leitfaden zum Seitenverhältnis.

Manche Seiten verzeihen eine weiche Aufnahme: Eine 60-Pixel-Überschrift liest man in jeder Qualität. HIBIKISHOP PC nicht. Die Seite ist eine Preisdatenbank für K-Pop-Fotokarten, ein Raster kleiner Karten mit Gruppe, Mitglied, Album und Marktpreis. Unser 44-Sekunden-Film in 16:9 beginnt mit „Still losing track of your K-Pop photocard prices?“ und zeigt dann die Suche über 16.238 Karten nach Gruppe, Mitglied oder Album, die täglichen Preisänderungen aus Pocamarket und eine Karte, die um 486 % gestiegen ist.

Jede dieser Aussagen ist eine Zahl, die klein auf der Seite steht. Genau dafür gibt es die Retina-Aufnahme: Kann man die Karte unter dem Sprechertext nicht lesen, verlangt der Sprechertext, dass man ihm einfach glaubt. Zwei Entscheidungen tragen so eine Seite. Der 1280-Pixel-Viewport bringt die Schrift im Raster größer ins Bild als ein Layout in voller Breite. Und wenn eine Szene auf eine Karte statt auf das ganze Raster zielt, hat die Kamera Platz, sie einzurahmen und zu halten, sodass der Preis auf dem Handy lesbar ist.

Wenn du so eine Seite filmst, ziele pro Szene auf eine Karte, eine Zeile oder einen Filter, nicht auf das ganze Raster. Ein Raster aus der Totalen ist Textur, eine Karte aus der Nähe ist eine Tatsache.

Wenn du deinen Bildschirm selbst aufnimmst, gelten dieselben Regeln.

Oder du lässt die Aufnahme weg: URL einfügen, und wir filmen die Seite mit diesen Einstellungen in etwa 10 Minuten (siehe Website zu Video). Retina-Aufnahme ist keine Zusatzoption, so entsteht jeder Film, auch der kostenlose erste Film jeder Website; die Tarife stehen unter Preise. Die Abwägungen beider Wege findest du in automatisierte vs. manuelle Screencasts und in PageToVid vs. Bildschirmrekorder.