How do you handle color spaces and ICC profiles in your workflow ?

@french fellow MODxers : I have written a much more detailed post on my blog (in french), if you’re interrested.

I’d like to share the past 2 days experience I had with color spaces and ICC profiles. I have spent quite a few hours documenting on this. I am quite curious to know which best practices you follow in your workflow, especially since the several french forums I have asked have given me 0 answers on this issue (and googling it didn’t return much valuable info on english forums either). It would seem that today’s web designers are not so much aware of new issues with color management (at least, french designers).

Sure we all know about the web safe palette, and its use might explain why we never really dug as far as people from print, or photographers, or astronomers dug into color spaces (which they master way better than we do). Now that we’re not really bound by the web safe palette (Read Is the Web Safe Palette
really dead? on wpdfd.com), we tend to use more and more subtle sets of colors and that raises the question of consistency : how do I make sure the web site I create look consistent whatever OS, browser, screen a given person uses ?

If you work alone, and on a PC chances are you did not really come accross any issue and you might wonder what I am talking about here. If, on the other hand you are working collaboratively with people using different platforms, different softwares you might have run into issues as I recently did.

Here is my "story". So far, I have always worked alone from graphics to XHTML/CSS integration to build websites. I use MacroMedia Fireworks, thus I never really had to worry about color spaces since FireWorks default to sRGB which is the appropriate color space for the web. PhotoShop is another story, since it’s not limited to web : it needs advanced color space management for photographer, publishing...etc.

My last project was a new story : I am not building the graphics, but "just" taking care of MODx and XHTML/CSS integration. The guy I work with is using PhotoShop CS 2 for Windows. I am running Mac OS X on a MacBookPro 17", with CS 2 also. He gave me the PSD mockups with an embedded sRGB IEC61966-2.1 profile. So far, so good... I took care to open the files using the embedded ICC profile : no inconsistencies.

I then proceeded to slice and export/optimize the masters for the web : not good, washed out colors. I re-did it embedding the ICC profile into the exported JPEGs (apparently PNGs do not offer this kind of feature). This time JPEG opened fine in PhotoShop and Safari but in FireWorks or FireFox, bad bad washed out colors as before.

I googled, and found Garry Ballard’s website, several interresting pages :
http://www.gballard.net/psd/saveforwebshift.html
http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html (nice test page)
and last but not least http://www.gballard.net/psd/srgbforwww.html

I admit I was not aware that most browser did not understand embedded ICCs, that sRGB with gamma 2.2 was the way to go for web design (as a recent Mac switcher, I did not realize that Macs were set to 1.8 gamma as default). I have re-calibrated my screen with a 2.2 gamma and define a sRGB color space as default.

I have managed to solve my problem by following Garry Ballard’s advice, "Convert To Profile: sRGB IEC61966-2.1 BEFORE Saving for the Web, or going to ImageReady, or posting on the web".

Did you run accross similar problems and were you aware of this (I guess Scotty and Zi were !) ?

Ah the joys of color management... lol

There can be SO much written on this topic. Talk about a black art: ICC color management. It’s great, but learning it as it applies to printed and online pages is honestly about a 3-6 month intense study process with an additional $300-5000+ of additional hardware involved, depending on too many variables to even begin to discuss here. I suggest picking up a Real World Color Management book on Amazon.com if you want to learn more.

Granted, I come from more than a decade running a commercial/agency prepress operation, so my views and reality of having dealt with very critical color reproduction are a bit biased ... and I’m glad honestly to be out of that world!

Thanks Ryan for the book, I’ll check it out ! And yeah it seems quite complex, I mean I didn’t even mention the fact that when you convert to another color space, your current color space is taken into account and there are 4 different kind of algorythm to do it... my, it’s complicated indeed...

More specifically, I am talking web ICC color management there : is it (and will it) become as complex as prepress ? I rather hope that browser manufacturer will avoid this ordeal and all offer ICC aware browsers !

I used to do digital video back when it was considered a new and difficult thing to do (yes, I am partially to blame for all of those horrible AOL CDs you received in the early 90’s). If you think gamma correction is a pain for photos, imagine how annoying it is for video. Back then I was a Mac user like most everyone else in design departments on the West Coast, and we had to create separate Mac and PC versions of every video we made (and back then a 100GB hard drive was a major investment).

more info:
http://blogs.smugmug.com/onethumb/2007/02/14/this-is-your-mac-on-drugs/

Nice article g5604 !

I noticed the author also mentions Garry Ballard
The link to PNG Gamma is fairly instructive, I was missing that bit !

And the downloadable sRGB gamma 2.2 profile is useful indeed !