How does Safari really render photos?

Baldy · January 28, 2007

For a couple of years I've been repeating back what I've seen Andrew Rodney and Rob Galbraith say, that when no ICC profile is attached to a photo, Safari uses the monitor profile to render it.

But I put together this test page, which seems to show that an sRGB image with profile attached looks very different from one with no profile and the monitor set to sRGB:

http://www.dgrin.com/test

You can mouse over the upper left image to see how the image changes no matter how your monitor is set.

I'm told that some Apple engineers say Safari doesn't use the monitor profile but instead just dumps the bits off to the graphics card. Does that mean that if you change your monitor setting, the image won't change color? Using the test page you can see that it does. If changing the monitor does change the color, why does setting it to sRGB not render the photo the same way that attaching an sRGB profile does? :dunno

The answer must be something simple I'm missing.

Dee · January 28, 2007

More puzzling
I'm no expert, but I did a screen grab on my Mac from Safair and Firefox. I can't believe the difference. My monitor is calibrated with Huey.

Firefox

Safari

Baldy · January 30, 2007

Dee wrote:

I can't believe the difference.

Firefox ignores ICC profiles, so the Adobe 98 and ProPhoto images look awful because Firefox assumes the Internet standard: everything is supposed to be sRGB.

It's so ironic that Safari can display what no other browser can: ProPhoto and Adobe 98 files because it's smart enough to know what to do with ICC profiles. And yet.... It can't do what every TV, other browser, and cheap consumer device can do: display sRGB files as sRGB when no profile is attached. :cry

DavidTO · January 30, 2007

Baldy wrote:

If changing the monitor does change the color, why does setting it to sRGB not render the photo the same way that attaching an sRGB profile does?

The answer must be something simple I'm missing.

Baldy,

The sRGB profile on my MBP looks so wrong, so very wrong, that I wouldn't trust it for any color sensitive application.

My monitor is calibrated with the Huey, and I trust that, period. I don't trust the sRGB profile for my monitor, period.

So my answer to your question, is because the sRGB profile isn't calibrated, and looks like drek.

Totally unscientific, of course.

Baldy · January 30, 2007

DavidTO wrote:

Baldy,

The sRGB profile on my MBP looks so wrong, so very wrong, that I wouldn't trust it for any color sensitive application.

My monitor is calibrated with the Huey, and I trust that, period. I don't trust the sRGB profile for my monitor, period.

So my answer to your question, is because the sRGB profile isn't calibrated, and looks like drek.

Totally unscientific, of course.

Hi David,

Let me make sure I understand. You've calibrated your monitor so that sRGB images without profiles look the way you want, right? Makes sense because most sRGB images on the web don't have profiles.

So when you run across one that has a profile, like on that test page I posted, it looks bad. Correct?

DavidTO · January 30, 2007

Baldy wrote:

Hi David,

Let me make sure I understand. You've calibrated your monitor so that sRGB images without profiles look the way you want, right? Makes sense because most sRGB images on the web don't have profiles.

So when you run across one that has a profile, like on that test page I posted, it looks bad. Correct?

I calibrated my monitor with the huey. I'm happy with the calibraion, I think it's accurate (as accurate as a MBP can get--my ACD is so much better). When I select sRGB as my monitor color profile, the display looks terrible. I've not calibrated the sRGB setting. Should I? Seems to me that it would no longer be sRGB at that point? Am I missing something?

DavidTO · January 31, 2007

So it gets more confusing for me, here's what I did:

I went to your test page, and did a screen grab with my current monitor profile, and then took a second screengrab with the sRGB monitor profile.

I guess so much of this is preference, but here's what I found.

When I view the two screengrabs in Preview (while in my huey calibrated monitor profile) the Huey profile looks more washed out.

But in Safari, they look much closer (as in my two screengrabs look much closer):

Huey monitor profile:

sRGB monitor profile:

arodney · January 31, 2007

Baldy wrote:

But I put together this test page, which seems to show that an sRGB image with profile attached looks very different from one with no profile and the monitor set to sRGB:

http://www.dgrin.com/test

First off, a display set to sRGB and the behavior of the display using a profile are not the same!

If the image has no profile, it is assumed to be in the display profile color space (in Apple Apps), then in an ICC aware application will be previewed using that as the assumption of the color space for the numbers but it will also pass through the display profile. IOW, in ICC aware applications, the numbers in the document need a scale which is defined by its color space. This color space is defined either by the embedded profile or by an assumption if no profile exists. In the case of Safari, if an untagged document is seen, the assumption of the color space is the display profile. That color space assumption is then passed through the display profile to produce a preview.

In non ICC aware applications, the display profile isn't used nor even known about. Nor the color space of the numbers. Instead, the numbers are simply sent directly to the display; no color management at all.

An sRGB image with and without a profile will likely look different in Safari! The image is in sRGB, but untagged, Safari assumes it's your display profile but tagged in assumes its in sRGB. Setting the monitor to sRGB is totally useless! It doesn't set it to sRGB (otherwise, why would you need a colorimeter to calibrate it?).

Firefox isn't ICC aware. So its no wonder everything looks goofy.

Also point your web browser in question to this site:

http://www.color.org/version4html.html

Andrew Rodney
Author "Color Management for Photographers"
http://www.digitaldog.net/

DavidTO · January 31, 2007

That's interesting, Rodney. I catch so much grief for using Safari and I'm told constantly that it's color rendering stinks.

El Kiwi · January 31, 2007

DavidTO wrote:

That's interesting, Rodney. I catch so much grief for using Safari and I'm told constantly that it's color rendering stinks.

Actually, Safari is your *only* hope of seeing images more or less with the colours as intended on a Mac, and then only if they have an embedded profile.

After exchanging a couple of messages with Baldy about this I got on IRC and chatted with some of the Webkit developers (the rendering engine used in Safari). They confirmed that images with no profile are *not* colour managed, i.e. will appear as seen in Firefox.

There is still some subtle interaction that I don't understand with the monitor profile - in Baldy's test, I still don't understand why the test image changes with the mouseover even if the display is set to sRGB. If the pixels are just stuck straight on the screen (after the monitor profile is applied, of course), it shouldn't change. But it does, substantially.

All that said, Safari is the only option for the Mac, even broken as it is. It's a truly sad and embarrassing state of affairs for a machine that purports to be the designer's choice.

El Kiwi · January 31, 2007

arodney wrote:

In non ICC aware applications, the display profile isn't used nor even known about. Nor the color space of the numbers. Instead, the numbers are simply sent directly to the display; no color management at all.

Well, this (on the Mac, at least) is not quite true, the pixels are drawn with the monitor profile applied. You can test this by opening an image in, say, Firefox, and changing the monitor profile. The image will change, which shows that the profile is applied even to pixels sent straight to the display.

Baldy · February 1, 2007

arodney wrote:

An sRGB image with and without a profile will likely look different in Safari! The image is in sRGB, but untagged, Safari assumes it's your display profile but tagged in assumes its in sRGB. Setting the monitor to sRGB is totally useless! It doesn't set it to sRGB (otherwise, why would you need a colorimeter to calibrate it?).

Hi Andrew,

It's good to see you here. If you can clear the fog on this issue, you'll have done a great thing, as I think the number of people who understand this is close to zero.

Maybe the confusion comes down to a few simple terms. When you say, setting the monitor to sRGB, what does that mean? I assume it means Apple > System Preferences > Display > sRGB? Is that the same as selecting a monitor profile of sRGB?

If Safari selects the monitor profile as the image's source profile when no profile is attached as we think it does....why, if the monitor profile is also set to sRGB, do images with sRGB ICC profiles attached look different than images where Safari assumes sRGB as the source profile?

mercphoto · February 1, 2007

Its threads like this that make me embarrassed to admit I've been in the computer industry for 17 years now. Embarrassed for my industry, that is. Why things continue to be so difficult to do something such as display a color image, it just doesn't need to be this difficult to get correct.

colourbox · February 1, 2007

Baldy wrote:

If Safari selects the monitor profile as the image's source profile when no profile is attached as we think it does....why, if the monitor profile is also set to sRGB, do images with sRGB ICC profiles attached look different than images where Safari assumes sRGB as the source profile?

I know that's meant for Andrew, but I'm only replying to see if I am thinking about this correctly...

I thought Safari assumes the monitor profile is the source profile, which is what causes the problem.

The key is that setting monitor profile does not tell your monitor what to be, it is supposed to tell the system what the monitor is. If the monitor is not displaying perfect sRGB (almost certainly true), choosing sRGB as the monitor profile is wrong. The sRGB profile is installed into the system for images, not for displays.

My take on it (no guarantees this is right)...

sRGB image with sRGB profile embedded +
Monitor profile set to accurate monitor-specific profile =
Correct representation.
Why: Safari adjusts correctly based on an accurate image profile, and ColorSync adjusts correctly for monitor display based on an accurate monitor profile. Perfect at all points in the sequence.

sRGB image with sRGB profile embedded +
Monitor profile set to sRGB =
Incorrect representation.
Why: Safari adjusts correctly based on an accurate image profile, but ColorSync displays incorrectly because monitor profile does not represent actual native behavior of monitor (no monitor displays perfect sRGB natively). Sequence broken by incorrect monitor profile choice by user.

sRGB image with no profile embedded +
Monitor profile set to sRGB =
Incorrect representation.
Why: The image profile assumed by Safari (monitor) does not represent actual colorspace of image (sRGB), AND ColorSync displays incorrectly because monitor profile (sRGB) does not represent actual native behavior of monitor (almost certainly not sRGB). Sequence broken at all points, no-win situation.

El Kiwi · February 1, 2007

colourbox wrote:

sRGB image with no profile embedded +
Monitor profile set to sRGB =
Incorrect representation.
Why: The image profile assumed by Safari (monitor) does not represent actual colorspace of image (sRGB), AND ColorSync displays incorrectly because monitor profile (sRGB) does not represent actual native behavior of monitor (almost certainly not sRGB). Chain broken at all points, no-win situation.

Well, according to the Webkit developers, an image with no profile is simply drawn straight on the screen. It's still 'corrected' for the monitor profile by ColourSync, since I think this happens at a pretty low level. I think your reasoning is correct inasmuch as there are two colourspace conversions for an image with a profile: one using the profile to convert the raw pixel data (presumably using a linear profile) to the "correct" colours, and then the ColourSync step to convert these colours for the monitor. Data with no profile (I believe) skips the first step but not the second. What I don't understand is why the mouseover image, which in theory has the pixel data pre-corrected for the first step, changes.

Unless I'm totally wrong, of course. The frustrating thing is that there's very little about this on the net. The best thing I've found is Jeffrey Friedl's excellent article on the subject (that link is to page 7 of a long article). I need to read it again, and see if it sheds any more light.

El Kiwi · February 1, 2007

By the way, I'm unable to shamelessly resist plugging my recent hobby horse... please, please, please, SmugMug, don't strip profiles. You even get a mention in that article (along with Zenfolio) as guaranteeing that the colours will be wrong for 100% of Mac users. Without a profile there is absolutely no way to show colours correctly. At least by including the profile you can get the 0.01% of us who calibrate and use Safari, although I can understand that it's a difficult decision for you.

Baldy · February 1, 2007

mercphoto wrote:

Its threads like this that make me embarrassed to admit I've been in the computer industry for 17 years now. Embarrassed for my industry, that is.

I think the nest of confusion we're all wrestling with comes down to Apple... For example, I did another test page:

http://www.dgrin.com/test/safari.html

If you open that page with Safari and Firefox, you'll see that they treat the png images differently and it has nothing to do with ICC profiles.

El Kiwi · February 1, 2007

Wow, I don't understand that at all. On my monitor, with Safari, the upper left image looks different from the upper right one, whether it's moused-over (?) or not. I don't know how to explain the other differences in GIF/PNG, either. Unless I'm just going cross-eyed staring at these images too much

DavidTO · February 1, 2007

El Kiwi wrote:

Wow, I don't understand that at all. On my monitor, with Safari, the upper left image looks different from the upper right one, whether it's moused-over (?) or not.

I think it's a trick of the eye, having to do with the gradient of the sky. It looked the same to me, but after a bit I could see that they were the same, or I convinced myself, anyway.

But I can't wrap my head around it now.

Baldy · February 1, 2007

Hey David,

Can you confirm one question? When your monitor is set normally, with your Huey calibration, do the jpegs with profile attached look the best to you and as you expect? They look like they do in Photoshop, right?

It sounded before like you were chaning your monitor profile to sRGB and then things looked like drek. I just want to make sure that with your monitor set as it should be, sRGB images with profile attached look as they should in Safari.

Thanks,
Chris

Baldy · February 1, 2007

El Kiwi wrote:

I don't know how to explain the other differences in GIF/PNG, either.

Read it and weep. :cry

DavidTO · February 1, 2007

Baldy wrote:

Hey David,

Can you confirm one question? When your monitor is set normally, with your Huey calibration, do the jpegs with profile attached look the best to you and as you expect? They look like they do in Photoshop, right?

It sounded before like you were chaning your monitor profile to sRGB and then things looked like drek. I just want to make sure that with your monitor set as it should be, sRGB images with profile attached look as they should in Safari.

Thanks,
Chris

Chris,

On the left is my screengrab from this thread, of sRGB with profile, opened in PS. On the right is your sRGB with profile opened in PS. I went to your test page and dragged the image off to my PS icon. I see a slight difference.

Is that what you're asking?

colourbox · February 1, 2007

El Kiwi wrote:

Well, according to the Webkit developers, an image with no profile is simply drawn straight on the screen. It's still 'corrected' for the monitor profile by ColourSync, since I think this happens at a pretty low level.

That's right, forgot you said that.

Also realized I never worked through that Safari scenario. Let's see how that logic would work:

sRGB image with no profile embedded +
Monitor profile set to accurate monitor-specific profile =
Incorrect representation.
Why: If Webkit sends the RGB values straight through to ColorSync without assuming a profile, then ColorSync has no colorspace to refer to as a starting point for the conversion to the monitor profile. My guess is that when the unaltered RGB values come in, all ColorSync can do is plot them into the colorspace it's using, that of the monitor profile, which will almost never be what the image is.

Now, if this is the right logic, then maybe this is why people say Safari uses the monitor profile for an unprofiled image, even when it only passes the unaltered RGB values forward. Safari does not use the monitor colorspace, but because that is the only colorspace ColorSync has to work with, that's the final effect we observe - values apparently mapped to the monitor space. It's just that it wasn't Safari that did it.

That would mean that if Safari did assume sRGB for unprofiled images instead of doing nothing, at least it would have a much higher chance of being right.

Since Webkit is actually doing it, that would also mean that any app using Webkit to display HTML (i.e. Apple Mail) is affected.

Sorry if this was already obvious to anyone, but it sure was useful to think through.

Baldy · February 1, 2007

colourbox wrote:

Let's see how that logic would work...

That's sounding pretty logical.

So I think this is what we tell customers and support desk people if we start attaching profiles:

1. The profile helps Safari make your photos look like they do on PCs, but not like they do in other Mac browsers.

2. If you have a banner, background image, or other JPEG design elements you use for customization, you'll need to host them somewhere else besides SmugMug if you want their color to match other design elements on the page. Or just let Safari users worry about it because no other browser on PCs or Mac will show a color shift. Or use gif images.

3. Your photos will now closely match how they look in Photoshop, but not in Photoshop's Save For Web preview window, which shows how it will look in other Mac browsers.

4. Your photos will look like PNG images that originate on the PC, but not like PNGs that originate on the Mac.

5. Your photos will look like gif images displayed on a PC, but not like gif images displayed on a Mac, even ones displayed in Safari.

6. Your thumbnails will look like they do on Firefox on the Mac but larger images will look like they do in Firefox on the PC, because even Bill Atkinson won't attach profiles to his thumbnails because they become slower to load.

7. Some users will experience a performance penalty so Safari users can experience benefits 1-6, above.

I'm honestly not trying to be cynical, just trying to understand whose heads will explode if we do this and what we tell them. Hell hath no fury like a pro whose carefully-designed customization just got color shifts in Safari because we didn't think this through.

Maybe a better thing to do is leave the profile attached to images that have them when uploaded so people have a choice. Then write a bl0g post to explain the morass, above.

All of this to get images to look like they do on a PC...

El Kiwi · February 2, 2007

Baldy wrote:

Read it and weep. :cry

That article wrote:

Opera 7, the Mac version of Opera 6 and Safari 2.0 on Mac OS X 10.4 fix this problem and make the colors of PNGs that don’t carry color space information consistent with CSS colors.

What they mean is... equally wrong. Just when you thought it couldn't get any stupider.

El Kiwi · February 2, 2007

Baldy wrote:

I'm honestly not trying to be cynical, just trying to understand whose heads will explode if we do this and what we tell them.

Of course! This is a ridiculous mess, and I totally understand the concerns on SmugMug's part. Once again, shame on Apple - this is crazy. They seem like the one company that *ought* to care about doing this right...

By the way, how difficult would it be browser sniff for Safari and only serve images with profiles for Safari users?

{JT} · February 5, 2007

El Kiwi wrote:

By the way, how difficult would it be browser sniff for Safari and only serve images with profiles for Safari users?

For only 4% of our users? Let's think about this logically now

The extra space needed would just not justify it at this point.

Don't get me wrong, I love Safari - it is my primary web browser that I use, and I am REALLY looking forward to Safari 3. But I think they may be headed in the wrong direction with regards to embedded profiles: it appears that the latest webkit treats jpg's with embedded profiles as if they did not have one. I have a test page set up and waiting for Baldy to confirm. If this is the case, it would be very bad news I thik.

JT

DavidTO · February 5, 2007

{JT} wrote:

For only 4% of our users? Let's think about this logically now The extra space needed would just not justify it at this point.

Don't get me wrong, I love Safari - it is my primary web browser that I use, and I am REALLY looking forward to Safari 3. But I think they may be headed in the wrong direction with regards to embedded profiles: it appears that the latest webkit treats jpg's with embedded profiles as if they did not have one. I have a test page set up and waiting for Baldy to confirm. If this is the case, it would be very bad news I thik.

JT

You're saying that Safari 3 may not be ICC aware? That color on Safari is only going to get worse....perhaps?

{JT} · February 5, 2007

From what I have seen yes, but Baldy needs to confirm. I sent him my test page. Anyone else is free to see for themselves though, download webkit (what will become safari 3) here: http://www.webkit.org

DavidTO wrote:

You're saying that Safari 3 may not be ICC aware? That color on Safari is only going to get worse....perhaps?

Baldy · February 5, 2007

DavidTO wrote:

You're saying that Safari 3 may not be ICC aware? That color on Safari is only going to get worse....perhaps?

Y'know... I'm not sure Safari of any release is as color aware as we thought it was.

Scenario: calibrate your monitor using a Huey and choose the photo editing/web browsing default. It will set your monitor to a gamma of 2.2 instead of the 1.8 that's default on the Mac. The good news is now sRGB images will be rendered as sRGB images without a profile. In other words, you're on a PC.

Now with your gamma at 2.2, look at the test page that allows you to see the same image with a profile: www.dgrin.com/test

The one with profile goes darker. In other words, it looks like Safari is just jacking the gamma if a profile is present, assuming that your monitor is at a gamma of 1.8, which it not longer is.

Which would make someone do the inverse blog of Jeff Friedl's and say, "the only way for my photos to look good in Safari is if no profile is present!"

That's just a hypothesis at the moment which we're researching. More as we know it.

DavidTO · February 5, 2007

With or without the Huey, I would always set my gamma to 2.2.

Of note, I was helping someone with an Aperture issue (an app I don't even use), and found a help page at Apple that suggested setting the gamma at 2.2.

http://docs.info.apple.com/article.html?artnum=302827

How does Safari really render photos?

Comments