Where’d My Saturation Go? Understanding JPEG Export Woes

Photoshop, LAB, no embedded profile
Photoshop, LAB, no embedded profile

Many times I’ve heard the understandable complaint that, after a good bit of working an image to get just the right color, that those colors are sapped by Photoshop or Lightroom when the image is exported to JPEG and then viewed on the web. There are all sorts of explanations on the web about this, and a lot of posturing about the “right way to handle things,” and there are all sorts of issues with the wealth of uncalibrated monitors out there, web browsers that don’t support color management at all (IE, Chrome, older Firefox) vs. those that do support it (Safari, more recent Firefox).

I figured it was time to do some testing. I started by making a sample colorful image as shown above, originally as a PSD file, created in the LAB color space. I then tested export using Photoshop’s “save for web” (after “convert to profile” with different profiles, and then with and without embedding color profiles), and Lightroom.

On color-managed browsers, on my sample, the best results were those that were either produced by LR, or those produced by PS with an embedded profile. That these two seemed equivalent should be no surprise, I surmise (and assume as we go on here) that LR embeds color profiles. For images with embedded profiles, on color-managed browsers, the results seemed very similar, again, I expected this result, most monitors can’t display much in the way of colors outside of sRGB, as I understand it.

On non-color managed browsers the best (err, most saturated) results were those for which there was an embedded profile (LR or PS) and for which the smallest [sic] color space had been specified. No difference was observed between those with and those without color profiles, which is no surprise, that’s what we mean by “non-color managed.” (If you understand color management and think about it, that we’d get the best color saturation from smaller spaces makes sense. A modest red might be “75%” red in RGB, a modest red might be “30% red” in a larger color space. Since non-color-manged browsers just stick “75” or “30” to the graphics card without context, of course the 75 is going to look more … red.)

On non-color managed browsers, it seemed like I was seeing a little more washout near the lightest (most luminous) reds on files prepared by LR relative to those prepared by PS. I don’t have a good theory as to why that is the case.

Images in LAB exported from Photoshop appeared perhaps identical to sRGB exports without embedded profiles; “Save for web…” greys out the profile embedding option on LAB images.

When this subject has been discussed on the web before it has been way too much fun to simply suggest that someone “get a real browser”, but that’s not a very practical solution for folks who are preparing images for the world wide web. While one could throw up ones hands and simply suggest “there’s nothing to be done at the mess the web is in”, and there is some truth to that, it makes no sense to me to entirely ignore how JPEGs will appear on non-color managed browsers.

So, this pedantry aside, this suggests, at least to me, the following recommendations for highest saturation results for general web usage:

  1. Use Photoshop, not Lightroom, for JPEG export. I don’t know why this gives better results, but it appears to be the case. This choice benefits non-color-managed browsers.
  2. Convert to sRGB using “Convert to Profile”. The choice of sRGB will benefit the vast majority of WWW users on non-color-managed browsers. (If you must use LR in step 1, this still applies.)
  3. Use “Save for web…” and embed the profile. This last step will slightly increase the size of your file but make your image notably peppier for about 10% of your users (Safari users and the few of us using Firefox with CM turned on).

Until we get better support for color management in browsers, and for end-users in general, that’s probably the best we can do.

Result Data

Photoshop, sRGB, embedded profile
Photoshop, sRGB, embedded profile

Photoshop, sRGB, no embedded profile
Photoshop, sRGB, no embedded profile

Lightroom, exported as sRGB
Lightroom, exported as sRGB

Photoshop, Adobe RGB, no embedded profile
Photoshop, Adobe RGB, no embedded profile

Photoshop, Adobe RGB, embedded profile
Photoshop, Adobe RGB, embedded profile

Lightroom, exported as Adobe RGB
Lightroom, exported as Adobe RGB

Lightroom, exported as ProPhotoRGB
Lightroom, exported as ProPhotoRGB

(Also check out this follow-up article on saturation losses from sharpening.)

This Post Has 4 Comments

  1. Thank you for maintaning such an excellent blog and photography resource site. I too have had to deal with unexpected saturation and luminance loss issues on JPEG export which “shouldn’t” really be happening in the first place because I’d assumed that most of the professional apps are properly converting large gamut colorspaces to sRGB correctly. For example, even though the LAB colorspace in Photoshop can really push colors way out of normal gamut, I’ve found that if I manually convert it to sRGB with Relative Colorimetric/Blackpoint compensation, the export is pretty flawless.

    Lightroom has proven mysterious in this way to me until recently. For a long time it left me scratching my head as to why exported JPEGs kept turning out slightly (and sometimes dramatically) desaturated compared to how it looked in the Develop module, especially in high detail areas. Through some experimentation, I finally traced it down to the Detail module, which doesn’t make sense because the general wisdom with Lightroom has been that it performs sharpening on the luminance channel of the image only, which shouldn’t produce any color shifting or saturation loss. I’m still testing this, but both Sharpening and Color Noise Reduction in the Details panel contribute to this.

    The weird thing is that the PhotoKit export sharpening modes (Low, Standard, High) sharpen perfectly without any loss of color or luminance. I now disable or set very low the Detail section for all exports. Try it sometime, especially with an image with a lot of intricate, colorful detail.

  2. Tronam: Thanks so much for the kind words!

    “Through some experimentation, I finally traced it down to the Detail module, which doesn’t make sense because the general wisdom with Lightroom has been that it performs sharpening on the luminance channel of the image only, which shouldn’t produce any color shifting or saturation loss.”

    Actually, it can produce saturation loss, and that makes complete sense. Thanks for pointing that out. Yes, sharpening on the luminance channel sounds like it shouldn’t affect saturation. The problem is that the HSB color space isn’t really a cube. The most saturated colors are at the midtones, you simply can’t have complete saturation near L=0 or L=1 (black and white), the more you move away from the midtones the greater the maximum saturation you can have. There are no very very very very saturated pastels, or dark shadows.

    I knew about that problem in sharpening in PS, but jsut didn’t think about the fact that sharpening was being applied here. My own tests here wouldn’t show it since the images are very smooth, but .. yeah, there you go.

    I’ll probably write an update in the next week to share that, I’ll give credit. Thanks!

  3. Finally figured out colorspaces. I came across your website too late, however. I think this is a great explanation of how colorspaces work. Not to mention it’s brief, candid, and written so an average person, such as myself (well at least I was a week ago before I drove myself nearly crazy dumping so much time into figuring it all out), would be able to at least have a grasp on what was happening. Definitely going to bookmark this site now.

Leave a Reply

Close Menu