Color Management and iPhone 4

Update: This page is a little out of date. IE and the iPhone haven’t changed, but Firefox and Safari both have. I’ll update a little more when I get a chance, but both of them are handling color differently now than they were when I put this up.

I got my new iPhone 4 last week, and since there was a bunch of speculation about the iPhone 4 operating system supporting ICC profiles, I decided I’d check it out.

And in the checking, I found out a few things I’d never realized before. So if you’re all geeky about color management and displays and browsers, follow along. It’s kind of interesting.

What you get when you get there is four versions of the same image: One in tagged ProPhoto, and one untagged; and one in tagged sRGB and one untagged. The background is grey #767676, which is what the grey border on the image measures out to in sRGB.

(And yes, I know no one ever sends ProPhoto to the web; I just wanted to get an obviously visible shift on all screens in what I was using as a larger gamut, so even though I usually use this image in Adobe 1998, I converted it to ProPhoto for this test.)

Now, conventional wisdom has it that Safari is color managed, and so is Firefox, while Internet Explorer is not.

Well, turns out that’s not entirely true.

Or it is, but that’s not the whole story.

If you open this file in Safari on a Mac, this is what you’ll get:

Trust me on this: The two on the left appear here exactly as they do in Photoshop when converted to each of these profiles. In other words, they’re absolutely correctly color managed. Meaning that the application–in this case Safari–has recognized the embedded profiles and then converted the images to the monitor profile for display.

The ones on the right were created in the exact same color spaces as the ones beside them on the left. The difference of course is that the ones on the right don’t have anything embedded in them that tells any application that is looking what those color spaces might be. So in the case of both of these, Safari is simply assuming they were created using the monitor profile, and in so doing, assigns it to them. Not likely, but that’s what it does.

Note that in this one on the lower right the background does blend seamlessly, because #767676 is rendered in both cases directly to the monitor profile.

Okay, what happens in Firefox?

Well, in Firefox, you get this:

At first glance, you might think this is pretty good. You’ve got three images that match, and all of the three even get a seamless border.

So how’d they do that?

Well, if you’ll look closely at the three that match, not only do they match each other, but they also match the untagged sRGB image in Safari. So what Firefox is doing is recognizing the profiles in tagged images, applying it, then converting the images to sRGB, and then assigning the monitor profile to everything.

So, none of these images appear in Firefox as they appear in Photoshop. What that means is that depending on how far away the viewing monitor profile is from the monitor images were viewed on when they were created, and from sRGB, those images are going to display correspondingly poorly, or incorrectly in “color managed” Firefox.

And while that’s managing color–in a sense–it is not proper color management. (Any time you assign a color space to an image other than the color space the image is currently in, you’ve defeated the purpose of color management.)

Note that in both cases here, Safari and Firefox, the untagged ProPhoto image has just been assigned the monitor profile.

So now IE:

Now I’ve followed some links lately that allowed as how Microsoft has it all over Mac in how it handles browser color in that IE just assumes everything is sRGB. And for all I know that may even be true. But if it does, it then goes ahead and assigns the monitor profile to everything before it displays it, making the whole exercise moot if it happens.

What you’ve got here is all the elements in this image having the monitor profile assigned to them with no regard to their original color space and no color management used at all.

Note that the two on the bottom now both match the one on the bottom right in Safari, as well as the three that match each other in Firefox. And now both of the ones on top are unmanaged, equally awful, and match precisely the unmanaged ones on the top in Safari and Firefox.

So the bottom line on all these browsers is this: Somehow or another eventually you have to get an image to the monitor color space if you want it to display. Except for Safari on a Mac with an image with an embedded profile, all browsers get there by assigning the monitor profile to your images; Firefox after recognizing embedded profiles, IE before.

So what about the iPhone 4?

Well, rather than try and get a screen capture posted I’ll just say it displays identically to IE. Try it for yourself.

In other words, no color management at all.

Maybe someday, but not for now. I’m not sure how or where this phone supports ICC profiles, but in its version of Safari it’s acting exactly as IE does on a Windows computer, and it’s not using any profiles embedded in online images in any way.