Why does the red color channel lose the most details during jpeg compression

Question

I have an e-commerce website dealing with flowers and cakes. We get our photoshoot done inhouse and also the post-shoot editing of images. While we upload them on the website all images go through the same image compression algorithm. But if we compare all images, then we find product images having red color in them loosing out most of its details only in the areas with red color.

I have attached an image below for your reference, here the left-hand side image is at 80% quality and the right side has no compression in place. If you compare all these images, then you will see that the red-colored areas of the images lose the most details, at least visually.

I have read about jpeg compression but it says that color doesn't make any difference, but it is not the case here.

Can we do anything during photoshoot or post-editing to fix these issues?

Answer 1

One issue is "chroma subsampling". The image data of a JPEG is not stored in packed RGB but YCbCr as 3 seperate planes. The Cr and Cb channels contain colour information and the Y channel is luminance. In JPEG it is common to use a lower resolution Cr/Cb channel, typically at half the resolution of the Y channel, this is know as 422 Chroma subsampling (another variant is 420 where only the horizontal resolution is halved).

What you can do is select 444 Chroma subsampling, if possible, which will mean no down-scaling of the Cr/Cb channels.

In Gimp you can select the subsampling type in "advanced options" when exporting JPEG files. This is independent of the quality setting slider.

There is a great image from wikipedia which compares the various subsampling modes side-by-side with a visualisation of one of the chroma channels, you can see the red decal in the centre is most affected by downscaling as that channel has high contrast edges

Wikipedia article for Chroma Subsampling

Answer 2

First, here is a link to a related topic of the graphic design stack exchange site.

Even though the discussion was more focussed around effects on an image with large homogeneous color areas, here are some quotes I think that are relevant for your case:

JPEGs are best suited for continuous tone images like photographs or natural artwork; not so well on sharp-edged or flat-color art like lettering, simple cartoons, or line drawings

JPEG is actually just a compression algorithm, not a file format. JPEG is designed to exploit certain properties of our eyes, namely, that we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance

Compression artifacts from hard edges are proportional to the contrast of the edges

This loss of data is most often noticeable where colors transition from one field of solid color to another field of solid color. There's no direct issue with any particular color specifically. It is more about large areas of similar colors.

Also Wikipedia says in the articles "JPEG compression" section:

A perceptual model based loosely on the human psychovisual system discards high-frequency information, i.e. sharp transitions in intensity, and color hue.

Building upon these quotes I conclude, that the compression artifacts do not depend on the color, as you already read in other sources. However, JPEGs are obviously not suited for high contrasts and sharp edges.

Now when I look at your pictures, the rose blossoms and the red cake have complex/rough surfaces that cast a lot of shadows. So they have hard edges in their intensity/brightness and you can expect some artifacts there. Most of the other parts of those images don't have such a high density of sharp edges, this why you might think that red is particularly affected by the compression. The fact that the high contrast and brightness of the red attracts your eye's attention increases this impression. But if you look at other sharp edges, for example, the chocolate on top of the second cake or the yellow paper that is wrapped around the roses in the first picture, you can also see those compression artifacts. The lower density of sharp edges and the duller colors just don't make them so obvious.

Can we do anything while photoshoot or post editing to fix these issues?

If you have the option, the best thing would be to use an image format with loss-free compression -> PNG.

If this is not an option, the only thing I can come up with is avoiding high contrasts in your motives. Also, maybe you can use some photoshop filters to soften the hard edges a little bit before you compress the image. This will also reduce the image quality, but maybe it will give more acceptable results after compression (no guarantees here - might be worse).