and color management
A lot of people are confused the first time they save an image for web display: The image looks different in a non color managed browser then it did in Lightroom or Photoshop. One “solution” was to view the image in Photoshop like it would appear in a non color managed application, by going View > Proof setup > Monitor RGB. This would show you how the image would look in a non color managed application on your screen. Still a guess what anybody else would see though, since you’re seeing the difference between the monitor profile and sRGB…
A much better option would be for everybody to browse color managed.
Up until recently, most browsers were not color managed. Safari changed that, and was the first color managed browser for PC. Internet Explorer had provided a color managed browser for Mac OSX before that, but it is discontinued now.
A few new options arrived lately
FireFox 3 is color managed, though the feature is disabled by default. If you enable it, it’s a heck of a lot better then Safari in my opinion, since it fully color manages: It rightly assumes sRGB on untagged images (Safari stupidly assumes Monitor RGB, except on Vista), and it does so for backgrounds as well. So no more Safari Wonkiness…
Firefox gets even better tomorrow, when version 3.5 is introduced. It has color management enabled by default.. There is a bug however when using wide gamut monitors. So those of you on a wide gamut screen, better wait for version 3.5.1…
Easiest way to enable color management in FF3.0, is to use the Add-On. Nice to note that this Add-On also works for Flock, the browser I’m currently using.
OmniWeb 5.1.3 is color managed when set to be in the prefs.
Another color managed browser will be the upcoming version of Google Chrome. Yay!
Join the majority
Looking at the statistics of this blog, about 53% of the visitors use Firefox, 21% use Safari, 19% use IE and 3% use Chrome. So chances are that a whopping three quarters of you could be browsing color managed! That’s a big majority.
Since more and more people will be browsing color managed, the last part of the advise many times given in the past; “web images should be sRGB, without embedded profile“, is no longer valid in my opinion. Also, a lot more people use wide gamut screens, on which non color managed browsing is a horridly over-saturated experience.
Where does Photoshops “Save for web” fit in?
The save for web dialog box changed a bit after CS2, and now also gives you the option to convert to sRGB. In PSCS2, you had to do that manually. It still gives you four different ways to preview your image: The same options you get when you go View > Proof Setup.
What a lot of people don’t realize is that these viewing options can be set for each window separately.
First, let’s see what each option does:
“Monitor Color“: As a non color managed application would show it on your screen.
“Macintosh (No color management)” As a non color managed application would show it on a monitor with gamma 1.8 (ancient): The image appears lighter.
“Windows (No color management)“: As a non color managed application would show it on an sRGB monitor. An sRGB image will look the same here as in the last option. An AdobeRGB or ProPhotoRGB image will appear less saturated.
“Use document profile“: As a color managed application would display it.
What does it look like
For demo purposes, I used an image in ProPhotoRGB that shows a massive amount of clipping in sRGB. I also used my laptop, which has a rather crappy screen, so the differences between the monitor profile and sRGB are obvious.
The window showing the “Original” is set to “Document profile” in all screenshots. Again: You can set the view for all windows separately. So when using “4-Up”, you can compare the original to
an approximation a wild guess of what non-colormanaged browsers might show other users.
First screenshot: ProPhotoRGB, without converting to sRGB, Preview set to “Monitor Color”. Horrid, and the reason for many posts on photography forums.
Second screenshot: converted to sRGB, Preview set to “Monitor Color”. Quite a bit off, but does show why you should use sRGB for the web.
Third screenshot: converted to sRGB, Preview set to “Document Profile”. Nice Match.
Note that the image is way out of the Powerbooks gamut. So it appears a lot less saturated in that color space, because it’s clipping like crazy. (Naturally, the screenshots were converted from the powerbook profile to sRGB before posting) Compare the sRGB version below with the one restricted to the Powerbooks displays gamut in the above screenshots.
Additionally, the clipping that’s occurring while converting to sRGB doesn’t show on the Powerbook, since the monitor gamut is smaller then sRGB. On my desktop with LaCie CRT, I can clearly see the clipping when toggling the “convert to sRGB” tickbox. If I were to post this image, I’d correct for that clipping before converting…
So, all in all “Save for web” is a very useful tool that provides not only “WYSIWYG” , but also provides a guess to what others might see.
Lastly, for those interested: Here’s a screenshot of the difference between Gamma 1.8 and 2.2. A good reason to use Gamma 2.2 and I’m glad to say the next version OSX will finally ship with Gamma 2.2 set as default, instead of the legacy Gamma 1.8.
16 Responses to “The world wide web”
Anouk Timmerman Says:
June 29th, 2009 at 18:08
I quote: “Looking at the statistics of this blog, about 53% of the visitors use Firefox, 21% use Safari, 19% use IE and 3% use Chrome. So chances are that a whopping three quarters of you could be browsing color managed! That’s a big majority.
Since more and more people will be browsing color managed, the advise many times given in the past; “web images should be sRGB, without embedded profile”, is no longer valid in my opinion. Also, a lot more people use wide gamut screens, on which non color managed browsing is a horridly over-saturated experience.”
3 quarters of your blog readers browse with Firefox (more than half) or Safari. You already mentioned Safari isn’t as good as Firefox with color management enabled. But you still have to enable it yourself, so 21% is browsing sort-of color managed, and more than half of your readers *might* be browsing color managed. Then isn’t it a bit early to call that “old advice” “no longer valid”?
June 29th, 2009 at 18:30
I was referring to the last part of the advise (not to embed a profile)
Because Safari displays an image right if an icc profile is embedded, but wrong without an .icc profile, that’s a major reason to embed the profile. Web images still should be sRGB whatever else you do.
Edited the page to be clearer.
Trey Paul Cash Says:
July 5th, 2009 at 03:19
I am new to colo rmanagement. But I just purchased a large format 12 color Canon and what I am soft proofing is not what is coming out of the printer.
You mentioned in a previous post that some images files have embedded profiles in them. You would do me a great service by telling me how I can figure that out myself. And furthermore, where can I find the description of the data format of these files?
July 5th, 2009 at 17:24
Are you sure color management is turned off in the printer when you’re using a specific printer / paper profile? Rendering intent is the same while proofing and printing?
I’m not sure I understand exactly what else you are asking?
All images should have an embedded profile in them in a color managed workflow.
Photoshop (which I assume you’re using, since you mention soft proof) will kinda tell you the RGB working space of the image in the top of the image window;
You can also see the current profile by going Edit > Convert to Profile..
July 10th, 2009 at 06:26
Trey Paul Cash: Try Method #1 http://retouchpro.com/tutorials/?m=show&id=346
Trey Paul Cash Says:
July 28th, 2009 at 03:47
Thank you Rene and Chain. You have been a big help. It used to be I calibrated and profiled my monitorer, I shot in AdobeRGB and converted to sRGB for web, and printed from photoshop using generic profiles from the paper manufacturers and everything seemed good enough. I never did get what I saw on the monitor to come out of the printer though. I blamed the printer.
So now I have a new 12 color imageprograf 6100 and now I want to print as closely as possible to what I soft proof. But things are not going my way.
Thanks for showing me the meaning of the ‘#’ and the ‘*’ on the title bar. I never knew what they were, and I changed the info thingy on the bottom of the window to show the document profile. I totally forgot I could change that. This has prompted me to read the entire color information in the photoshop help files.
My biggest problem now is that things look quite well on my generic profiles printing for photoshop print. But stuff is way dark when I print using the Canon 16bit photoshop plugin. And since I shoot raw and edit in 16bit, I believe I would get some advantage from using that.
My first guess would be that I didn’t shut off the printer management of the color and it gets managed twice, but it looks like I have everything set correctly.
So, I don’t know as much about printing and color as I thought, but I am on a crash course. I have books ordered and doing lots of research. I will get a handle on it soon.
I will be following this blog as frequently as I can and I hope I will be able to contribute in the future also.
Trey Paul Cash Says:
July 28th, 2009 at 03:49
Oops, in the preceeding I meant that both photoshop and the printer driver might be competing to manage color, but you probably figured out what I meant.
July 29th, 2009 at 19:48
Don’t know the Canon 16 bit plugin.. Might be that that is somehow causing trouble… (Since “normal” printing works well…)
Here it’s said that:
One bit of advice though if you’re using custom profiles. The 16 Bit driver definitely needs to be profiled separately from the regular driver. Results will be quite different
This might be interesting as well.
Also, I once wrote a fairly long post on POTN with in it a couple of links regarding color managed printing. Might be worth a read.
Get Colormanaged » Blog Archive » Photoshop CS4 Color Settings Says:
January 13th, 2010 at 15:35
[...] If you are just doing work for internet, anything should be sRGB. If you have to ask why: Read my blogpost on the subject. Then again, I’d like a warning if an image has no embedded profile: In some [...]
Ed Batsman Says:
August 26th, 2010 at 13:47
Another fruitless modern colorful joke for wide-gamut- lmotley-ames, where is psychosis there is money and “new” websites, authors, articles, books,devices etc.. (another one from market-wars) I tell you terrible story. I open (unexisting in reality colorspace ProphotoRGB photo in sRGB device… oh, my god!!! Oh, noooo, and now I don’t know is it photo of my mom or photo of my dad. Help me, rescue me, oh no, oh god, oh Obama, how live after that? life is not justice to me. I ask you – DON’T COMPLICATE LIFE FOR PEOPLE IT VERY COMPLEX BY DEFAULT!. We haven’t monitors working with REALLY wide gamut we haven’t generation difference, we must work in sRGB , we must don’t care and sleep as kids. Dixi. From Russia with love
Ed Batsman Says:
August 26th, 2010 at 13:59
P.S. Exception – DTP professionals, color-spaces are industrial disease for them, but it will be for them only.
Ed Batsman Says:
August 27th, 2010 at 03:52
Hmmm, you can delete my comments, there are some wide color-space monitors at affordable price now.. for common users
August 27th, 2010 at 10:59
Hadn’t deleted them, just hadn’t approved them yet.
Certainly the first one was quite rambling, and I was trying to figure out what you were trying to say…
Frankly, I’m still not sure, but I think you mean that people should use sRGB for web? And use sRGB unless they know what they’re doing?
With that I agree completely.
Ed Batsman Says:
October 2nd, 2010 at 14:10
yes, “people should use sRGB for web. And use sRGB unless they know what they’re doing,” it’s more accurate explanation, than my first message.
AnoukTimmerman (Anouk Timmerman) Says:
August 3rd, 2011 at 09:50
RT @ReneDamkot: “Save for Web” http://www.getcolormanaged.com/color-management/saveforweb/
Image processing – Calibrating a good foundation | JanNews Blog Says:
April 23rd, 2014 at 23:27
[…] RENé DAMKOT posted a very interesting and helpful post on his blog which can be found HERE. […]