How to convert to JPEG correctly?

dack9 · Post by **dack9** » Mon Oct 05, 2015 10:31 am

Hello!
I edit photos in TIFF-format. But it is very "heavy" format for web posting. So I need to convert it into JPEG. But very often it is not enought bits for colors in JPEG format if there is gradient on the photo. So visible ugly gradient appears even if the lowest compression ratio is used:

Could anybody advice on how to avoid such the problem?

rjlittlefield · Post by **rjlittlefield** » Mon Oct 05, 2015 11:15 am

I suspect that your editing is not just in TIFF, but more importantly in 16-bit TIFF.

Banding then occurs in the truncation from 16 bits to 8 bits, when a lot of neighboring pixels with slightly different 16-bit values all get rounded to the same 8-bit value.

The solution involves adding a bit of noise before doing the conversion, so that neighboring pixels will round to different 8-bit values randomly, with a probability that corresponds to their original 16-bit value.

Banding can also occur in JPEG compression, for much the same reason and with the same solution.

A lot has been written about this issue. Try an internet search on gradient banding or more specifically jpg gradient banding.

The problem can also be more or less severe depending on exactly which JPEG encoder is used. I have not tested recent versions, but in the past I noticed that Photoshop's Save For Web & Devices did a better job than the basic Save As. I'm not sure whether that was due to a different compression algorithm, or just because Save For Web & Devices would strip metadata, leaving more bits for pixel data.

In any case, noise is your friend here.

--Rik

Bushman.K · Post by **Bushman.K** » Mon Oct 05, 2015 11:38 am

Indeed, there are many different techniques to fight banding on gradients.

But in general case, Photoshop is not recommended for JPEG compression anyway. It has only a few settings. Free software such as GIMP or IrfanView (with Save for Web plugin) gives you better control over chroma subsampling and so on.

Chris S. · Post by **Chris S.** » Mon Oct 05, 2015 11:01 pm

Bushman.K wrote:But in general case, Photoshop is not recommended for JPEG compression anyway.

Kirill, I take your point that more powerful tools than Photoshop exist for making jpegs. But Photoshop is still very, very good at making jpegs, and I'd submit that for many (most?) of us, Photoshop is plenty good enough for this task. My sense is that for many of us, the benefit of using a more specialized tool would be pretty small, and not worth the hassle of becoming proficient with yet another piece of software, testing various parameters for making jpegs, and needing to fire up this other piece of software every time I want to save in jpeg format.

A phrase such as "Photoshop is not recommended for JPEG compression," implies general consensus on the matter. I don't think that there exists a general agreement of non-recommendation for Photoshop in making jpegs.

--Chris

Bushman.K · Post by **Bushman.K** » Tue Oct 06, 2015 12:42 am

Actually, this consensus about Photoshop exists in web development industry, where size does matter (as well as quality), especially in bulk amounts. When it's about compression or downsampling to screen resolution, Photoshop is not the proper tool (which doesn't mean people can't think it's acceptable - some people even using MS Paint for it and they are happy).

If it's about getting better results instead of staying in comfort zone of software people got used to, it makes perfect sense to try other tools. At least, these tools do not require any special skills.

As always, I'm not insisting - people can still use anything, including MS Paint.

dack9 · Post by **dack9** » Tue Oct 06, 2015 3:11 am

Rik,
thank you very much, I will check the internet.

rjlittlefield · Post by **rjlittlefield** » Tue Oct 06, 2015 10:08 am

Bushman.K wrote:Actually, this consensus about Photoshop exists in web development industry, where size does matter (as well as quality), especially in bulk amounts..

I am not familiar with this consensus either, but I would be interested to hear more.

It sounds to me like the issue you're raising is all about getting the highest quality image in the fewest possible bits. In that case it is simple for me to believe that there are better tools than Photoshop.

However, in my own work I seldom run into size limitations that I consider troublesome. Even the limit of 300 KB for images at hosted at photomacrography.net requires only about 10X compression in the worst case of a 1024x1024 image. That level of compression seems to be handled well by Photoshop, but I will happily confess that I have never investigated alternatives.

So I could use some assistance in better understanding the issue.

Can you point to references that illustrate how much improvement can be obtained by better encoders?

--Rik

Bushman.K · Post by **Bushman.K** » Tue Oct 06, 2015 2:46 pm

There are several situations, where graphics should be compressed with options, unavailable in Photoshop at all.

As I said before, Photoshop does not allow you to change Chroma subsampling method when saving JPEGs. In simple words, it leads to lower resolution of color channel comparing to lightness channel.

For high resolution photographic images (originals), it doesn't really matter, because there are no single-pixel details. But when you have to deal with reduced images, single pixel details can be easily found there, and compressing it with 4:2:2 subsampling (default and unchangeable setting in Photoshop) obviously leads to averaging of color and degradation of detail level.

Same thing applies to situation, when you have color text annotations or any graphic figures (arrows, leader lines ...) in JPEG image. If these objects don't have antialiased edges and/or lines are quite thin (1-2 pixels) it makes really nasty compression artifacts. To avoid it when using Photoshop, you have to use low compression level (close to 100%). But if you have control over the chroma subsampling, compression can be set to reasonable level.

Sometimes, you can achieve better visual quality with higher compression (same or smaller size) by using 4:4:4 subsampling mode.

So, problem with Photoshop is not in inability to compress graphics (it can do it somehow), but in very limited compression options, leading to quality degradation you can't avoid without other tools.

In addition, I can mention lack of control over image metadata - you can have EXIF/IPTC, but Photoshop will rewrite it, or you can ditch everything when using Save for Web...

Using Photoshop, you can't compress to desired size (let it automatically pick required quality to fit into size restrictions of forums, online forms, applications and so on).

Speaking of image resampling (shrinking) - Photoshop stopped its evolution about ten years ago. There are several useful resampling methods, available in other software. Here is some sort of visual comparison - samples are arranged by local contrast, produced by different methods after shrinking original image three times. I also have numeric evaluation of these methods.

Charles Krebs · Post by **Charles Krebs** » Tue Oct 06, 2015 5:05 pm

compressing it with 4:2:2 subsampling (default and unchangeable setting in Photoshop) obviously leads to averaging of color and degradation of detail level.

Pretty sure that PS uses 4:4:4 (no chroma subsampling) with a "quality" level of 7 or higher. (Although it has been suggested by some to avoid a level of "7" because they use a bit greater compression level to to avoid a large jump in file size. So go from 6 to 8. Don't know if this is still the case with the latest versions).

The QCC · Post by **The QCC** » Tue Oct 06, 2015 5:16 pm

In all of the above discussions, nobody mentioned colour space.

JPEG files destined for the web should be in the sRGB colour space. This colour space more closely matches the viewing screens used by the majority of computer users.

If the original file was a 16bit TIFF file it more than likely was in the Adobe RGB or ProPhoto colour space.
The JPEG format does not support 16bit images, so with a direct "Save as" you are relying on the image editor's 16-8 bit conversion algorithm which does not include a colour space conversion.

Before converting to JPEG, convert to the colour space sRGB, then to 8bit, followed by your JPEG conversion.
The compressed files will look better. Including the gradients.

rjlittlefield · Post by **rjlittlefield** » Tue Oct 06, 2015 6:26 pm

Charles Krebs wrote:
compressing it with 4:2:2 subsampling (default and unchangeable setting in Photoshop) obviously leads to averaging of color and degradation of detail level.
Pretty sure that PS uses 4:4:4 (no chroma subsampling) with a "quality" level of 7 or higher.

Yes, this is still the case with the Photoshop CC 2015. Using Save As, the break is between 6 and 7; using Save for Web & Devices, it's between 50 and 51.

(Although it has been suggested by some to avoid a level of "7" because they use a bit greater compression level to to avoid a large jump in file size. So go from 6 to 8. Don't know if this is still the case with the latest versions).

Yes, this is still the case also. It's evident with line drawings such as ray traces. Q6 is relatively clean but has colors messed up; Q7 has good colors but obvious block artifacts; Q8 has good colors and significantly reduced block artifacts but still worse than Q6. At Q9 the block artifacts reach about the same level as at Q6. Of course JPEG is not a good format for that sort of image in any case. Compressed PNG is half the size of the Q6 (in the case I just now ran), and has no artifacts at all.

--Rik

Bushman.K · Post by **Bushman.K** » Tue Oct 06, 2015 6:32 pm

Charles, I don't have Photoshop installed, so I can't check if your statement about subsampling is correct. If someone will kindly provide a couple of samples - I can analyze them right away.

rjlittlefield · Post by **rjlittlefield** » Tue Oct 06, 2015 8:01 pm

Here is an illustration of the points made in my previous post.

Bushman.K, you can also use these to see if I used JPEGSnoop correctly to check the chroma subsampling.

The visual effects of chroma subsampling can easily be seen in how the red lens elements are rendered.

PNG:

Irfanview, chroma subsampling disabled, pushed down to same file size as PNG:

Photoshop, Save As, Quality 6 (chroma subsampling 2x2):

Irfanview, subsampling disabled, same file size as Photoshop Q6:

Photoshop, Save As, Quality 7:

Photoshop, Save As, Quality 8:

Photoshop, Save As, Quality 9:

Photoshop, Save For Web, quality 50 (chroma subsampling 2x2)

Photoshop, Save For Web, Quality 51

--Rik

MaxRockbin · Post by **MaxRockbin** » Tue Oct 06, 2015 10:06 pm

That's really great info about the Photoshop chroma subsampling thresholds at different compression levels. I hadn't read that before.

Regarding what Bushman.K was saying about there being a consensus on the web that Photoshop is inferior for JPEG production: I think it is very true that there is that consensus, but I am less certain that it is justified. There are some fairly pricey tools, the most acclaimed being JpegMini, that assert their algorithms will reduce JPEGs quite a bit with no perceptual difference.

I think the key word is "perceptual." Flickr put up an interesting post a couple weeks ago about their own experiments with JPEG compression.
http://code.flickr.net/2015/09/25/perce ... at-flickr/

I think JPEGmini and such use similar techniques - which are actually quite lossy, but not in places people notice.

I am yet to find a believable worthwhile comparison of the many web oriented image compression tools (some reviews refer to JPEG as lossless for example). The tools themselves offer pretty iffy examples, though I have to admit, I've seen some impressive results with JPEGmini - especially on gradients at pretty high compression levels. But I haven't had the original files myself or the $149 JPEGmini "Pro" license that gets you a lightroom plugin.

rjlittlefield · Post by **rjlittlefield** » Wed Oct 07, 2015 10:32 am

Here is an illustration of a case where Photoshop does a clearly inferior job.

What I've done is to take a detailed image, size 1024x1024, and add a textbox containing colored text.

Then I've done whatever was necessary to shoehorn the image into photomacrography.net's 300 KB limit.

Using IrfanView, that was easily accomplished by specifying 300KB as a limit, and explicitly turning off chroma subsampling. Here is the result:

Using Photoshop's Save For Web & Devices, to get under 300KB required Quality 48, and several iterations were required to determine that because Photoshop's file size estimate was not quite correct. The result ends up with 2x2 chroma subsampling, which produces dark outlines around the text letters. Maybe you like those, maybe you don't, but they weren't there in the original.

For comparison, this is Photoshop's Save For Web & Devices, Quality 51. That is the lowest quality that gives no chroma subsampling. The text is pretty clean, but the file is too big to fit within the 300 KB limitation. (I'm hosting it elsewhere.)

Is this a contrived example? Sure. But perhaps it is also illustrative.

--Rik