PNG oder WebP für Screenshots? Drei Dateien im Vergleich
Sieh, wie sich eine Oberfläche, ein Code-Beispiel und ein Verlauf ändern, wenn sie als WebP exportiert werden.
Für einen Screenshot, den du später erneut bearbeiten möchtest, behalte das PNG-Original. Für ein Bild, das auf einer Website erscheinen soll, probiere WebP aus und prüfe dann den kleinsten Text, bevor du es teilst.
Wir haben drei Beispielbilder erstellt und sie mit dem Bildkonverter von CozyToolkit exportiert. Du kannst jedes Ergebnis unten ansehen und herunterladen.
Drei Dateien, dieselben Abmessungen
Wir haben eine Oberfläche mit kleinen Beschriftungen, einen Code-Editor mit farbigem Text und ein Verlaufsplakat gezeichnet. Jedes ist 1200 × 750 Pixel groß. Dies sind synthetische Beispiele, keine Screenshots von Kundendateien.
Die PNG-Exporte verwenden den PNG-Encoder des Browsers. Die WebP-Exporte verwenden Qualität 85, ohne Größenänderung oder Zuschneiden. Die Tabelle zeigt die Größen der gespeicherten Dateien.
| Beispiel | PNG | WebP 85 | Kleiner um |
|---|---|---|---|
| Oberfläche | 92.339 | 24.320 | 74% |
| Code & kleiner Text | 82.732 | 23.088 | 72% |
| Verlaufsposter | 976.385 | 16.746 | 98% |
Zum Verschieben ziehen · Zusammenziehen oder Strg/⌘ + Scrollen zum ZoomenZum Zoomen kneifen · Zum Verschieben ziehen
Verwende + und − zum Zoomen, die Pfeiltasten zum Verschieben und 0 zum Einpassen des Bildes. Der Zoom in der Vorschau ändert nicht deinen Export.
Der Verlauf ergab die größte Ersparnis. Sein PNG enthält viele sich sanft ändernde Pixelwerte; der verlustbehaftete WebP-Encoder kann sie viel kompakter annähern. Die beiden textlastigen Beispiele wurden ebenfalls kleiner, aber die Dateigröße allein sagt nicht aus, ob ihr Text für deinen Zweck gut genug ist.
Dies ist kein Vergleich mit gleicher Qualität. PNG ist hier verlustfrei. WebP ist bei dieser Einstellung verlustbehaftet, das heißt, es kann Pixel verändern. Drei Beispiele können keine durchschnittliche Ersparnis für Screenshots im Allgemeinen belegen, und ein optimiertes PNG von einem anderen Encoder kann kleiner sein als unseres.
Worauf du vor dem Herunterladen achten solltest
Wechsle zwischen den beiden Formaten oben und zoome hinein. Prüfe insbesondere:
- Die farbigen Satzzeichen im Code-Beispiel. Feine farbige Kanten können weich werden, selbst wenn großer Text gut aussieht.
- Die kleinen „Ready to share“-Beschriftungen in der Oberfläche.
- Sanfte Übergänge im Plakat. Achte auf sichtbare Streifen statt eines kontinuierlichen Verlaufs.
Beurteile das Bild auch in seiner beabsichtigten Anzeigegröße. Ein Makel, der bei 400 % sichtbar ist, kann in einer kleinen Vorschau irrelevant sein; eine unscharfe Beschriftung in einem Hilfeartikel ist ein Problem.
Wähle ein Format für den Zweck
Behalte PNG für eine Masterkopie, Pixel-für-Pixel-Vergleiche oder Text, der exakt bleiben muss. Es ist auch ein sinnvoller Fallback, wenn die App, die dein Bild empfängt, WebP nicht akzeptiert.
Probiere WebP für Webseiten und Vorschauen, wenn die gespeicherte Datei gut genug aussieht. Es unterstützt Transparenz, also ist ein transparenter Hintergrund allein kein Grund, es zu vermeiden. WebP unterstützt sowohl verlustfreie als auch verlustbehaftete Kodierung, aber der Qualitätsregler des Browsers, der in diesem Test verwendet wurde, ist kein dedizierter verlustfreier Schalter. Die Einstellung auf 100 stellt nicht sicher, dass dein Export verlustfrei ist. Siehe Googles WebP-Formatdokumentation für den Unterschied.
Probiere es mit deinem Screenshot
- Öffne den Bildkonverter und füge dein PNG hinzu.
- Wähle WebP als Ausgabeformat. Beginne mit Qualität 85 und lasse die Abmessungen unverändert.
- Konvertiere, zoome in das Ergebnis und vergleiche es mit deinem Original.
- Erhöhe die Qualität, wenn kleine Details leiden. Wenn das Ergebnis immer noch falsch aussieht, behalte das PNG.
Wenn das Bild nur mit der halben aktuellen Breite angezeigt wird, kann Größenänderung mehr sparen als ein Formatwechsel. Tue das bewusst: Ein kleineres Bild kann nicht dieselben Details behalten.
Wie dieser Vergleich erstellt wurde
Getestet am 28. September 2026 in Chrome 153.0.8010.53 auf macOS, mit derselben Konvertierungsfunktion wie das Tool. Die Vorlagen wurden auf einem Browser-Canvas mit Systemschriftarten gezeichnet. Die PNG-Konvertierung verwendete keine Palettenreduktion; WebP verwendete den Browser-Encoder mit einem Qualitätsargument von 0,85.
Lade die Messungen herunter, einschließlich exakter Byte-Anzahl und Datei-Hashes. Browser-Encoder und Schriftarten können sich unterscheiden, daher kann das erneute Ausführen des Beispiels auf einem anderen System andere Größen ergeben. Die Prozentsätze oben beschreiben diese speziellen Downloads, kein Versprechen über deine.