Zwischen PNG und JPG wandeln, ohne das Wesentliche zu verlieren

Dies ist kein Artikel über die Formatwahl

Welches Format ein Bild haben sollte, ist eine eigene Frage, beantwortet danach, ob es fotografisch oder flächig ist und ob es Transparenz braucht; das haben wir anderswo behandelt. Dieser Artikel handelt davon, was die Umwandlung selbst kostet, wenn die Entscheidung gefallen ist — und beide Richtungen zwischen PNG und JPG haben je einen konkreten Fehlerfall, der mit der richtigen Formatwahl nichts zu tun hat.

Die beiden Fehler sind Gegenstücke, und deshalb lohnt es sich, sie zusammen zu lernen. PNG nach JPG verliert etwas, das die Datei hatte, und sagt es nicht. JPG nach PNG verliert nichts — und genau deshalb ist es so oft das Falsche.

PNG nach JPG: Der Konverter wählt deine Hintergrundfarbe

JPEG speichert drei Kanäle und keinen vierten. Das Format hat keinen Ort, um festzuhalten, dass ein Pixel transparent ist, also muss ein Konverter entscheiden, welche Farbe dieses Pixel bekommt — und jeder Konverter entscheidet anders, ohne zu fragen. Wir haben das mit einem 600 × 400-Logo auf Transparenz getestet: 203 445 seiner 240 000 Pixel sind vollständig transparent, 34 333 vollständig deckend und 2 222 liegen dazwischen, auf den geglätteten Kanten der Formen.

Zwei Konverter, dieselbe Datei, dasselbe Zielformat, gegensätzliche Antworten. Apples System-Bildpipeline lieferte Weiß: 95,31 % der ursprünglich transparenten Pixel kamen als exakt 255,255,255 heraus, der Rest war JPEG-Ringing nahe den Kanten. Eine Browser-Canvas — der Mechanismus hinter sehr vielen Online-Konvertern — lieferte Schwarz: 94,82 % kamen als exakt 0,0,0 heraus. Keiner bot eine Wahl, und der Unterschied ist in der Dateivorschau unsichtbar, weil diese Vorschau meist auf hellem Grund liegt, wo die weiße Fassung perfekt aussieht und die schwarze wie eine bewusste Gestaltung.

Die Größe des Fehlers lässt sich leicht beziffern. Wir haben das Original korrekt über Weiß komponiert — was eine Gestalterin gewollt hätte — und verglichen. Das schwarz gefüllte JPEG weicht von diesem korrekten Ergebnis im Mittel um 217,60 Stufen über das ganze Bild ab, weil 84,77 % des Bildes nun ein schwarzes Rechteck statt nichts sind. Die weiß gefüllte Fassung weicht um 0,32 Stufen ab: auf weißer Seite im Wesentlichen richtig. Auf dunkler Seite tauschen beide die Rollen. Der Punkt ist nicht, dass Weiß richtig wäre, sondern dass der Konverter eine Entscheidung über deine Gestaltung getroffen und sie nicht erwähnt hat.

Der Saum ist schlimmer als das Rechteck

Ein schwarzer oder weißer Kasten um ein Logo ist immerhin offensichtlich. Der Schaden, der in Produktion geht, sitzt an den Kanten. Diese 2 222 teiltransparenten Pixel sind das Antialiasing, das Kurven und Schrift glatt aussehen lässt, und jedes von ihnen ist eine noch nicht aufgelöste Mischung. Füllt der Konverter mit der falschen Farbe, mischen sie zu dieser Farbe hin statt zu der deiner Seite.

Ein Pixel aus unserem Test zeigt es genau. An den Koordinaten 244,59 speichert die Quelle die Farbe 28,76,217 — ein kräftiges Blau — mit einem Alpha von 120, also 47 % Pixeldeckung. Über Weiß komponiert, wie gedacht, sollte es 148,171,237 ergeben: ein blasses, weiches Blau, das die Kurve glatt wirken lässt. Im schwarz gefüllten JPEG steht dort 16,39,89: fast schwarz. Über alle 2 222 Saumpixel beträgt der mittlere Fehler gegen die korrekte Komposition 141,04 Stufen, gegen 6,54 bei der weiß gefüllten Fassung. Setz dieses Logo auf eine weiße Seite: Es ist nicht nur eingerahmt, es ist von einem dunklen Halo umzogen, den kein Skalieren und kein erneuter Export entfernt — denn es sind jetzt die tatsächlichen Bilddaten.

JPG nach PNG: verlustfrei — und deshalb nutzlos

Das ist vermutlich die häufigste vergeudete Umwandlung im Web, und sie entspringt einer plausibel klingenden Intuition: PNG ist das verlustfreie Format, also müsste das Bild als PNG geschützt sein. Ist es auch — vor jedem weiteren Verlust. Am bereits eingetretenen Verlust ändert es nichts, denn dieser Verlust liegt nicht irgendwo getrennt. Die quantisierten, blockigen, mit Ringing versehenen JPEG-Pixel sind jetzt das Bild, und PNGs Aufgabe ist es, exakt wiederzugeben, was es bekommt.

Wir haben es an einer echten Datei gemessen. Das 1600 × 900-Foto bei Qualität 75 hat 314 890 Bytes. Als PNG sind es 1 501 885 Bytes — das 4,76-Fache. Dass beide identisch sind, haben wir durch Decodieren in Rohbitmaps bestätigt: je 4 320 054 Bytes und derselbe SHA-256-Hash. Kein einziges Pixel wurde besser; die Datei ist nur fünfmal schwerer auszuliefern.

Das Verhältnis wird schlechter, je schlechter das JPEG ist — das ist der widersinnige Teil. Bei Qualität 90 hat dasselbe Foto 426 601 Bytes und sein PNG 1 587 574 — ein Aufschlag von 3,72 ×. Bei Qualität 30 hat das JPEG nur 92 816 Bytes, das PNG aber immer noch 1 061 895 — ein Aufschlag von 11,44 ×. Der Grund: PNG komprimiert, indem es jedes Pixel aus seinen Nachbarn vorhersagt, und ein stark komprimiertes JPEG steckt voller 8 × 8-Blockkanten und Ringing, die kein Prädiktor erwartet. Du zahlst eine Million Bytes, um Artefakte präzise zu speichern. Verlangt eine Plattform PNG, gib ihr PNG; sonst ist diese Umwandlung eine Rechnung ohne Gegenleistung.

Das Detail, das JPEG für farbigen Text untauglich macht

JPEG codiert nicht Rot, Grün und Blau. Es wandelt in einen Helligkeitskanal und zwei Farbdifferenzkanäle um und speichert die Farbkanäle dann — standardmäßig — mit halber Auflösung in Breite und Höhe. Das ist Chroma-Unterabtastung, ein guter Handel bei einem Foto, wo Farbe sich langsam ändert. Ein schlechter Handel überall dort, wo Farbe an einer harten Kante wechselt — und genau das ist farbiger Text.

Wir haben ein 1000 × 360-Testblatt mit drei Bändern desselben Satzes auf Weiß gerendert: neutrales Schwarz, gesättigtes Rot, gesättigtes Blau. Bei Qualität 75 beträgt der mittlere Fehler des schwarzen Bandes 0,365 Stufen pro Pixel bei einem Chroma-Fehler von exakt null, denn grauer Text hat keine Farbe zu verlieren. Der Fehler des roten Bandes ist 1,265 mit einem Chroma-Anteil von 0,862. Der des blauen Bandes ist 2,362 mit einem Chroma-Anteil von 1,783 — das Sechseinhalbfache des Gesamtfehlers im schwarzen Band, in derselben Datei, bei derselben Einstellung, mit derselben Schrift. Zählt man nur Pixel, die in der Quelle reinweiß waren, sind im schwarzen Band 6,8 % verunreinigt, im roten 19,1 % und im blauen 36,1 %.

Überraschend ist, dass Höherdrehen der Qualität kaum hilft. Wir haben die Abtastfaktoren direkt aus den Dateien gelesen: Bei Qualität 75 wie bei Qualität 90 schreibt unser Encoder dasselbe unterabgetastete Layout, und erst bei Qualität 100 wechselt er zu Farbe in voller Auflösung. Von 75 auf 90 wuchs die Datei also von 80 122 auf 98 578 Bytes und das blaue Band verbesserte sich von 2,362 auf 2,116 — 23 % mehr Bytes für 10 % besser. Qualität 100 behebt es endlich und bringt das blaue Band auf 0,143, bei 213 085 Bytes. Das PNG derselben Seite hat 57 854 Bytes und ist exakt. Ist das Bild farbiger Text, ist der Qualitätsregler nicht der gesuchte Regler — das Format ist es.

Häufige Fragen

Warum hat mein Logo einen weißen Kasten bekommen?

Weil du ein PNG mit Transparenz nach JPG gewandelt hast und JPEG keinen Alphakanal hat: Der Konverter hat den transparenten Bereich auf eine selbst gewählte Hintergrundfarbe komponiert. Unserer wählte bei derselben Datei in einem Werkzeug Weiß und im anderen Schwarz. Die Lösung: das Motiv vor dem Wandeln selbst auf die Farbe der Zielseite legen — oder das PNG behalten, wenn die Transparenz der Punkt ist.

Verbessert die Umwandlung eines JPG nach PNG die Qualität?

Kann sie nicht. Wir haben ein JPEG mit Qualität 75 nach PNG gewandelt und beide in Rohbitmaps decodiert: Byte für Byte identisch, derselbe SHA-256-Hash. Geändert hat sich nur die Dateigröße, von 314 890 auf 1 501 885 Bytes. Die Umwandlung ist wirklich verlustfrei, und genau das ist der Punkt — verlustfrei heißt, sie kopiert, was sie bekommen hat, samt jeder Blockkante und jedem Ringing, das im JPEG bereits steckte.

Wann ist die Umwandlung von JPG nach PNG tatsächlich richtig?

Wenn der Grund im nächsten Schritt liegt und nicht im Bild. Ein verlustfreies Zwischenformat während der Bearbeitung, damit wiederholtes Speichern das Bild nicht jedes Mal neu quantisiert. Ein Werkzeug, eine Druckerei oder eine Plattform, die nichts anderes annimmt. Eine Datei, die du freistellen und der du echte Transparenz geben willst, die JPEG gar nicht speichern kann. In all diesen Fällen ist das PNG eine Arbeitsdatei, kein Ergebnis — veröffentliche am Ende das JPEG oder besser ein WebP.

Kann ich die JPEG-Qualität erhöhen, um unscharfen Farbtext zu beheben?

Kaum, und nicht aus dem erwarteten Grund. Die Unschärfe bei farbigem Text stammt von der Chroma-Unterabtastung, die die meisten Encoder bis ganz oben auf der Qualitätsskala aktiv lassen. Wir haben die Abtastfaktoren aus unseren eigenen Dateien gelesen: Qualität 75 und Qualität 90 nutzen dieselbe unterabgetastete Farbe, das Höherdrehen ließ die Datei also um 23 % wachsen und verbesserte das blaue Textband um nur 10 %. Qualität 100 codiert die Farbe endlich in voller Auflösung und behebt es tatsächlich — mit 213 085 Bytes gegen 57 854 für dieselbe Seite als PNG. Nimm PNG.

Ist die Transparenz wirklich weg oder nur verborgen?

Wirklich weg. JPEG hat drei Kanäle und keinen vierten, in dem sich etwas verstecken ließe. Ist die Datei geschrieben, ist ein einst transparentes Pixel ein gewöhnliches deckendes Pixel in der vom Konverter gewählten Farbe — nicht zu unterscheiden von einem Pixel, das die Gestalterin absichtlich so gefärbt hat. Wandelst du das JPEG zurück nach PNG, bekommst du wieder einen Alphakanal, aber überall vollständig deckend. Behalte das ursprüngliche PNG.