Visual

Die bösen roten JPG-Kompressionsartefakte

Warum wir die roten Kompressionsartefakte so gut sehen und was wir gegen sie tun können.

Portrait des Autors "Christoph Erdmann"
Autor: Christoph Erdmann (@McSodbrenner)
Letztes Update: 2023-01-10
15 Min. Lesezeit
English version | Deutsche Version

Why, JPG, why?

Während des Austauschs mit einem Illustrator zu einem anderen Artikel kam von diesem die Frage, warum das JPEG-Format eigentlich so schlecht mit der Farbe rot umgehen könne. Als Erklärung sind mir schon so einige Varianten über den Weg gelaufen. Also beantwortete ich die Fragen einfach mit der Variante, die mir am plausibelsten erschien.

Aber war das tatsächlich die richtige Antwort? Und wenn wir die richtige Antwort wüssten... können wir dann nicht auch etwas dagegen tun?

Beurteilung der Bildfehler in den RGB-Farbkanälen

Zuerst einmal habe ich ein Testbild erstellt, um mir anzuschauen, in welchen Fällen Artefakte besonders stark zu sehen sind. Dieses Testbild ist ein Bild im RGB-Farbraum, in dem jede Zeile (1-*, 2-*, 3-*) jeweils nur die Farbe eines Kanals enthält. Pro Zeile allerdings in abnehmend starken Intensitäten.

Bild mit verschiedenen Helligkeiten in jedem RGB-Kanal
RGB-Ausgangs-Bild

Das Bild habe ich dann mit einer Qualität von 50 (bezogen auf die Standard-Quantisierungstabellen aus der JPEG-Spezifikation) zu einem JPG konvertiert. Bei dieser Qualität zeigt das Bild für eine Bewertung ausreichend viele Kompressions-Artefakte. Das Chroma Subsampling habe übrigens ich auf den Wert 4:4:4 gestellt, um eine möglichst präzise Farbwiedergabe zu erhalten.

Bild mit verschiedenen Helligkeiten in jedem RGB-Kanal RGB-JPG mit der Standard-Quantisierungstabelle für eine Qualität von 50 und einem Chroma Subsampling 4:4:4.
RGB-JPG mit der Standard-Quantisierungstabelle für eine Qualität von 50 und einem Chroma Subsampling 4:4:4.

Das erstellte Bild zeigt deutliche Artefakte in den mittleren Helligkeitssstufen für den Rot- und den Grünkanal. Im Blaukanal kann ich praktisch keine Artefakte erkennen. Auch in den sehr hellen und sehr dunklen Bereichen kann ich die Kompressionsartefakte schlechter wahrnehmen. Insgesamt sehe ich sogar stärkere Artefakte in den grünen Bereichen als in den roten. Dazu am besten mal die Felder 1-2 und 2-2 sowie 1-5 und 2-5 vergleichen, wo die Bildfehler im grünen Kanal meiner Meinung nach noch besser zu erkennen sind.

Es stellt sich heraus, dass Kompressionsartefakte in JPEGs also nicht nur in roten Bereichen sehr stark sind, sondern auch in grünen. Wurde da bei der Erstellung des JPEG-Algorithmus geschlafen? Ist das wirklich nicht aufgefallen?

Da unser Auge Helligkeitsunterschiede sehr viel besser wahrnehmen kann als Farbunterschiede (dazu kommen wir gleich noch), habe ich einmal die Pixel des komprimierten Bildes mit Hilfe der Average-Formel ((R+G+B)/3) in Graustufen-Pixel umgewandelt. Dadurch ist sichergestellt, dass alle Farbkanäle gleich behandelt werden:

Kompressions-Artefakte der RGB-Farbkanäle zur besseren Visualisierung in Graustufen.

Überraschenderweise sind die Kompressionsartefakte jetzt in allen drei Kanälen gleich deutlich zu sehen. Der JPEG-Algorithmus scheint die drei Farbkanäle also gleich zu behandeln und keine Farbe zu bevorzugen oder zu vernachlässigen. Dass wir die Artefakte unterschiedlich stark wahrnehmen, muss also in irgendeiner Weise mit unserem Auge zu tun haben.

Wie funktioniert unser Auge?

Wer sich an den Biologie-Unterricht in der Schule zurückerinnert, weiß vielleicht noch, dass sich im Auge die sogenannten Stäbchen und die Zäpfchen befinden.

Die Stäbchen sind für die Wahrnehmung von Helligkeit zuständig. Sie sind den Zäpfchen ganz klar in ihrer Anzahl überlegen und auch sehr viel empfindlicher als diese. Während die Zäpfchen bei schwachem Licht kaum etwas wahrnehmen, sind die Stäbchen schon schwer am Arbeiten. Das ist der Grund, warum wir uns bei sehr wenig Licht noch gut orientieren können, die Farben dann allerdings nur noch als Grau wahrnehmen (dieser Tatsache entspringt übrigens das Sprichwort "Nachts sind alle Katzen grau").

Die für uns im Moment interessanteren Sinneszellen sind die farbwahrnehmenden Zäpfchen, von denen es drei verschiedene gibt.

Relative Sensitivität der Zäpfchen im Auge.

Die S-Zäpfchen (S für "Short", also kurzwelliges Licht) reagieren am besten auf das Licht der Wellenlänge von ca. 420nm und werden daher auch die Blau-Rezeptoren genannt. Sie machen lediglich ca. zwölf Prozent aller Zäpfchen aus. Daher können wir Unterschiede rund um die Farbe Blau relativ schlecht wahrnehmen.

Die M-Zäpfchen (M für "Medium", also mittelwelliges Licht) haben ein Faible für das Licht rund um 530nm. Ihr sogenannten Absorptionsmaximum ist bei der Farbe Grün. Sie werden daher Grün-Rezeptoren genannt. Da wir durch die Natur normalerweise viel Grün um uns herum haben sollten (manche Jugendliche eher weniger), macht es durchaus Sinn, dass wir Abstufungen in dieser Farbe gut erkennen können.

Schließlich haben wir noch die L-Zäpfchen (L für "Long", also langwelliges Licht), welche am besten auf ein grünliches Gelb mit dem Maximum bei ca. 560nm reagieren. Diese werden auch Rot-Rezeptoren genannt, weil sie auch einen großen Teil der Wahrnehmung des rötlichen Lichts abdecken.

Die L- und M-Zäpfchen machen bei etwa gleicher quantitativer Verteilung zusammen ca. 88% aller Zäpfchen aus, was bedeutet, dass wir Nuancen im Licht dieser Wellenlängen sehr gut differenzieren können. Schaut man sich folgende Grafik an, welche die Sensitivität des Auges auf sichtbares Licht unter Berücksichtigung der quantitativen Verteilung der Zäpfchen darstellt, wird ersichtlich, dass wir Grün, Gelb und Rot sehr gut unterscheiden können, während wir in den Farben Türkis, Blau und Violett Wahrnehmungsschwächen haben.

Sensitivität des Auges auf sichtbaren Licht.

Aber warum sind rote JPG-Artefakte so gut sichtbar?

Rot ist eine Signalfarbe, die in Bildern gern in z.B. Störern verwendet wird, zu denen unser Auge gelenkt wird, und in denen wir die Artefakte gut auf der meist einfarbigen Fläche wahrnehmen können. Das von uns sogar noch besser wahrnehmbare Grün befindet sich oft in natürlichen Objekten wie Pflanzen oder Bäumen, die naturgemäß viele unruhige Bilddetails (hochfrequente Anteile) besitzen, weshalb die Artefakte in ihnen untergehen.

Der Konter

Da wir jetzt wissen, welche Farben unser Auge besser sehen kann, bleibt die Frage, ob wir etwas dagegen tun können. Theoretisch müssten wir die Farben, die wir schlecht sehen können, auch mit einer höheren Kompression versehen können, und andersherum müssten wir Farben, die wir sehr gut sehen können, weniger stark komprimieren.

Jetzt hilft wieder ein bisschen Hintergrundwissen zum JPEG-Format. Dieses speichert nämlich die Bildbestandteile im YCbCr-Farbraum. Das Y steht dabei für die Helligkeit, Cb für die Farbigkeit zwischen und Blau und Gelb, und Cr für die Farbigkeit zwischen Rot und Grün. Diese Konvertierung in den YCbCr-Farbraum ist sehr nützlich, weil der Mensch wie weiter oben erwähnt besser Helligkeiten als Farben erkennen kann, weshalb man zum einen unterschiedliche Kompressionsstärken für die Helligkeit und die Farbigkeit verwenden kann. Und zum anderen, weil man in der Farbkanälen darüber hinaus Farbinformationen weglassen kann (Chroma Subsampling).

Bild mit verschiedenen Helligkeiten in jedem RGB-Kanal.
RGB-Ausgangs-Bild
Der Y-Kanal eines Bildes im YCbCr-Farbraum.
Y-Kanal
Der Cb-Kanal eines Bildes im YCbCr-Farbraum.
Cb-Kanal (Blau-Gelb)
Der Cr-Kanal eines Bildes im YCbCr-Farbraum.
Cr-Kanal (Rot-Grün)

Die Kompressionsstärke wird im JPEG-Algorithmus durch Quantisierungstabellen definiert. Und in den meisten Fällen werden in JPGs zwei von diesen Tabellen eingebettet: Eine für die Helligkeit, also den Y-Kanal, und eine für die beiden Farbkanäle. Aber es ist durchaus möglich, für die beiden Farbkanäle unterschiedliche Tabellen einzubetten, auch wenn ich das bisher nur einmal gesehen habe, als unsinnigerweise die gleichen Quantisierungstabellen mit den exakt gleichen Werten verwendet wurden.

Als Test habe ich einmal das Ausgangsbild mit einer schwachen Kompression für den Cr-Kanal (Q 74) und einer starken für den Cb-Kanal (Q 5) versehen. Der Y-Kanal ist wie beim im Eingangsbeispiel auf einem Wert von Q 50 geblieben:

Bild mit starker Kompression im Cb-Farbkanal und schwacher Kompression im Cr-Farbkanal.
Das neue Ergebnis: 16.118 Bytes
Bild mit verschiedenen Helligkeiten in jedem RGB-Kanal.
Das alte Ergebnis: 16.214 Bytes

Bei sogar geringfügig kleinerer Dateigröße hat das neue Ergebnis deutlich weniger Artefakte in den grünen und roten Feldern, während in den blauen nur schwach sichtbare Artefakte hinzugekommen sind. Die Verwendung unterschiedlicher Quantisierungstabellen für die Farbkanäle kann tatsächlich einen Unterschied machen, was aber noch mit unterschiedlichem Ausgangsmaterial zu bestätigen war, da wir bisher nur ein konstruiertes Testbild verwendet hatten:

Comic-Art-Explosion
Das alte Ergebnis: 19.463 Bytes
Quelle: Bild von maniacvector auf Freepik
Comic-Art-Explosion mit reduzierter Qualität im Cb-Kanal
Das neue Ergebnis: 18.962 Bytes

Fashion-Sale-Banner
Das alte Ergebnis: 7.191 Bytes
Quelle: Bild von Sketchepedia auf Freepik
Fashion-Sale-Banner mit reduzierter Qualität im Cb-Kanal
Das neue Ergebnis: 7.680 Bytes
Lauf-Sportschuh-Illustration
Das alte Ergebnis: 8.273 Bytes
Quelle: Bild von macrovector auf Freepik
Lauf-Sportschuh-Illustration mit reduzierter Qualität im Cb-Kanal
Das neue Ergebnis: 8.118 Bytes

Anhand dieser Beispiele, bei denen ich versucht habe, eine ähnliche Dateigröße zu erzielen, sieht man, dass man durchaus die Anzahl der Artefakte aus der roten Farbe in die blaue verschieben kann. Allerdings ist der Nutzen in der Praxis minimal, da man zum Erreichen derselben Dateigröße die Kompression im Cb-Kanal doch enorm verstärken muss. Eine Folge kann dann z.B. sein, dass sich die Grundfarbe in blauen Bereichen stark ändert, weil die DC-Komponente bei den hohen Werten der Quantisierungstabelle einfach zu stark verändert wird. Dieses ist sehr gut beim Hintergrund des letzten Bildes zu beobachten.

Es dürfte sich also nur dann lohnen, wenn das Bild einem durch die Farbverteilung entgegen kommt, oder wenn das Bild eigentlich schon annehmbar aussieht, man aber dem Cr-Kanal im Tausch gegen Dateigröße ein wenig mehr Qualität spendieren möchte.

Sollte ich etwas vergessen haben oder auch etwas falsch sein, würde ich mich sehr um eine Rückmeldung freuen, damit ich den Artikel gegebenenfalls korrigieren kann.

Ergänzende Lektüre

Magst du diesen Artikel?

Dann wäre es doch klasse, ihn mit anderen zu teilen.

Facebook Twitter Reddit

Feedback

Christoph Erdmann

Your opinion is so important for me! Don't hesitate to drop me a line. I will do my best to implement your feedback.

Give feedback

ArticleFinally understanding JPEG

Image of man painting with color

If you always wanted to know how the JPEG compression works under the hood I want to recommend this article to you. It was important to me to write an article that is reasonable for every level of understanding.

Furthermore it contains 7 valuable tricks to reduce the file size of your JPEGs by exploiting the technical functionality of the JPEG compression algorithm.

22 min read

Read article

ArticleFinally understanding PNG

Boy laughing when understand something written in a book

Ever wondered why some of your PNGs are of large file size while similar PNGs are so small?

Since this question comes up so often, I have written a follow-up to my article "Understanding JPEG" to explain the bare necessities of the PNG compression algorithm in layman's terms.

At the end you will also get 7 tips on how to get your PNGs to a REALLY small file size.

15 min read

Read article

You don't like ads? Support Compress-Or-Die and become a patron who does not see ads. Your upload limit gets doubled too!

News
Christoph Erdmann
Image compression with AI
2023-06-25

Wow! Google researchers have now proposed a new method that combines a standard autoencoder with a diffusion process to recover and add fine details discarded by the autoencoder. Interesting to see the possibilities AI opens up when compressing images.

How Should We Store AI Images? Google Researchers Propose an Image Compression Method Using Score-based Generative Models - MarkTechPost
MarkTechPostA year ago, generating realistic images with AI was a dream. We were impressed by seeing generated faces that resemble real ones, despite the majority of outputs having three eyes, two noses, etc. However, things changed quite rapidly with the release of diffusion models. Nowadays, it is difficult to distinguish an AI-generated image from a […]

Check out our Reddit channel if you want to comment on the news.