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:
- 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.
- 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.)
- 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.
(Also check out this follow-up article on saturation losses from sharpening.)