Visual

The nasty red JPG compression artifacts

Why we see the red compression artifacts so well and what we can do about them.

Portrait of the author "Christoph Erdmann"
Author: Christoph Erdmann (@McSodbrenner)
Last update: 2023-01-10
15 min read
English version | Deutsche Version

Why, JPG, why?

During an exchange with an illustrator about another article, he asked me why the JPEG format is so bad at handling the color red. As an explanation, I have already run across several variants. So I simply answered the questions with the variant that seemed most plausible to me.

But was that really the right answer? And if we knew the right answer.... then can't we do something about it?

Assessment of the image errors in the RGB color channels

First of all, I created a test image to see in which cases artifacts are particularly noticeable. This test image is an image in the RGB color space, in which each line (1-*, 2-*, 3-*) contains only the color of one channel. Per line, however, in decreasingly strong intensities.

Image with different brightness in each RGB channel
RGB source image

I then converted the image to a JPG with a quality of 50 (referring to the standard quantization tables from the JPEG specification). At this quality, the image shows enough compression artifacts for an evaluation. By the way, I set the chroma subsampling to 4:4:4 to get the most accurate color reproduction possible.

Image with different brightness in each RGB channel RGB-JPG with the default quantization table for a quality of 50 and a Chroma Subsampling 4:4:4.
RGB-JPG with the default quantization table for a quality of 50 and a CHroma Subsampling 4:4:4.

The created image shows clear artifacts in the middle brightness levels for the red and green channels. I can see practically no artifacts in the blue channel. I can also perceive the compression artifacts worse in the very bright and very dark areas. Overall, I see even stronger artifacts in the green areas than in the red ones. The best way to do this is to compare fields 1-2 and 2-2 as well as 1-5 and 2-5, where the image errors in the green channel are even more noticeable in my opinion.

It turns out that compression artifacts in JPEGs are thus not only very strong in red areas, but also in green ones. Was there any sleep in the creation of the JPEG algorithm? Has this really not been noticed?

Since our eye can perceive differences in brightness much better than differences in color (we'll get to that in a moment), I once converted the pixels of the compressed image into grayscale pixels using the Average formula ((R+G+B)/3). This ensures that all color channels are treated equally:

Compression artifacts of the RGB color channels for better visualization in grayscale.

Surprisingly, the compression artifacts are now equally evident in all three channels. The JPEG algorithm thus seems to treat the three color channels equally and not to favor or neglect any color. So the fact that we perceive the artifacts differently must have something to do with our eye in some way.

How does our eye work?

Those who remember biology lessons in school may still know that the eye contains the so-called rods and the cones.

The rods are responsible for the perception of brightness. They are clearly superior in number to the cones and also much more sensitive than the latter. While the cones hardly perceive anything in low light, the rods are already hard at work. This is the reason why we can still orient ourselves well in very little light, but then perceive the colors only as gray (this fact, by the way, is the origin of the saying "All cats are gray at night").

The more interesting sensory cells for us at the moment are the color-perceiving cones, of which there are three different ones.

Relative sensitivity of cones in the eye.

The S cones (S for "short", i.e. short-wave light) react best to light of the wavelength of approx. 420nm and are therefore also called the blue receptors. They only make up about twelve percent of all cones. Therefore, we can perceive differences around the color blue relatively poorly.

The M cones (M for "medium", i.e. medium-wave light) have a soft spot for the light around 530nm. Their so-called absorption maximum is at the color green. They are therefore called green receptors. Since we should normally have a lot of green around us by nature (some youngsters rather less), it makes sense that we can recognize gradations in this color well.

Finally, we have the L cones (L for "long", or long wavelength light), which respond best to a greenish yellow with the maximum at about 560nm. These are also called red receptors because they also cover a large part of the perception of reddish light.

The L and M cones, with approximately the same quantitative distribution, together make up about 88% of all cones, which means that we can differentiate nuances in the light of these wavelengths very well. If we look at the following graph, which shows the sensitivity of the eye to visible light, taking into account the quantitative distribution of the cones, we can see that we can distinguish green, yellow and red very well, while we have perceptual weaknesses in the colors turquoise, blue and violet.

Sensitivity of the eye to visible light.

But why are red JPG artifacts so visible?

Red is a signal color, which is often used in images, e.g. in Eyecatchers, to which our eye is directed, and in which we can perceive the artifacts well on the mostly monochrome surface. Green, which we can perceive even better, is often found in natural objects such as plants or trees, which naturally have a lot of disturbed image details (high-frequency components), which is why the artifacts are lost in them.

The counter

Now that we know which colors our eye can see better, the question remains whether we can do anything about it. Theoretically, we should be able to apply more compression to the colors we can see poorly, and the other way around, we should be able to apply less compression to colors we can see very well.

Now a little background knowledge about the JPEG format helps again. This stores the image components in the YCbCr color space. The Y stands for the brightness, Cb for the chromaticity between blue and yellow, and Cr for the chromaticity between red and green. This conversion to the YCbCr color space is very useful because, as mentioned above, humans are better at recognizing brightness than color, which is why you can use different compression strengths for brightness and chromaticity. And on the other hand, because you can omit color information in the color channel (chroma subsampling).

Image with different brightness in each RGB channel.
RGB source image
The Y channel of an image in the YCbCr color space.
Y channel
The Cb channel of an image in the YCbCr color space.
Cb channel (blue-yellow)
The Cr channel of an image in the YCbCr color space.
Cr channel (red-green)

The compression strength is defined in the JPEG algorithm by quantization tables. And in most cases, two of these tables are embedded in JPGs: One for brightness, i.e. the Y channel, and one for the two color channels. But it's quite possible to embed different tables for the two color channels, although I've only seen this happen once before, when nonsensically the same quantization tables were used with the exact same values.

As a test, I once applied a weak compression for the Cr channel (Q 74) and a strong one for the Cb channel (Q 5) to the original image. The Y channel remained at a value of Q 50 as in the input example:

Image with strong compression in the Cb color channel and weak compression in the Cr color channel.
The new result: 16,118 Bytes
Image with different brightness in each RGB channel.
The old result: 16,214 Bytes

With even a slightly smaller file size, the new result has significantly fewer artifacts in the green and red fields, while only faintly visible artifacts have been added in the blue ones. Using different quantization tables for the color channels can indeed make a difference, but this had yet to be confirmed with different source material, as we had only used a constructed test image so far:

Comic art explosion
The old result: 19,463 Bytes
Source: Image by maniacvector on Freepik
Comic art explosion with reduced quality in the Cb channel
The new result: 18,962 Bytes

Fashion sale banner
The old result: 7,191 Bytes
Source: Image from Sketchepedia on Freepik
Fashion sale banner with reduced quality in the Cb channel
The new result: 7,680 Bytes
Running sport shoes illustration
The old result: 8,273 Bytes
Source: Image by macrovector on Freepik
Running sport shoes illustration with reduced quality in the Cb channel
The new result: 8,118 Bytes

From these examples, where I tried to achieve a similar file size, you can see that you can certainly move the number of artifacts from the red color to the blue. However, in practice the benefit is minimal, because to achieve the same file size you have to increase the compression in the Cb channel enormously. A consequence can then be, for example, that the base color in blue areas changes strongly, because the DC component is simply changed too much at the high values of the quantization table. This can be observed very well in the background of the last image.

So it should only be worth it if the image suits you because of the color distribution, or if the image actually already looks acceptable, but you want to give the Cr channel a little more quality in exchange for file size.

If I have forgotten anything or even if something is wrong, I would be very happy to receive feedback so that I can correct the article if necessary.

Supplementary reading

Did you enjoy this article?

Then please share it with others!

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.