How to convert to JPEG correctly?

[dack9]

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]

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]

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.]

[Bushman.K]

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]

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

[rjlittlefield]

[Bushman.K]

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]

[The QCC]

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.
_________________
Microscopes. Labomed LB-592, Zeiss Stemi 305Edu, vintage Bausch & Lomb

[rjlittlefield]

[Bushman.K]

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]

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]

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/perceptual-image-compression-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.
_________________
If your pictures aren't good enough, you're not close enough. - Robert Capa

[rjlittlefield]

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