PNG vs JPG vs WebP

Die Regel in einer Zeile

Fotografien gehören in JPG oder WebP. Screenshots, Logos, Strichzeichnungen und alles, was Transparenz braucht, gehören in PNG oder WebP. Wenn du dir nur eines merkst: Die Frage ist nicht „welches Format ist das beste“, sondern „hat dieses Bild weiche Verläufe oder flächige, einfarbige Bereiche“.

Was jedes Format tatsächlich tut

JPG (JPEG)

Verlustbehaftet. Es überführt das Bild in eine Frequenzdarstellung, verwirft die Details, für die dein Auge am unempfindlichsten ist, und speichert den Rest. Deshalb ist es bei Fotos so klein und bei Text so schlecht: Scharfe Kanten zwischen zwei Flächenfarben sind genau die hochfrequente Information, die es verwirft — sichtbar als grauer Flaum um Buchstaben in einem komprimierten Screenshot. JPG kennt keine Transparenz, und jedes erneute Speichern häuft den Verlust weiter an.

PNG

Verlustfrei, mit vollständiger Alphatransparenz. Es komprimiert, indem es nach Wiederholungen sucht, was es bei Flächenfarben hervorragend macht — ein Oberflächen-Screenshot oder ein Logo kann drastisch kleiner ausfallen als das entsprechende JPG, und dabei gestochen scharf. Bei einer Fotografie, wo kaum zwei benachbarte Pixel identisch sind, erzeugt derselbe Ansatz eine mehrfach größere Datei als JPG, ohne sichtbaren Gewinn.

WebP

Beides in einem Container: ein verlustbehafteter Modus für Fotos und ein verlustfreier für Grafiken, dazu Transparenz in beiden. Googles eigene Vergleichsstudie sieht verlustfreies WebP rund 26 % unter PNG und verlustbehaftetes WebP etwa 25–34 % unter JPG bei gleichwertiger Qualität (WebP compression study). Jeder aktuelle Browser — Chrome, Firefox, Safari, Edge — dekodiert es.

Die Wahl, je nachdem, was das Bild ist

Vier Fehler, die echte Qualität kosten

• Ein Foto als PNG speichern, „um die Qualität zu behalten“. Verlustfrei bewahrt, was man hineingibt. War die Quelle schon ein JPG, holt die Umwandlung in PNG nichts zurück und vervielfacht nur die Dateigröße.
• Dasselbe JPG immer wieder neu speichern. Jedes Speichern quantisiert das Bild erneut. Bearbeite vom Original aus und exportiere einmal.
• Komprimieren, wo die Größe zu ändern wäre. Ein 6000 px breites Foto in einer 600-px-Spalte hat 100-mal mehr Pixel als nötig. Erst die Größe ändern, dann komprimieren — in dieser Reihenfolge. Die Bildgröße ändern, then es komprimieren.
• Der Qualität 100 hinterherjagen. Das obere Ende der JPG-Qualitätsskala bringt kaum sichtbare Verbesserung bei großem Größenaufschlag. Bei etwa 80 lassen sich die meisten Fotos nicht mehr vom Original unterscheiden.

Probier es an deiner eigenen Datei

Formatratschläge sind allgemein; dein Bild ist konkret. Eine flächige Illustration und ein verrauschtes Nachtfoto verhalten sich völlig unterschiedlich. Am schnellsten klärst du es, indem du dieselbe Datei durch beide schickst und die Zahlen vergleichst: in WebP umwandeln, in JPG umwandeln, in PNG umwandeln. The Komprimierung enthält außerdem eine Qualitätsleiter, die deine Datei in mehreren Stufen zugleich kodiert und die echten Größen nennt — gemessen an deinem Bild statt am Testmaterial anderer.

Alles passiert in deinem Browser, du kannst das also mit Bildern tun, die du nie auf eine Testseite hochladen würdest. Genau darum geht es bei Kobra IMG.