WebP vs PNG
Beide speichern Fotos, gehen dabei aber unterschiedliche Kompromisse ein. Hier liegen die echten Unterschiede — und die Entscheidungshilfe.
Short answer
Ist das Bild ein Foto oder ein Screenshot davon, wird WebP drastisch kleiner. Handelt es sich um Strichzeichnungen, ein Logo oder Text, der pixelgenau bleiben soll, bleiben Sie bei PNG.
Why this comes up
Die meisten, die zu diesem Vergleich kommen, wägen nicht zwei Formate sachlich ab. Sie haben ein PNG, das unerklärlicherweise 4 MB groß ist, und wollen es kleiner. Das ist wichtig, denn der Grund für die 4 MB entscheidet, ob WebP überhaupt hilft — und gelegentlich lautet die richtige Antwort, dass PNG nie das Problem war.
Direkter Vergleich
| Eigenschaft | WebP | PNG |
|---|---|---|
| Komprimierung | Verlustbehaftet | Verlustfrei |
| Transparenz | Ja | Ja |
| Typische Dateigröße | 65-75% eines vergleichbaren JPEGs | 300-500% eines vergleichbaren JPEGs |
| Kompatibilität | Von allen aktuellen Browsern und den meisten Programmen unterstützt | Lässt sich überall öffnen, auch mit jahrzehntealter Software |
| Stammt meist von | Websites, die ihr Ladegewicht optimieren | Screenshots, Logos und Grafiken |
What actually differs
PNG ist per Definition verlustfrei, WebP meistens nicht
PNG speichert jedes Pixel exakt so, wie es geliefert wurde — deshalb verliert es nie an Qualität und deshalb ist es groß. WebP hat einen verlustbehafteten und einen verlustfreien Modus, und die zitierten Größenangaben stammen fast immer aus dem verlustbehafteten. „WebP" mit PNG zu vergleichen, ohne den Modus zu nennen, vergleicht zwei verschiedene Dinge. Verlustfreies WebP spart typischerweise rund 25 % gegenüber PNG, verlustbehaftetes 80 % und mehr.
Dass PNG bei Fotos riesig wird, hat einen strukturellen Grund
PNG komprimiert, indem es Wiederholungen in Pixelzeilen findet. Ein Screenshot eines Einstellungsdialogs besteht überwiegend aus wiederholter Flächenfarbe und lässt sich hervorragend komprimieren. Ein Foto enthält fast keine exakte Wiederholung — jedes Pixel weicht leicht vom Nachbarn ab —, also speichert PNG nahezu alles wörtlich und die Datei wächst auf das Drei- bis Fünffache eines JPEG. Das ist kein Mangel, sondern das, was verlustfrei bei verrauschten Daten bedeutet.
Beide können Transparenz, das entscheidet also nichts
Das gehört gesagt, weil genau diese Annahme viele reflexhaft zu PNG greifen lässt. WebP unterstützt einen vollen 8-Bit-Alphakanal in beiden Modi. Ein Logo auf transparentem Hintergrund muss kein PNG sein, um transparent zu bleiben — es muss PNG sein, wenn Sie es pixelgenau brauchen.
Which to use
Use WebP for
Fotos, fotolastige Screenshots und jede Web-Auslieferung, bei der die Datei betrachtet und nicht weiterbearbeitet wird.
Use PNG for
Screenshots von Text und Oberflächen, Logos und Strichzeichnungen, alles, was in einen weiteren Bearbeitungsdurchgang geht, und jede Datei, die wiederholtes Speichern unverändert überstehen muss.
One thing that catches people out
Verlustbehaftetes WebP ist für Text-Screenshots eine schlechte Idee
Verlustbehaftete Kompression ist auf fotografische Details abgestimmt und geht mit harten Schwarz-auf-Weiß-Kanten schlecht um: Buchstabenformen bekommen einen grauen Hof, dünne Striche verschmieren. Ein Screenshot eines Terminals oder Code-Editors ist der schlimmste Fall. Ist die Datei groß und voller Text, greifen Sie zu verlustfreiem WebP oder lassen es bei PNG — die Ersparnis ist kleiner, der Text bleibt lesbar.