TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Shifting Back

June 18, 2007

Colour profiles in imaging applications are a sticky issue at best. The path of least resistance when producing web graphics is turning them off entirely and ignoring the whole mess, which is pretty much what I’ve been doing for years.

The basic theory is this: a colour profile acts as an interpretation layer, and adjusts the colour values of the pixels you’re working with for consistency, richness, and other reasons. The net effect is that your RGB value of 255, 12, 12 might end up being rendered as something closer to 255, 0, 0 on-screen, while still being saved out with the original RGB values. That means if you don’t have the benefit of the original colour profile, your output ends up looking a bit different than your working copy; usually with duller colours and a lighter overall tone (or darker, depending on which profile you’re using).

This colour shift explains why turning off colour management is generally not a bad strategy when producing output for the web. No browser other than Safari supports colour profiles, so there’s no benefit to using them. Not to mention that in many cases you’ll find yourself matching RGB values between your image and your CSS, and because CSS isn’t profiled it’s a more difficult task if you have a colour profile to contend with. The closer you can get to actual RGB values, the saner you’ll stay

I’m bringing this up because I’ve been working off of two computers lately, and until recently I wasn’t paying much attention to the fact that the profiles were mismatched between them, thus affecting my source files. Unless I pay meticulous attention to the dialogues that pop up asking me what I want to do about the situation, when I save out graphics I end up with images sitting on top of slightly more vibrant background images, causing visible seams where there’s clearly a colour shift occuring.

Googling didn’t come up with any solid way to deal with this, so I’ve had to figure out a way to shift colours back from their profiled version to more accurate RGB values, and then make sure that information gets saved out when I’m creating my final GIFs & JPGs. Here’s what I came up with.

No assigned profile

Figure: image with no assigned colour profile, saved to GIF format.

First, I’ve found some applications in particular (Illustrator, I’m looking your way) seem to have trouble remembering that a colour profile has been assigned. So if I’m working in sRGB space for example, every time I load that document I have to assign the sRGB profile. Annoying.

So that’s the first step, making sure that the profile is actually assigned. In most Adobe apps, the action should be found under Edit > Assign Profile. What you assign is up to you, the trick is to make sure that the current profile matches what the document was created with. I’m using sRGB here.

sRGB profile

Figure: image with sRGB profile, saved directly to GIF format. It’s effectively identical to the previous image, which had no profile assigned.

Now if I were to just save them at this point, the GIFs and JPGs will have simply discarded the profile during the saving process and I’d end up with an identical result to previously, where I’d saved them without any profile information.

The key lies in conversion. Photoshop has the ability to convert between profiles, and keep colour levels relatively intact when doing so. What we need is to take the now properly-profiled sRGB file and convert it back to raw RGB values. Under Edit > Convert to Profile, you get a “Destination Space” dropdown that will allow you to choose between various profiles. What you want is your monitor’s working RGB profile (which is effectively the same as saying “no colour management at all”). On my iMac, the option I select is called “Working RGB - iMac”. If you don’t see an equivalent for your monitor, you could select “Generic RGB Profile”, but it’s probably best to first load up Photoshop’s global colour settings (Edit > Color Settings) and make sure your default RGB space is set to “Monitor RGB”. If it’s set as your default, your monitor’s profile ought to show up in the destination space dropdown.

After this step, you’ve now converted the profiled version of your document back to raw RGB, but kept the colour levels similar to what the profile enabled. Save the file, and now you’re free to save out to any image format without a colour profile. The result will be much closer to what you originally intended.

No assigned profile sRGB profile converted to monitor colour

Figure: the top image is the same unprofiled example as above, while the bottom image was converted from sRGB to monitor colour and then saved to a GIF file. Note the slight colour difference.

That’s Photoshop, but what about Illustrator? No such luck. It allows you to assign a profile, but there’s no Convert option in the menu. Illustrator’s help file says that conversions can be performed in Photoshop or InDesign, but mentions nothing about doing it directly in Illustrator. The only fix I’ve found so far is saving out my Illustrator file as a PNG, then loading it in Photoshop and following all the steps above. Not ideal, but it gets me where I need to go in the end.

Note that this is all written while using Adobe’s CS2 suite; I’m not sure how CS3 changes things, but in particular, I’d certainly hope that Illustrator CS3 has taken a few steps forward in the way it handles colour profiles.


1
Martijn says:
June 18, 13h

‘Edit > Color Settings…’ is there in Adobe Photoshop CS3 Extended. ‘Convert to Profile…’ is there also. Atleast, those are the words of a friend of mine. He didn’t test them out just now and I do not own a copy of CS3 to test it myself I’m afraid.
Great article, will need to check into this. Will this also solve those colour display differences between, for example, GIF and PNG files on the web?

June 18, 13h

Thank you for this article, I’ve been going mad these last two weeks working on graphics between myself and another designer in New York that color shift had crept into and figuring out how convert the image back towards the intended RGB values was giving me a headache.

June 19, 01h

Thanks, Dave. Looks like it solved my problems with having different colour shades in my Photoshop and the Browser.

Btw, Photoshop CS doesn’t have Edit > Convert to Profile nor Edit > Assign Profile options. All I did was choosing Color Settings and setting the default RGB space to “Monitor RGB”. I’ll have to check out how it works in CS3 though.

elv says:
June 19, 05h

The main benefit of color correction, even for the web, is to know you have the right colors in front of your eyes.
So when you’re told “The background color is a bit more red than on the reference brochure I gave you”, you know what to answer.

Apart from that, I agree profiles are pretty useless in a web browser, and the best way for now seems not to use them. Browsers treat images as SRGB by default, so you can just work in sRGB and never embed any profile.

Concerning graphic apps, I think using “Monitor RGB” as your default RGB space is a bad idea. The goal of a color space is to be independant from any device, otherwise you’re guaranteed to have color shifts.

Ermanno says:
June 19, 08h

Please excuse my following “dummy” question.
What’s the reason why you don’t use easily the PNG format? It cannot support the Monitor RGB data?

Ming says:
June 19, 18h

>> Great article, will need to check into this. Will this also solve those colour display differences between, for example, GIF and PNG files on the web?

The problem (at least, the one I think you’re talking about) is actually Internet Explorer’s method for displaying PNGs. Identical hex values exported to PNG in Photoshop (CS, CS2, CS3 I’ve tested this, using sRGB colour profile) all turn out differently when viewed in Internet Explorer (6 & 7 I’ve tested) as compared to Firefox (and other near-standards-compliant browsers,) which happen to display the exact same hex value when in Photoshop -> web (and are exactly the same when matched against the same hex value as a background colour alongside it.)

It’s the reason I’ve always avoided using PNGs if it has to “fade” to a flat HTML hex value.

June 20, 00h

Great article. I was actually wrestling with color profiles on a project about 2 months ago. I was using a background gradient that was *really* light and fairly saturated — it looked drastically different depending on the color profile difference between OS X and Windows. My solution was to make the colors appear correctly in Windows, then embed the color profile in a PNG for Safari. Unfortunately that left me out in the cold in Firefox Mac.

I’ve never really figured out a solution to that problem. I wound up re-designing and using a darker background — so I dodged that issue.

June 20, 03h

When I needed a PNG image to fade to an HTML hex colour, I had to use a PNG gamma stripper app, GammaSlamma.app

Drop the PNG file onto it and it creates a new one. The new image appears to work fine in IE, Firefox and Safari when blending with an HTML hex colour.

9
Matthias says:
June 20, 14h

@ inspirationbit:
As far as I know, Photoshop CS also has the two functions for converting and assigning color profiles. But in CS, the options are in the Image > Mode menu.


Btw. it seems that with Photoshop CS3, gamma metadata is no longer embedded into PNG files. For CS and CS2 there are various plug-ins or apps for stripping the unnecessary gamma metadata like David said.

elv says:
June 21, 03h

As David Winter said, IE and Safari try to make good use of the gamma data in the PNG files. Unfortunately they seem to apply the correction only on images, so it creates differences between css background colors and PNG images.
If you strip the gamma informations it works in any browser.

Another good Gamma stripper, and image shrinker, is PngOptimizer (http://psydk.org/PngOptimizer?lang=en).

11
Aaron says:
June 21, 11h

I have color management turned off in Photoshop (CS2) since the real benefit to color management is when making comparisons to the real world (i.e. print, etc.). Where I work when a PSD is created on a Mac and then images (gif anf jpg) are exported via ‘save-for-web’ on a PC there are inconsistencies in color. The only solution we’ve found that works is to disable color management alltogether.

Does anyone know why this is a problem in the first place, if both machines are using the same sRGB profile? Is it because the OS applies color management to what is on screen? I wouldn’t think this would effect a photoshop file, but I’m not sure.

I’ve also noticed, and been annoyed by, the gamma correction in PNG images when it comes to the web. It doesn’t make much sense to me that a format designed specefically for the web would use color correction at all. Is there a way to remove the gamme information from a PNG in Photoshop (or not use it at all)?

Rainer says:
June 21, 22h

That’s maybe a little bit off-topic… May I use your magnifier illustration for my website? Or is it part of a icon package you sell?

Thanks, Rainer

June 22, 04h

I have recently had a similar issue; working alongside a fellow designer his laptop screen would not differentiate between a pale green or yellow and I could clearly tell the difference on my desktop machine. @Aron - I have also noticed the gamma correction in .PNG’s :-(

Jeremy says:
June 22, 18h

elv: Browsers treat images as SRGB by default, so you can just work in sRGB and never embed any profile.

This is correct, and I might add that Flash also treats imported graphics as sRGB. With a project I’ve been working on recently, the designer worked in the “Adobe RGB” color profile. When I saved out images for use on the web (or in PNG format for import to Flash) the colors were slightly dull and dark. He told me to first convert the profile to sRGB, then “Save for web.” This fixed the problem.

The only crux is that when converting the profile, Photoshop tries to flatten the file. When it does so, some of the solid colors become slightly pixelated, similar to the effect of JPG compression. Weird, I know, but If you un-check “Flatten image” in the “Convert profile” dialog box, pixelation will not occur. The profile conversion will just take longer since it has to process each layer.

Will says:
June 23, 04h

@Jeremy - not exactly. Different browsers will treat images/photos in different ways.

I’m a photographer, and when putting pictures online, especially black and white I’ve always noticed that different browsers and profile settings cause various shifts.

The same applies to web design graphics. I have enough experience to have noticed issues going to between mac/pc and the various ways things are saved.

For you PNG people out there.
http://www.shealanforshaw.com/gammaslamma-11-update-now-available/

16
Song says:
June 27, 13h

I have experienced a similar situation. Thanks for the posting. I will blog it and share with my friends at work.

July 04, 01h

I don’t understand why people consider PNG as a viable format for web design. It isn’t supported well in, even now, popular IE6 and has different implementations in the others browsers.

PNG has a good benefit when it comes to images with few colors, like icons, illustrations, etc. But for web design it still recommended to utilize the JPEG/GIF conjunction since this has a better effect in speed and usability.

I don’t wanna use 3 applications just to save an image in PNG format that looks well in all browsers. Maybe this makes me an old-school designer :)

Dan says:
July 07, 04h

colormanagement is a sience at its own. i deal with colormanagement over 10 years and saw many things that work but more that don´t work.

for me the best way is first to convert the design in CMYK, if you make sites for customers you allways have to pay attention on their corporate identity and surely their colors. most of the sites are a part of cross-media and so the colors of the website must match mostly to the printed products. one advantage of this is, that the RGB-Color-Area is much bigger than the CMYK and to convert all to CMYK, your Area would be much smaller and match better in RGB.

After that i mostly try to convert it to “web-secure-color-space” and if the results are not good i convert it to Adobe sRGB. For the endresults i don´t use any profiles, like Dave mentioned there are no browsers at time which support colorprofiles.

July 17, 10h

Thankfully the CSS3 color module should solve this problem as it has added the color-profile property, as well as rendering-intent and @color-profile from SVG. It’s not much help right now as no browser supports this, as far as I know. The default value for color-profile is auto, which means profiles in images are respected, so in this respect only Safari is correct here. Setting color-profile: sRGB; will make all content including the images use the sRGB ICC profile, once it is supported in browsers.

Currently I’ve not heard much demand for color-profile yet, an as no other browsers support its, it’s not at the top of my CSS3 priority list for Opera. If there is enough demand we’ll look into it further. Currently the other CSS3 properties that have an existing implementation, such as border-radius, multiple background images and border-image have been requested much more.

20
Paul Collins says:
July 30, 03h

Thanks heaps for that article Dave, that has solved my problems. I had found other articles that recommend converting to sRGB, but this didn’t seem to change anything for me.

Thanks again.

dudu says:
August 14, 01h

Btw, Photoshop CS doesn’t have Edit > Convert to Profile nor Edit > Assign Profile options. All I did was choosing Color Settings and setting the default RGB space to “Monitor RGB”. I’ll have to check out how it works in CS3 though.

22
hcabbos says:
August 16, 07h

I’ve been using the suggestion in this article for a few years now and it’s worked very well. However, I made the jump from CS to CS3 and my process somehow broke. After converting to my display/RGB profile, my colors would shift once I was in the Save for Web dialog window. It turns out there’s a drop down in the window that’s on by default which converts your file to sRGB. Depending on your color workflow, disabling this brings back consistency in the transition from Convert to Profile and the Save for Web window.

javier says:
September 12, 03h

If I want that my web load more quickly, what can I do? PNG is more big size than JPG!!

David says:
November 01, 15h

Wow! I can’t believe how well this method works! I design on a Mac and used to transfer any documents to my PC in order to do color correction (Image > Adjustments > Auto Levels) after using “Save for Web” because the colors were so washed out.

This looks even better without over darkening in photographs! Now I’m feeling bad for my clients for not finding this sooner ;)

October 16, 03h

Fantastic. Just what I was looking for! I also noticed I also had to turn off the ‘Convert to sRGB’ option when producing a PNG via ‘Save for Web & Devices…’