Browsers, profiles, and monitors--how they might interact
Discussion
9 replies
Posted by Tony Kuyper on October 8, 2010 at 1:21 AM
Note: Please see follow-up at the bottom of this post.
Since getting a new computer with a wide-gamut monitor, the look of some images on NPN have definitely changed. At first I thought it was just the monitor as I had read somewhere that wide-gamut monitors can mess with the way images on the Internet look. However, I could still get my images to look right, i.e. to closely match what I was seeing in Photoshop, so I was wondering why other images had changed, but not mine. I now think this has to do not only with the monitor that is being used to view the image, but also with the browser that is used for viewing the image and whether or not the photographer embedded the sRGB profile (no just converted to sRGB) when they saved the image as a jpg for the web.
I have a Windows system and experimented with two browsers—Firefox version 3.6.10 (FF) and Internet Explorer version 8.0.7600.16385 (IE8). It's my understanding that Firefox can read and interpret embedded color profiles and IE8 cannot. Safari, I believe, is also able to handle color profiles correctly, so it should behave like Firefox
I have two monitors on my system now—the new wide-gamut one (95% of Adobe RGB) and an old sRGB CRT. I examined the same images both with and without an embedded color profile in FF and IE8, and made a qualitative assessment of how they looked on each monitor. The goal was to find the combination(s) of browser, profile-embedding, and type of monitor where the image "looks right," meaning it matches what I'm seeing in Photoshop when I'm working on the image. The charts below show how the combination of monitor, browser, and profile-embedding affects the look of the image, as seen by the viewer.
NO PROFILE EMBEDDED in the image saved for the web:
| Wide-gamut monitor | sRGB monitor
------------------------------------------------------------------
IE8 | too saturated | looks right
------------------------------------------------------------------
FF | too saturated | looks right
WITH PROFILE EMBEDDED in the image saved for the web:
| Wide-gamut monitor | sRGB monitor
------------------------------------------------------------------
IE8 | too saturated | looks right
------------------------------------------------------------------
FF | looks right | looks too unsaturated
With no profile embedded in the saved image, FF and IE8 give essentially the same results—the image is too saturated on a wide-gamut monitor, but looks right on an sRGB monitor. So with a wide-gamut monitor, the image will always look too-saturated regardless of which browser is used. I've definitely noticed this in some images posted on NPN.
Things get more complex when the profile is embedded in the saved image. With an sRGB monitor, the image will only look right if IE8 is used for viewing the image. With a wide-gamut monitor, FF (or probably Safari too) will be needed to make sure that the image looks right.
This really messes things up in terms of putting images on a website, including NPN, hoping viewers will correctly see the image the same way that the person who posted it does. It used to be that we just worried about using calibrated monitors and converting to sRGB colors before posting an image. That's apparently no longer the case. With the increasing proliferation of wide-gamut monitors and the variability in the way browsers handle embedded color profiles, there are a lot more variables to contend with.
Based on my observations, here's what I would recommend.
1. Convert to sRGB before posting, which is pretty standard practice for most people. There is a place to do this in the Save for Web and Devices dialog box. In CS3 you'll need to use the fly-out menu to the right of the Preset drop-down menu. In CS4 and CS5 the "Convert to sRGB" check box is visible in the main dialog box.
2. Always embed the color profile in the jpg image file. This can be done from at least CS3 onward. There is a check box for it in the Save for Web and Devices dialog box. In CS3 the box simply says "ICC Profile" In CS5, it says "Embed Color Profile." (Not sure what it says in CS4.) Checking this box will embed the profile in the saved jpg file.
3. If you have an standard sRGB monitor, use IE8 for viewing images, like those on NPN. The embedded profile will be ignored, but the image will look as the photographer intended.
4. If you have a wide-gamut monitor, use FF (or Safari) for viewing images. The embedded profile will be used to display the image and it will once again look as the photographer intended.
This procedure should ensure that both the person who posts the image and the person who views it are seeing essentially the same thing provided both have calibrated monitors. This sounds complex and requires both the poster and the viewer to do their part, but it seems like one way to control the three variables that interact to determine how an image looks in a browser so that critiques can then be truly based on what the photographer's image actually looks like to the photographer.
I've done a double post on an image in ESS, the first image has the sRGB color profile embedded after converting the image to the sRGB color space and the second image is exactly the same but with NO embedded color profile.
If you're using an sRGB monitor and viewing the images in IE8, both the images should look the same, and are correct with how I'd like you to see the image.
If you're using a wide-gamut monitor and viewing the images in IE8, both images should still look the same, however, both are incorrect with regard to how the image looks to me—they're both too saturated.
If you're using an sRGB monitor and FF, the first image should look unsaturated relative to the second image. In this combination, the second image is the way I see it.
If you're using a wide-gamut monitor and FF, the first image is correct for how I see it and the second image should look overly saturated relative to the first.
If you're using a wide-gamut monitor and FF, the first image will look like I want it to look, and the second will be too saturated. If you're using and sRGB monitor and viewing the images in IE8, the first image will also look to you the same as it looks to me. So by me embedding the color profile and you using the correct browser for the type of monitor your have (FF for wide-gamut and IE8 for sRGB), the first image will look the same to everyone, and will be the same as I see it in Photoshop.
Hope this makes sense. I know this is complex and I would certainly be interested in the observations and conclusions of others.
Follow-up: Mark Stahlke's post on the ESS thread about checking the color management settings in Firefox's about:config settings did the trick. Now both the images in the ESS post when viewed in Firefox look identical too to me, and correct for the way I want them to look. It's worth checking out Mark's comment and links and maybe checking/change your own settings if you're so inclined. My only remaining issue is that IE on the wide-gamut monitor still has over-saturated colors, but that's really not an issue since I don't use IE much. I've gone back and looked at several others' images that previously looked over-saturated to me, and they're all fine now. Feels great to have sense that what I'm seeing on my monitor now matches what the photographer wants me to see.
Fascinating. I use a wide-gamut monitor (LaCie 321) and checked out your beautiful image with IE8 and Firefox 3.6.8. My results were identical to yours. Thanks for bringing this to our attention.
Posted by John Williams on October 8, 2010 at 10:09 AM
Awesome detective work Tony. I was unaware that wide-gamut was introducing a wrinkle, and always view NPN with FF with color enabled.
Unfortunately, when prepared in Photoshop on a standard-gamut monitor and saved with an embedded profile, my images sometimes only look correct when viewed in a browser with color management enabled (when viewed on my sRGB monitor). If I view them without color management it is the exact opposite of your situation, they look different.
This makes me wonder if your suggestion to use a browser without color management when viewing NPN with an sRGB monitor will make images prepared on a wide-gamut monitor look as intended, but have the opposite effect for images prepared on an sRGB monitor?
Posted by Tony Kuyper on October 8, 2010 at 11:03 AM
This makes me wonder if your suggestion to use a browser without color management when viewing NPN with an sRGB monitor will make images prepared on a wide-gamut monitor look as intended, but have the opposite effect for images prepared on an sRGB monitor?
Good question, John. My understanding would be that It comes down to how Photoshop deals with color profiles. If your image is profiled with the Adobe RGB profile, for instance, then the conversion to sRGB will be the same regardless of your type of monitor or which browser you're using. Photoshop doesn't take these into account. It would only be in the browser, and how it recognizes (or fails to recognize) a profile-tagged image that the issues of browser type and monitor type would come into play. So it really shouldn't matter on which type of monitor you prepared the image; the recommendations I make should still apply. However, some non-conforming replies on the image post and your own experience with an standard-gamut monitor have me wondering if there might be other factors, like monitor brightness or CRT vs. LCD, that might override some of the variables.
Posted by Jason Kim on October 8, 2010 at 12:43 PM
Thanks for the write-up, Tony. I switched to a Dell wide-gamut monitor a couple of years ago and it's been a frustrating ordeal. Your recommendations are in line with my experience, and I have also noticed that there are some other unidentified factors that play a role. Arrgh. Wishful thinking, but I hope that everyone is using a wide-gamut display in a few years from now...
One other note, if you're viewing a Flash-based website in a color-managed browser, the image profiles won't be recognized. I learned this the hard way, and I would recommend that photographers stay away from any Flash-based software when designing a personal website, since it throws an additional kink into the mix.
Posted by Lon Overacker on October 8, 2010 at 12:56 PM
Tony,
Thanks for posting this. I think this should really help many folks understand the concepts and consequences of color profiling, PS and the web. I have a couple questions though:
Please define a "wide-gamut" monitor? I look at my settings at my monitor is running at 32bit, true color. Would monitors that use "256-color" mode be considered the standard sRGB? Who's using those CRT's today anyway???? (sorry Tony, couldn't resist)
Second, when you say "embedded color profile" what profile are you referring to? If one converts to sRGB before saving like with save-for-web, isn't that the embedded profile? If you're not converting and you have the "ICC profiile" box checked, it will "embed" whatever your working color profile is, correct? For many I guess that would be the Adobe 1998. But I often notice that when I open an image it will come up as an "untagged" RGB. Not sure what that is about.
Anyway, great topic and I look forward to reading more as this progresses.
Lon
Posted by John Williams on October 8, 2010 at 2:11 PM
So it really shouldn't matter on which type of monitor you prepared the image...
Good points Tony. I am unfamiliar with what colors a wide-gamut monitor allows you to see. If I understand correctly, a standard-gamut monitor is unable to reproduce all of the colors in the sRGB color space (is that correct?). If true, then preparing an image on a wide-gamut monitor could well lead to images that appear different on a standard-gamut monitor even in an sRGB image.
What I don't understand is why images might look more correct with an sRGB monitor and a colorspace unaware browser, because I have experienced the opposite in the past. I must experiment with this when I have a chance. I'll try and find an image of mine that appears different on my monitor when viewed in a colorspace aware vs. unaware browser to post as an example. Out of curiosity, do you get different results between your sRGB and wide-gamut monitors with this test? If so, how do the different browsers differ?
Posted by Tony Kuyper on October 8, 2010 at 3:23 PM
Please define a "wide-gamut" monitor? I look at my settings at my monitor is running at 32bit, true color. Would monitors that use "256-color" mode be considered the standard sRGB?
I'm definitely not an expert on this, but I think the number of color the video card can produce is quite different than the "number" of colors in any particular color space. Color spaces are defined I think by the size of the spectrum they encompass, and not the actual number of colors. If I had to guess, I'd say that the number of colors in all color spaces may be infinite. It's only when we start to digitalize these colors in specific increments that the number of colors comes into play. So wide-gamut means that it covers more of the color spectrum. sRGB is, I think a smaller color space than these wide-gamut monitors that cover between 95 and 98 percent of the Adobe RGB color space.
Second, when you say "embedded color profile" what profile are you referring to? If one converts to sRGB before saving like with save-for-web, isn't that the embedded profile? If you're not converting and you have the "ICC profiile" box checked, it will "embed" whatever your working color profile is, correct?
I don't think converting and embedding are the same thing. There are different check marks for it in the Save for Web and Devices dialog box. Converting the colors transforms the colors in whatever space your using in Adobe to similar colors that are sRGB according to some chosen algorithm. Embedding and sRGB profile with the image let's color-aware applications, like Firefox, know this. These applications can then work with my computer and monitor profile to more accurately display the colors in the image. At least that's how I understand it, and it did seem to make a significant difference before I made the Firefox settings adjustment that I describe on the ESS post. Now, it doesn't seem to make a difference, at least with sRGB. The converted image looks the same whether tagged or not.
If I understand correctly, a standard-gamut monitor is unable to reproduce all of the colors in the sRGB color space (is that correct?)
That I don't know. I thought the standard monitor was based on sRGB colors and that it came close to displaying all of them, but I could be wrong.
Out of curiosity, do you get different results between your sRGB and wide-gamut monitors with this test?
While the colors look different on the test page between my wide-gamut and sRGB monitors, that's to be expected. The wide-gamut LCD monitor is a calibrated and the sRGB CRT is not. The test shows that Firefox is color-managed and Internet Explorer is not on both monitors, so in that regard, the results of the test are the same on both monitors.
just to make the confusion a bit bigger:
even a wide-gamut monitor would also have to be calibratedd rightly and with a good calibration device (not with software only). viewing/room light temp plays another (big) role.
I find Tonys observations correct and it goes to show you what an unprecise "science" webposting is. web-pics look different on my sRGB monitor, my notebook (no surprise there) and on my Eizo CG243W. (all viewed on FF)
for viewing pics on the web is one thing but for printing, calibration and a wide-gamut monitor is mandatory.
georg
Posted by Jim Erhardt on October 12, 2010 at 4:57 PM
Tony, great post!
These issues have caused difficulty in accurately viewing/assessing web-based photos since the advent of the Internet. They are particularly important to sites like NPN where seeing a photo as intended by the photographer has always been difficult to do.
We need to create a reference page with this kind of information so that members can better understand the issues and have the information needed to make adjustments to their equipment and post-processing technique.
Discussion
9 repliesSince getting a new computer with a wide-gamut monitor, the look of some images on NPN have definitely changed. At first I thought it was just the monitor as I had read somewhere that wide-gamut monitors can mess with the way images on the Internet look. However, I could still get my images to look right, i.e. to closely match what I was seeing in Photoshop, so I was wondering why other images had changed, but not mine. I now think this has to do not only with the monitor that is being used to view the image, but also with the browser that is used for viewing the image and whether or not the photographer embedded the sRGB profile (no just converted to sRGB) when they saved the image as a jpg for the web.
I have a Windows system and experimented with two browsers—Firefox version 3.6.10 (FF) and Internet Explorer version 8.0.7600.16385 (IE8). It's my understanding that Firefox can read and interpret embedded color profiles and IE8 cannot. Safari, I believe, is also able to handle color profiles correctly, so it should behave like Firefox
I have two monitors on my system now—the new wide-gamut one (95% of Adobe RGB) and an old sRGB CRT. I examined the same images both with and without an embedded color profile in FF and IE8, and made a qualitative assessment of how they looked on each monitor. The goal was to find the combination(s) of browser, profile-embedding, and type of monitor where the image "looks right," meaning it matches what I'm seeing in Photoshop when I'm working on the image. The charts below show how the combination of monitor, browser, and profile-embedding affects the look of the image, as seen by the viewer.
NO PROFILE EMBEDDED in the image saved for the web:
| Wide-gamut monitor | sRGB monitor
------------------------------------------------------------------
IE8 | too saturated | looks right
------------------------------------------------------------------
FF | too saturated | looks right
WITH PROFILE EMBEDDED in the image saved for the web:
| Wide-gamut monitor | sRGB monitor
------------------------------------------------------------------
IE8 | too saturated | looks right
------------------------------------------------------------------
FF | looks right | looks too unsaturated
With no profile embedded in the saved image, FF and IE8 give essentially the same results—the image is too saturated on a wide-gamut monitor, but looks right on an sRGB monitor. So with a wide-gamut monitor, the image will always look too-saturated regardless of which browser is used. I've definitely noticed this in some images posted on NPN.
Things get more complex when the profile is embedded in the saved image. With an sRGB monitor, the image will only look right if IE8 is used for viewing the image. With a wide-gamut monitor, FF (or probably Safari too) will be needed to make sure that the image looks right.
This really messes things up in terms of putting images on a website, including NPN, hoping viewers will correctly see the image the same way that the person who posted it does. It used to be that we just worried about using calibrated monitors and converting to sRGB colors before posting an image. That's apparently no longer the case. With the increasing proliferation of wide-gamut monitors and the variability in the way browsers handle embedded color profiles, there are a lot more variables to contend with.
Based on my observations, here's what I would recommend.
1. Convert to sRGB before posting, which is pretty standard practice for most people. There is a place to do this in the Save for Web and Devices dialog box. In CS3 you'll need to use the fly-out menu to the right of the Preset drop-down menu. In CS4 and CS5 the "Convert to sRGB" check box is visible in the main dialog box.
2. Always embed the color profile in the jpg image file. This can be done from at least CS3 onward. There is a check box for it in the Save for Web and Devices dialog box. In CS3 the box simply says "ICC Profile" In CS5, it says "Embed Color Profile." (Not sure what it says in CS4.) Checking this box will embed the profile in the saved jpg file.
3. If you have an standard sRGB monitor, use IE8 for viewing images, like those on NPN. The embedded profile will be ignored, but the image will look as the photographer intended.
4. If you have a wide-gamut monitor, use FF (or Safari) for viewing images. The embedded profile will be used to display the image and it will once again look as the photographer intended.
This procedure should ensure that both the person who posts the image and the person who views it are seeing essentially the same thing provided both have calibrated monitors. This sounds complex and requires both the poster and the viewer to do their part, but it seems like one way to control the three variables that interact to determine how an image looks in a browser so that critiques can then be truly based on what the photographer's image actually looks like to the photographer.
I've done a double post on an image in ESS, the first image has the sRGB color profile embedded after converting the image to the sRGB color space and the second image is exactly the same but with NO embedded color profile.
If you're using an sRGB monitor and viewing the images in IE8, both the images should look the same, and are correct with how I'd like you to see the image.
If you're using a wide-gamut monitor and viewing the images in IE8, both images should still look the same, however, both are incorrect with regard to how the image looks to me—they're both too saturated.
If you're using an sRGB monitor and FF, the first image should look unsaturated relative to the second image. In this combination, the second image is the way I see it.
If you're using a wide-gamut monitor and FF, the first image is correct for how I see it and the second image should look overly saturated relative to the first.
If you're using a wide-gamut monitor and FF, the first image will look like I want it to look, and the second will be too saturated. If you're using and sRGB monitor and viewing the images in IE8, the first image will also look to you the same as it looks to me. So by me embedding the color profile and you using the correct browser for the type of monitor your have (FF for wide-gamut and IE8 for sRGB), the first image will look the same to everyone, and will be the same as I see it in Photoshop.
Hope this makes sense. I know this is complex and I would certainly be interested in the observations and conclusions of others.
Follow-up: Mark Stahlke's post on the ESS thread about checking the color management settings in Firefox's about:config settings did the trick. Now both the images in the ESS post when viewed in Firefox look identical too to me, and correct for the way I want them to look. It's worth checking out Mark's comment and links and maybe checking/change your own settings if you're so inclined. My only remaining issue is that IE on the wide-gamut monitor still has over-saturated colors, but that's really not an issue since I don't use IE much. I've gone back and looked at several others' images that previously looked over-saturated to me, and they're all fine now. Feels great to have sense that what I'm seeing on my monitor now matches what the photographer wants me to see.
Unfortunately, when prepared in Photoshop on a standard-gamut monitor and saved with an embedded profile, my images sometimes only look correct when viewed in a browser with color management enabled (when viewed on my sRGB monitor). If I view them without color management it is the exact opposite of your situation, they look different.
This makes me wonder if your suggestion to use a browser without color management when viewing NPN with an sRGB monitor will make images prepared on a wide-gamut monitor look as intended, but have the opposite effect for images prepared on an sRGB monitor?
Good question, John. My understanding would be that It comes down to how Photoshop deals with color profiles. If your image is profiled with the Adobe RGB profile, for instance, then the conversion to sRGB will be the same regardless of your type of monitor or which browser you're using. Photoshop doesn't take these into account. It would only be in the browser, and how it recognizes (or fails to recognize) a profile-tagged image that the issues of browser type and monitor type would come into play. So it really shouldn't matter on which type of monitor you prepared the image; the recommendations I make should still apply. However, some non-conforming replies on the image post and your own experience with an standard-gamut monitor have me wondering if there might be other factors, like monitor brightness or CRT vs. LCD, that might override some of the variables.
One other note, if you're viewing a Flash-based website in a color-managed browser, the image profiles won't be recognized. I learned this the hard way, and I would recommend that photographers stay away from any Flash-based software when designing a personal website, since it throws an additional kink into the mix.
Thanks for posting this. I think this should really help many folks understand the concepts and consequences of color profiling, PS and the web. I have a couple questions though:
Please define a "wide-gamut" monitor? I look at my settings at my monitor is running at 32bit, true color. Would monitors that use "256-color" mode be considered the standard sRGB? Who's using those CRT's today anyway???? (sorry Tony, couldn't resist)
Second, when you say "embedded color profile" what profile are you referring to? If one converts to sRGB before saving like with save-for-web, isn't that the embedded profile? If you're not converting and you have the "ICC profiile" box checked, it will "embed" whatever your working color profile is, correct? For many I guess that would be the Adobe 1998. But I often notice that when I open an image it will come up as an "untagged" RGB. Not sure what that is about.
Anyway, great topic and I look forward to reading more as this progresses.
Lon
Good points Tony. I am unfamiliar with what colors a wide-gamut monitor allows you to see. If I understand correctly, a standard-gamut monitor is unable to reproduce all of the colors in the sRGB color space (is that correct?). If true, then preparing an image on a wide-gamut monitor could well lead to images that appear different on a standard-gamut monitor even in an sRGB image.
What I don't understand is why images might look more correct with an sRGB monitor and a colorspace unaware browser, because I have experienced the opposite in the past. I must experiment with this when I have a chance. I'll try and find an image of mine that appears different on my monitor when viewed in a colorspace aware vs. unaware browser to post as an example. Out of curiosity, do you get different results between your sRGB and wide-gamut monitors with this test? If so, how do the different browsers differ?
I'm definitely not an expert on this, but I think the number of color the video card can produce is quite different than the "number" of colors in any particular color space. Color spaces are defined I think by the size of the spectrum they encompass, and not the actual number of colors. If I had to guess, I'd say that the number of colors in all color spaces may be infinite. It's only when we start to digitalize these colors in specific increments that the number of colors comes into play. So wide-gamut means that it covers more of the color spectrum. sRGB is, I think a smaller color space than these wide-gamut monitors that cover between 95 and 98 percent of the Adobe RGB color space.
I don't think converting and embedding are the same thing. There are different check marks for it in the Save for Web and Devices dialog box. Converting the colors transforms the colors in whatever space your using in Adobe to similar colors that are sRGB according to some chosen algorithm. Embedding and sRGB profile with the image let's color-aware applications, like Firefox, know this. These applications can then work with my computer and monitor profile to more accurately display the colors in the image. At least that's how I understand it, and it did seem to make a significant difference before I made the Firefox settings adjustment that I describe on the ESS post. Now, it doesn't seem to make a difference, at least with sRGB. The converted image looks the same whether tagged or not.
That I don't know. I thought the standard monitor was based on sRGB colors and that it came close to displaying all of them, but I could be wrong.
While the colors look different on the test page between my wide-gamut and sRGB monitors, that's to be expected. The wide-gamut LCD monitor is a calibrated and the sRGB CRT is not. The test shows that Firefox is color-managed and Internet Explorer is not on both monitors, so in that regard, the results of the test are the same on both monitors.
even a wide-gamut monitor would also have to be calibratedd rightly and with a good calibration device (not with software only). viewing/room light temp plays another (big) role.
I find Tonys observations correct and it goes to show you what an unprecise "science" webposting is. web-pics look different on my sRGB monitor, my notebook (no surprise there) and on my Eizo CG243W. (all viewed on FF)
for viewing pics on the web is one thing but for printing, calibration and a wide-gamut monitor is mandatory.
georg
These issues have caused difficulty in accurately viewing/assessing web-based photos since the advent of the Internet. They are particularly important to sites like NPN where seeing a photo as intended by the photographer has always been difficult to do.
We need to create a reference page with this kind of information so that members can better understand the issues and have the information needed to make adjustments to their equipment and post-processing technique.