Skin tones, browsers, and color spaces

[srwatters]

I've been running into some issues with color spaces and getting skin tones warm but not 'orange' looking. First the background:

Machine 1: Dell PC with Dell 1707FP
Machine 2: Apple Mac Pro with 23" Apple Cinema Display
Machine 3: Apple PowerBook G4 1.67GHz w/21" Sony Trinitron monitor

All three machines have been calibrated with a Gretag Macbeth Eye One Display 2 device and are spot on with respect to color temp and gamma. When viewed in Photoshop, the master image (8 bit aRGB) looks beautiful and prints from my lab are also spot on (after profile matching magic...).

When I process images for the web using PS CS2, I convert the image to the color space sRGB IEC 61966-2.1 from AdobeRGB (original edits done in ProPhoto), then downsample from 16 to 8 bit depth, finally resizing for display (700 pixels high). My issue is when I look at the resulting image on the three systems in different browsers, I get different results. I know that Safari is color space aware and is displaying the image correctly, yet FireFox on the Macintosh looks darker and more orange than Safari and what I see in Photoshop. On the PC both IE and FF look the same (darker and more orange in the skin tones) as expected (not color space aware) but also not the same as PS Elements 5 on that platform.

Just how the heck am I supposed to get the correct colors out of IE and FF? Is there yet another sRGB that I'm supposed to be using?

Here is the image I'm working on and can't seem to get right. Feel free to download it to your system and do the same experiment with browsers and Photoshop. I'm

[Gordon]

First off, yes, it is a crappy situation in terms of cross browser, cross platform calibration.

sRGB is in general the worst common denominator.

But, are you converting the files to sRGB and then saving them, tagged with sRGB ?

Also, some browsers throw away the colour space info and default to the 'system' colour space. This is normally sRGB, but you can set it to a different profile, if you say happened to have profiled the system and set the default to that generated profile. (this is often the case in Windows at least with a colorvision spyder)

So for the non-colour managed browsers, check what the default space is for an untagged/ uncolour managed image - it probably has been shifted from the sRGB default (hidden somewhere at the back of Advanced in Display settings, no doubt.)

[srwatters]

For grins, here is the same image converted to the different profiles I've seen referenced...

This is best viewed on a wide screen monitor so you can get at least two or three images per row. The profiles are in order: sRGB IEC 61966-2.1, sRGB IEC 61966-2.1 with black point compensation, Nikon WinMonitor 4.0.0.3000, Nikon MacMonitor 4.0.0.3000, & Nikon sRGB 4.0.0.3000



From what I can see, the Nikon sRGB actually looks closest to the original when viewed with non color space aware browsers. I might consider changing my workflow to include the Nikon sRGB profile for web images.

Opinions?

[dlbdata]

Great post and discussion.....

[Gordon]

Originally Posted by srwatters

From what I can see, the Nikon sRGB actually looks closest to the original when viewed with non color space aware browsers. I might consider changing my workflow to include the Nikon sRGB profile for web images.

Opinions?

As I said above the idea of 'non-color space aware' browsers really means using the operating system's default color space. This gets messed around with by calibration tools as well as varying between operating systems.

Also, any calibrated system will look different because typically part of the calibration process involves changing the values of the video cards DACs, which changes the results for images displayed with and without colour management.

Long story short, you can't really predict what it'll look like on a.n.other system, by looking at a machine that has had calibration done to it - because the default profiles may have changed, but even if you change them back, usually at start-up your video card is modified (e.g., Adobe Gamma does this, or the various start-up utilities used by the other profiling tools)

If you can confirm that both machines are using a default sRGB, without any start-up profile manipulation, then you would be in a good place to compare the effects of applying a profile then throwing it away (what you are essentially doing here is converting to a profile, then doing an 'assign' directly to whatever the built in default profile is for the system - that's the same as viewing it in a 'non-profile aware' browser.

On my particular system (Linux & firefox no calibration, profiling or anything really, but I suspect a windows-like 2.2 gamma curve) the third image looks closest to the original file. Several of the others including the last one look like they have a fairly heavy fake orange tan. The fourth one is the worst in that respect.

[huxley]

i had no idea a browser would affect the result of the image. i always took for granted that the browser would be calibrated to my monitors color space. why then would a browser modify color space of a posted picture? wouldnt that just undermine a posters calibrated workspace? im on a mac, so safari is color space aware? is that the way to go? what is the best or "closest" way to view posted photos online?

[Casper]

I feel your pain, Scott. I have similar problems when doing forensic image work. I can't be sure of what another investigator, attorney, judge, etc. will see on their monitor.

Steve

[srwatters]

But Gordon, I'm worried about my calibrated devices first. Should they not be able to represent sRGB in a reasonable fashion after using the GMB Eye One? That's what's really confusing. I would like for my images to be seen as I edit them on the same monitor with both the browser and PSCS2. Am I asking too much?

Maybe my skull is too thick today, but I don't see why... Do I need to convert them to the profile created by the GMB software? That would seem silly...

[Gordon]

Right, Scott, you want to see them all the same on your devices. But are they all using the same default colour space for 'non colour managed' images ?

The problem you get with viewing them in non-colour managed tools is that whatever profile was last applied to the image gets directly & literally translated (i.e., like an 'assign' in Photoshop, rather than a convert) to the default working colour space of the OS
If the last space used on the image and the working default space happen to be the same you'll get no difference. If they are close, you'll get little change, the further away they are from each other, the more of a shift you'll see. If you want them to look the same, you have to convert it to the same space as your system default. Then, when the profile is thrown away and replaced by the system one, it will not introduce any shifts.

So that gives you two questions, if the answers aren't the same for each machine, then you'll get shifts between them:

1/ So are the three machines using the same default colour space for non-managed images ?

2/ Are you converting the images to that same colour space before viewing them in the non-profile aware browsers ?

Even then, I'm not entirely convinced it is possible to match images between a mac and PC, just due to the different default gamma curves applied. I'm sure you can get close but I don't know that it is exactly possible. Don't have a mac to confirm though.

[srwatters]

Originally Posted by Gordon

Right, Scott, you want to see them all the same on your devices. But are they all using the same default colour space for 'non colour managed' images ?

Under the control panel on the PC->Display Settings->Advanced->Color Management I have the profile Monitor_1-2-2007_1 which was created with the GMB tool. No other color profiles are associated with the display. Under control panel->Color Settings I have the default windows color space set to sRGB IEC61966-2.1.

On the Mac I have each monitor assigned it's one GMB Eye One generated profile. When I open up the ColorSync utility, I haven't a clue where to find the 'default color space'. I don't quite get the way OS X handles it, but I'll bet it's better than the PC.

Originally Posted by Gordon

The problem you get with viewing them in non-colour managed tools is that whatever profile was last applied to the image gets directly & literally translated (i.e., like an 'assign' in Photoshop, rather than a convert) to the default working colour space of the OS
If the last space used on the image and the working default space happen to be the same you'll get no difference. If they are close, you'll get little change, the further away they are from each other, the more of a shift you'll see. If you want them to look the same, you have to convert it to the same space as your system default. Then, when the profile is thrown away and replaced by the system one, it will not introduce any shifts.

So that gives you two questions, if the answers aren't the same for each machine, then you'll get shifts between them:

1/ So are the three machines using the same default colour space for non-managed images ?

2/ Are you converting the images to that same colour space before viewing them in the non-profile aware browsers ?

Even then, I'm not entirely convinced it is possible to match images between a mac and PC, just due to the different default gamma curves applied. I'm sure you can get close but I don't know that it is exactly possible. Don't have a mac to confirm though.

1. I can't tell, but I'm less concerned with the differences between the machines. I want to understand why on the same machine and same display why the image looks different in Photoshop and the browser. I thought they should look the same if I convert the image to the profile the system is using (sRGB). But Nooooo.
2. Yes I have several files each converted to a different version of the sRGB color space as shown above. These are not 'assigned' they are 'converted'.

[srwatters]

For anyone interested in a good laypersons read on this subject, see this article by Jeffrey Friedl. I'm still reading, but it looks like it's answering some of my questions (not that Gordon didn't, my skull is thick today)...

[Gordon]

Originally Posted by srwatters

2. Yes I have several files each converted to a different version of the sRGB color space as shown above. These are not 'assigned' they are 'converted'.

Yup - but they get 'assigned' by the OS at the last step.

Photoshop knows that image+space1 should be shown as image+space1

But the browser just reads it as 'image' and displays (assigns it stupidly) to space2.

What 'space2' is, is key. I'm not sure how your 'default' and 'monitor' spaces interact though in windows. I'd hope space2 would be either the OS default or the monitor default, though it might be some bastard offspring of the two for all I know.

[srwatters]

GAK! This is the worst. On the Mac Pro at home (which has the best video card/monitor) the winMonitor profile looks best in FF. I just don't get it, but I know I'm unhappy with the 'sRGB IEC' profile on any system. Perhaps it's best to leave the images a little cool and desaturated for the web and call it a day. At least pretty much everything looks decent in Safari.

Browsers suck. We need colorspace aware Firefox.

[12stones]

Originally Posted by srwatters

For anyone interested in a good laypersons read on this subject, see this article by Jeffrey Friedl. I'm still reading, but it looks like it's answering some of my questions (not that Gordon didn't, my skull is thick today)...

Bump for this article. This has provided some amazing info on color management, browsers, and color profiles. Thought someone else might benefit from this too.