shadcn.io— Tausende fertige shadcn/ui-Blöcke
Zum Inhalt springen

Warum deine Screenshots 2 MB sind — und wie du sie um 60–90 % schrumpfst

Ich habe mal die Screenshots in einem einzigen E-Mail-Verlauf zur Design-Review gezählt. Elf davon, PNG, im Schnitt knapp unter 2 MB pro Stück. Gut zwanzig Megabyte überwiegend weißer Dashboards, die zwischen sechs Leuten hin und her flogen, die alle dieselbe App in einem anderen Tab offen hatten. Niemand dachte darüber nach, weil es „funktionierte". Das ist die Falle. Screenshots sind still enorm, und der Grund steckt darin, wie dein Rechner sie aufnimmt.

Warum ein Screenshot eine 2-MB-Datei ist

Wenn du das Screenshot-Kürzel drückst, speichert dein Betriebssystem ein PNG. Das ist ein vernünftiger Standard — PNG ist verlustfrei, die Aufnahme ist also pixelgenau, und für einen Screenshot voller scharfem Text ist das wirklich der richtige Instinkt. Das Problem ist, was PNG mit der Größe macht.

PNG speichert jeden Pixel exakt. Ein moderner Bildschirm ist dicht — eine Vollfenster-Aufnahme auf einem Retina- oder 4K-Display kann über 2.000 Pixel breit sein, und PNG hält jeden dieser Millionen Pixel treu in voller Treue fest. Es kümmert sich nicht darum, dass 60 % des Bildes derselbe Fast-Weiß-Ton sind. Es wirft nichts weg, denn Wegwerfen ist nicht das, was es tut. Ein Screenshot einer fast leeren Einstellungsseite — optisch fast nichts — wiegt so trotzdem 1,5 bis 2,5 MB, weil die Leinwand riesig ist, selbst wenn der Inhalt dünn ist.

Der Zug: in WebP umwandeln

WebP kann etwas, das PNG nicht kann — verlustbehaftet komprimieren und dabei scharfe Kanten und Transparenz behalten. Bei Screenshots im Besonderen kommt diese Kombination nahe an Zauberei heran, denn ein Screenshot ist überwiegend flache Flächen (billig zu komprimieren) mit etwas Text (den WebP scharf hält). Der verlustbehaftete Durchgang verwirft das unmerkliche Rauschen; dein Auge reicht nie eine Beschwerde ein.

Echte Zahlen von Screenshots auf meiner eigenen Platte:

ScreenshotAls PNGAls WebP
Eine Einstellungsseite, überwiegend weiß1,6 MB~180 KB
Ein volles Analytics-Dashboard2,4 MB~310 KB
Ein Code-Editor im Dark Mode1,9 MB~240 KB

Das sind grob 85–90 % weniger, und nebeneinandergelegt kann ich nicht sagen, welcher welcher ist. Der Text bleibt bis auf den Pixel lesbar. Das ist die Umwandlung mit dem höchsten Ertrag, die ich mache, gerade weil Screenshots von vornherein so wild übergewichtig sind — es gibt eine enorme Menge Nichts herauszuquetschen.

„Wird der Text nicht unscharf?"

Das ist die Angst, und sie ist berechtigt, denn du hast wahrscheinlich einen JPG-Screenshot mit unscharfem, umrandetem Text gesehen und angenommen, alle verlustbehafteten Formate machen das. WebP ist bei Kanten besser als JPG — merklich besser. Bei einer vernünftigen Qualitätsstufe bleibt Text auf einem WebP-Screenshot scharf. Ich habe auf 400 % hineingezoomt und um Buchstabenformen nach Artefakten gejagt und bei normalen UI-Aufnahmen nichts gefunden.

Die ehrliche Ausnahme: Wenn du die Qualität hart herunterdrehst, um eine winzige Datei zu jagen, wirst du den Text irgendwann weich werden sehen. Die Lösung ist, das nicht zu tun. Eine mittlere Qualitätsstufe bringt dir den 60–90-%-Gewinn schon mit intaktem Text. Es gibt keinen Grund, in den Bereich vorzustoßen, wo es bricht.

Wann Schrumpfen nicht hilft

Zwei Fälle, in denen ich das PNG in Ruhe lasse.

Wenn der Screenshot zurück in ein Design-Tool geht, um markiert, kommentiert oder zusammengesetzt zu werden, halte ich ihn verlustfrei. WebPs verlustbehafteter Durchgang ist eine Einbahntür, und ich will keine Kompression in etwas einbrennen, das ich gleich bearbeiten und neu exportieren werde. Liefere das WebP, behalte den PNG-Master — dieselbe Regel wie immer.

Und wenn ein Screenshot schon klein ist — ein winziger zugeschnittener Ausschnitt, ein einzelner Button, etwas schon unter etwa 100 KB —, bewegt die Umwandlung kaum die Nadel. Der 60–90-%-Gewinn kommt von Dateien, die riesig sind, weil die Leinwand riesig ist. Ein kleiner Ausschnitt hat das Problem schon gelöst. Füg keinen Schritt für nichts hinzu.

Wie ich es tatsächlich mache

Ich schicke Screenshots durch den PNG-zu-WebP-Konverter auf dieser Seite, bevor sie auch nur in die Nähe einer E-Mail oder eines Dokuments kommen. Es passiert in deinem Browser, die Aufnahme — die, ehrlich gesagt, oft dein halbes Display und was auch immer im Hintergrund war zeigt — verlässt dein Gerät also nie. Zieh das PNG herein, sieh der Größenspalte beim Zusammenbrechen zu, lade das WebP herunter, häng das stattdessen an.

Der größere Punkt ist nicht das Tool, es ist der Reflex. Sobald „Screenshot, dann schrumpfen" automatisch ist, hörst du auf, 2-MB-Bilder auf Leute zu feuern, die die App schon offen haben, deine Mails senden schneller, und Verläufe blähen nicht mehr auf zweistellige Megabyte auf. Diese Elf-Screenshot-Mail wäre insgesamt rund 2 MB gewesen statt über zwanzig. Dieselben Bilder. Dasselbe alles. Nur ohne das tote Gewicht.

Ähnliche Beiträge


Alle Beiträge