Blog

PNG oder JPEG für Screenshots? Wir haben 63 echte gemessen

Geschrieben von InSnap · Veröffentlicht · PNG oder JPEG, Screenshot Dateigröße, WebP, Bildformat, Screenshot

PNG oder JPEG für Screenshots? Wir haben 63 echte gemessen

Bei Oberflächen-Screenshots ist JPEG oft nicht kleiner als PNG. Wir haben PNG, JPEG und WebP an 63 echten Screenshots gemessen: Größe, Textfehler und was wirklich hilft.

Bei einem Screenshot eines App-Fensters ist JPEG oft nicht kleiner als PNG. In unserem Test mit 63 echten Oberflächen-Screenshots lag JPEG mit Qualität 85 im Median bei 96% der PNG-Größe, und bei 40% der Bilder war es sogar größer. Um eine deutlich kleinere Datei zu bekommen, musst du auf Qualität 70 oder darunter gehen, und das erzeugt Halos um den Text.

Die größere Ersparnis liegt woanders: einen Retina-Screenshot auf 1x zu verkleinern. Das ist die Einstellung, zu der du zuerst greifen solltest.

So haben wir gemessen

Wir haben 63 Screenshots der eigenen InSnap-Oberfläche in Retina-Größe (2x) gerendert, jeweils 1840 × 1320 Pixel: 20 Einstellungsseiten, 18 Verlaufsansichten, 7 Ansichten des Bildeditors, 13 des Anleitungseditors und 5 des Videoeditors. Das PNG lag, so wie gespeichert, im Median bei etwa 195 KB.

Jedes Bild wurde als PNG mit Optimierung neu kodiert, als JPEG mit Qualität 95, 85, 70 und 50 sowie als WebP, verlustfrei und verlustbehaftet. Für jedes Ergebnis haben wir die Dateigröße relativ zum PNG erfasst und den Anteil der Pixel, die sichtbar veränderten: also jene, bei denen ein Farbkanal um mehr als 8 von 255 abweicht.

Das sind flache Oberflächeninhalte, der typische „Screenshot einer App“, ohne Fotos. Ein vollständiges Retina-Display hat etwa dreimal so viele Pixel wie diese Fenster, deshalb werden die absoluten Größen auf deinem Gerät größer ausfallen.

Die Ergebnisse

Dateigröße von JPEG und WebP im Vergleich zu PNG, nach Bildschirmtyp
KodierungGröße im Vergleich zu PNG (Spanne über die fünf Bildschirmtypen)Sichtbar veränderte Pixel
PNG100%0%
JPEG, Qualität 95107% bis 181%0.5% bis 1.2%
JPEG, Qualität 8570% bis 119%1.4% bis 1.8%
JPEG, Qualität 7054% bis 94%2.5% bis 3.0%
JPEG, Qualität 5045% bis 78%3.5% bis 4.1%
WebP, verlustfrei31% bis 55%0%
WebP, Qualität 9030% bis 44%0.5% bis 1.3%

Drei Dinge fallen auf.

  • Hochwertiges JPEG kann mehr kosten als PNG. Flache Farben und scharfe Kanten sind das, was PNG am besten komprimiert und JPEG am schlechtesten verarbeitet. JPEG mit vollem Chroma (4:4:4), das farbigen Text sauberer hält, war noch größer: 93% bis 155% der PNG-Größe bei Qualität 85.
  • Verlustfreies WebP war die kleinste verlustfreie Option, mit 31% bis 55% der PNG-Größe. InSnap speichert nur PNG oder JPEG. Das zeigt also, was ein anderer Encoder leisten könnte, und ist keine Einstellung, die du wählen kannst. Prüfe vorher, ob die Stelle, an die du hochlädst, WebP annimmt.
  • Jeder verlustbehaftete Schritt verändert den Text. Den Preis für ein kleineres JPEG zahlst du genau an den Pixeln, auf die es dir ankommt.
Derselbe Button in vier JPEG-Qualitätsstufen

Bei Qualität 85 ist der Button-Text fast identisch, und die Datei hat dieselbe Größe wie das PNG, also gibt es nichts zu gewinnen. Bei 70 und 50 wird die Datei kleiner, und um die weißen Buchstaben erscheint ein leichter Halo.

Was einen Screenshot wirklich kleiner macht

Herunterskalieren schlägt Neukodieren. Ein Retina-Screenshot hat die vierfache Pixelzahl eines 1x-Bildes, und in InSnap ist das eine einzige Option.

Änderung (Median der 63)Größe im Vergleich zum 2x-PNG
Auf 1x skalieren, PNG beibehalten67%
Auf 1x skalieren, dann JPEG Qualität 8537%
JPEG Qualität 85 bei 2x96%

Flache Oberflächenbilder komprimieren so gut, dass das Reduzieren der Pixelzahl um drei Viertel ein PNG nur um ein Drittel verkleinert. Die Kombination aus 1x und JPEG ist aber die kleinste Option, die den Text trotzdem lesbar hält.

In InSnap öffnest du Einstellungen › Sichern, schaltest Retina auf 1x skalieren ein und wählst dort das Bildformat. Die Details stehen in Screenshot-Ausgabe: PNG, JPEG und Zwischenablageformate, und die vollständige Checkliste für zu große Dateien steht in Screenshot zu groß für den Upload? So machst du ihn kleiner.

Welches Format du verwenden solltest

SituationFormat
Dokumentation, Fehlerberichte, Folien, alles mit TextPNG
Zu groß für eine E-Mail oder ein FormularZuerst Retina auf 1x skalieren, dann JPEG mit Qualität 85 oder höher, falls das Ziel es verlangt
Ein Foto oder ein VideobildJPEG; Fotos haben wir nicht gemessen, und JPEG ist genau dafür gedacht
Du bearbeitest oder beschneidest es erneutPNG; JPEG verliert bei jedem erneuten Speichern etwas

Häufige Fragen

Sind Screenshots als JPEG kleiner als PNG?

Nicht verlässlich. Bei flachen Oberflächen-Screenshots war JPEG mit Qualität 85 in unserem Test ungefähr so groß wie PNG und bei 40% der Bilder größer. Bei niedrigeren Qualitäten wird es kleiner, mit sichtbaren Artefakten um den Text.

Warum ist mein JPEG-Screenshot größer als das PNG?

Screenshots bestehen meist aus flachen Farben und scharfen Kanten. PNG speichert das sehr effizient, während JPEG Bits auf die Kanten verwendet, um Unschärfe zu vermeiden. Bei Fotos ist es umgekehrt.

Verschlechtert das Herunterskalieren eines Retina-Screenshots auf 1x die Qualität?

Es halbiert Breite und Höhe, der Text wird also mit einem Viertel der Pixel dargestellt. Für Dokumente, Chat und E-Mail ist das in Ordnung. Behalte die volle Auflösung, wenn das Bild auf einem Retina-Display betrachtet oder erneut zugeschnitten wird.

Ist WebP besser als PNG für Screenshots?

In unserem Test war verlustfreies WebP 31% bis 55% der PNG-Größe, ohne dass sich die Pixel veränderten. InSnap speichert nur PNG oder JPEG, und manche Uploads nehmen WebP nicht an. Prüfe deshalb das Ziel, bevor du umwandelst.

Dein nächster Screenshot ist nur ein Tastenkürzel entfernt.

macOS 14.4+ (Apple Silicon & Intel) · Windows 10+ (64 Bit)