Posted by Wayne Jones on November 9, 2014 at 9:56 PM
This is a follow-up to a side-discussion in my image posts last week in the Landscape Image Gallery. After some comments that my posted images had some over-saturated colors, I explained that I had a chronic problem saving images using Photoshop; the images I saved as JPEGs using the "Save for Web" function look significantly over-saturated compared to the exact same JPEGs before saving them for the Web and viewing on NPN. When I post an image I often have to delete it (hoping nobody immediately comments) and drastically de-saturate it for another try or two. I thought it had something to do with my wide-gamut monitor and the color profiles for it when I converted from Adobe RGB to sRGB. (Obviously I don't know much about color management, other than that my prints look great, so I didn't want to change anything.)
I have brought this up in the galleries in the past in response comments about the colors in my images. I often get replies from others that they have similar problems. (Oddly, I see that people with questions in the Digital Imaging Forum seem to have the opposite problem, losing saturation when they post -- can't address that; it just confused me even more.) Usually in image comments, we concluded that there was no way to get consistent color with everyone viewing images on different operating systems, browsers, and monitors, both calibrated and uncalibrated. However, I came to realize that my problems were more severe than you would expect to see with viewer differences.
I was confused about color management, color profiles, ICC profiles, printer profiles, monitor profiles, color spaces, etc. I eagerly read discussions in the Forums about posting images, and I just got more confused.
-- Some said we must first change images from 16 bit to 8 bit, and to sRGB before saving, while others said things like
-- "There's no need to explicitly convert your file to sRGB and 8-bit other than soft-proofing. The Save for Web module does these things for you. Just make sure the right checkboxes are checked. The JPEG format only supports 8-bit/channel, anyway."
-- Others said "the "best" answer to that problem is insuring every image you post on the web has an sRGB profile." (sRGB profile? I thought sRGB was a color space. ???)
-- And speaking of profiles, another discussion said "A monitor profile is meant to be used by the operating system and should not be explicitly used by any photo editing tools or embedded in image files."
Since I did not know what profiles were attached to my images, I did not click the "Embed Color Profile" box in the "Save for Web" dialog. Well, it turned out that THAT WAS MY MISTAKE !
I am still confused about color management, but at least I have finally managed to find out what I did wrong. Since several people told me they had similar problems, I thought it would be good to post this. The attached screen shot shows two images displayed on NPN: one saved using the Photoshop "Save for Web" module with "Embed Color Profile" checked, and one with it unchecked. (I still don't know about the other two boxes to check ("Optimized" and "Progressive") but it seems to be working OK now with only "Optimized" and "Embed Color Profile" checked. (I also converted the original file to 8-bit sRGB first, and resized and sharpened it before doing any "Save..." operations, even though all those steps may not be necessary.)
The duller-looking image on the right looks like the PSD I started with, while the more colorful one shows what happened when I failed to "Embed Color Profile." Seems like a lot of people liked the more saturated version (that I would call over-saturated). Now that I know how to prevent uncontrolled over-saturation, I may be adding a bit more saturation to my NPN posts before saving. NOTE that the screen shot above looks less saturated and less contrasty than it appeared on screen. I think it just looks bad because the screen shot is a picture of a picture.) (Photoshop CC on Windows 7, using a NEC wide-gamut monitor calibrated for Adobe RGB)
If this helps a few people who had similar problems, great. I anyone can point out any other mistakes in my procedure, that would be great, too. (For instance, should we check the "Progressive" and/or "Optimized" boxes too?)
UPDATE: I just posted an image with the settings described above, and the large version looks exactly like the jpeg I saved. (comparing my browser image with the PS image on my monitor. HOWEVER, the smaller image (automatically shrunken by NPN) is a little more saturated than the larger one. Go figure.
Posted by Keith Bauer on November 9, 2014 at 11:42 PM
Wayne:
Glad you found the problem. Yes you absolutely need to check the box for "Embed Color Profile".
There is a gotcha on NPN however. I strongly recommend against just creating the 1200 px version of the image and letting the NPN software generate the smaller 720 px version. If you recall that is an option. The problem is the software does NOT honor the color space of the larger 1200 px version and the 720 px will not have the embedded sRGB color profile. Just create both on your own an upload. In some instances the color variation between the two versions is significant, in others virtually none.
Here is some text from the Adobe Help System on the Optimize and Progressive options. I regularly use Optimize and do not use Progressive:
Optimized Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.
Progressive Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format.
Note: Progressive JPEGs require more RAM for viewing and are not supported by some browsers.
Posted by Wayne Jones on November 10, 2014 at 10:56 AM
Keith,
Thanks for for the information, AND for reading the whole thing!
Interesting that the NPN image reduction software has the same problem that I used to have. Another reason to always look at the larger version, since I bet most people won't create two versions for a single image post.
Posted by Yiming Hu on November 11, 2014 at 2:54 PM
There are many issues here. The best answer is ALWAYS convert the color space to sRGB and to embed the sRGB profile in your web images. One also should always view any web images in a browser that can correctly do color management under different real situations. Sadly, in the land of Windows, the ONLY option at this moment is FireFox.
If another viewer displays your web-image that has color profile embedded (it does not matter if your image color space is sRGB,
Adobe RGB, or others, as long as you corrected tag it) on a calibrated monitor (it doesn't matter if it is a wide-gamut one or not), with a browser such as FireFox (or with PhotoShop) that support color management, the colors should be correctly rendered. Of course on a monitor that supports only sRGB, your Adobe-RGB web images may suffer from some color clipping, which is expected.
If you do not embed color profiles in your image, the browser has no way to know the color space of your untagged image. Funny things will happen. The browser has two options :
(1) Assume it is an sRGB image. This is the default behavior of FireFox (in some versions of FireFox you have to manually turn on this option). In theory this is a violation of color management. However since the vast majority of web images are in sRGB and untagged, this assumption works well in real world.
Of course, if you save/submit a Adobe RGB file without converting it to sRGB and forget to embed profile, FireFox will guess it wrong, and your image will become somehow de-saturated.
(2) Do not color-manage the image. Display it directly (using monitor profile). This is the behavior of Safari. In this case, if you have an sRGB image but it is untagged, the colors will become very over-saturated on a wide-gamut monitor because of the vast mismatch between the monitor color space and image color space.
If you display the same image on a monitor that supports only sRGB, then the colors will be close to your intention.
Similarly, if you display a untagged Adobe RGB image of a wide-gamut monitor, the colors will be "almost" right.
Posted by Wayne Jones on November 12, 2014 at 11:31 PM
Thanks Yiming and Keith,
Your comments explain why some people complain why thier images look under-saturated, while others get over-saturated results with different images.
The illustration of side-by side images in my original post is a screen shot -- sorry, I forgot to mention that it's a Firefox display -- of images saved two different ways:
LEFT IMAGE -- sRGB untagged: This resulted in an image that lots of people liked, even though it was more saturated than when I viewed it in Photoshop instead of a browser. And some people saw it the way I did -- over-saturated. This seems to be what Yiming described when he said "the vast majority of web images are in sRGB and untagged, this assumption works well in real world." Many untagged sRGB images I posted looked pleasingly colorful to some people, but over-saturated to others, including me. The differences in perception depended on variations in taste, browsers, and monitors.
RIGHT IMAGE: sRGB tagged: This results in an image that looks exactly the same on my monitor in Firefox as it does in Photoshop, BUT ONLY IF it is shown in the NPN "View Larger Photo" screen. If you don't submit an additional smaller sRGB TAGGED image (i.e., including the color profile when it is saved) the NPN software resizes it and sends it to the posted image screen UNTAGGED, which will look OK to some people, but will look very over-saturated to those using wide-gamut monitors.
Discussion
4 repliesI have brought this up in the galleries in the past in response comments about the colors in my images. I often get replies from others that they have similar problems. (Oddly, I see that people with questions in the Digital Imaging Forum seem to have the opposite problem, losing saturation when they post -- can't address that; it just confused me even more.) Usually in image comments, we concluded that there was no way to get consistent color with everyone viewing images on different operating systems, browsers, and monitors, both calibrated and uncalibrated. However, I came to realize that my problems were more severe than you would expect to see with viewer differences.
I was confused about color management, color profiles, ICC profiles, printer profiles, monitor profiles, color spaces, etc. I eagerly read discussions in the Forums about posting images, and I just got more confused.
-- Some said we must first change images from 16 bit to 8 bit, and to sRGB before saving, while others said things like
-- "There's no need to explicitly convert your file to sRGB and 8-bit other than soft-proofing. The Save for Web module does these things for you. Just make sure the right checkboxes are checked. The JPEG format only supports 8-bit/channel, anyway."
-- Others said "the "best" answer to that problem is insuring every image you post on the web has an sRGB profile." (sRGB profile? I thought sRGB was a color space. ???)
-- And speaking of profiles, another discussion said "A monitor profile is meant to be used by the operating system and should not be explicitly used by any photo editing tools or embedded in image files."
Since I did not know what profiles were attached to my images, I did not click the "Embed Color Profile" box in the "Save for Web" dialog. Well, it turned out that THAT WAS MY MISTAKE !
I am still confused about color management, but at least I have finally managed to find out what I did wrong. Since several people told me they had similar problems, I thought it would be good to post this. The attached screen shot shows two images displayed on NPN: one saved using the Photoshop "Save for Web" module with "Embed Color Profile" checked, and one with it unchecked. (I still don't know about the other two boxes to check ("Optimized" and "Progressive") but it seems to be working OK now with only "Optimized" and "Embed Color Profile" checked. (I also converted the original file to 8-bit sRGB first, and resized and sharpened it before doing any "Save..." operations, even though all those steps may not be necessary.)
The duller-looking image on the right looks like the PSD I started with, while the more colorful one shows what happened when I failed to "Embed Color Profile." Seems like a lot of people liked the more saturated version (that I would call over-saturated). Now that I know how to prevent uncontrolled over-saturation, I may be adding a bit more saturation to my NPN posts before saving. NOTE that the screen shot above looks less saturated and less contrasty than it appeared on screen. I think it just looks bad because the screen shot is a picture of a picture.) (Photoshop CC on Windows 7, using a NEC wide-gamut monitor calibrated for Adobe RGB)
If this helps a few people who had similar problems, great. I anyone can point out any other mistakes in my procedure, that would be great, too. (For instance, should we check the "Progressive" and/or "Optimized" boxes too?)
UPDATE: I just posted an image with the settings described above, and the large version looks exactly like the jpeg I saved. (comparing my browser image with the PS image on my monitor. HOWEVER, the smaller image (automatically shrunken by NPN) is a little more saturated than the larger one. Go figure.
Glad you found the problem. Yes you absolutely need to check the box for "Embed Color Profile".
There is a gotcha on NPN however. I strongly recommend against just creating the 1200 px version of the image and letting the NPN software generate the smaller 720 px version. If you recall that is an option. The problem is the software does NOT honor the color space of the larger 1200 px version and the 720 px will not have the embedded sRGB color profile. Just create both on your own an upload. In some instances the color variation between the two versions is significant, in others virtually none.
Here is some text from the Adobe Help System on the Optimize and Progressive options. I regularly use Optimize and do not use Progressive:
Optimized Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.
Progressive Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format.
Note: Progressive JPEGs require more RAM for viewing and are not supported by some browsers.
Thanks for for the information, AND for reading the whole thing!
Interesting that the NPN image reduction software has the same problem that I used to have.
If another viewer displays your web-image that has color profile embedded (it does not matter if your image color space is sRGB,
Adobe RGB, or others, as long as you corrected tag it) on a calibrated monitor (it doesn't matter if it is a wide-gamut one or not), with a browser such as FireFox (or with PhotoShop) that support color management, the colors should be correctly rendered. Of course on a monitor that supports only sRGB, your Adobe-RGB web images may suffer from some color clipping, which is expected.
If you do not embed color profiles in your image, the browser has no way to know the color space of your untagged image. Funny things will happen. The browser has two options :
(1) Assume it is an sRGB image. This is the default behavior of FireFox (in some versions of FireFox you have to manually turn on this option). In theory this is a violation of color management. However since the vast majority of web images are in sRGB and untagged, this assumption works well in real world.
Of course, if you save/submit a Adobe RGB file without converting it to sRGB and forget to embed profile, FireFox will guess it wrong, and your image will become somehow de-saturated.
(2) Do not color-manage the image. Display it directly (using monitor profile). This is the behavior of Safari. In this case, if you have an sRGB image but it is untagged, the colors will become very over-saturated on a wide-gamut monitor because of the vast mismatch between the monitor color space and image color space.
If you display the same image on a monitor that supports only sRGB, then the colors will be close to your intention.
Similarly, if you display a untagged Adobe RGB image of a wide-gamut monitor, the colors will be "almost" right.
Your comments explain why some people complain why thier images look under-saturated, while others get over-saturated results with different images.
The illustration of side-by side images in my original post is a screen shot -- sorry, I forgot to mention that it's a Firefox display -- of images saved two different ways:
LEFT IMAGE -- sRGB untagged: This resulted in an image that lots of people liked, even though it was more saturated than when I viewed it in Photoshop instead of a browser. And some people saw it the way I did -- over-saturated. This seems to be what Yiming described when he said "the vast majority of web images are in sRGB and untagged, this assumption works well in real world." Many untagged sRGB images I posted looked pleasingly colorful to some people, but over-saturated to others, including me. The differences in perception depended on variations in taste, browsers, and monitors.
RIGHT IMAGE: sRGB tagged: This results in an image that looks exactly the same on my monitor in Firefox as it does in Photoshop, BUT ONLY IF it is shown in the NPN "View Larger Photo" screen. If you don't submit an additional smaller sRGB TAGGED image (i.e., including the color profile when it is saved) the NPN software resizes it and sends it to the posted image screen UNTAGGED, which will look OK to some people, but will look very over-saturated to those using wide-gamut monitors.