Safari colour management

jpeg colours driving me crazy

[thoughton]

Hi folks,

This has been driving me crazy, can someone explain what's going on please.

I have these two jpegs, which are supposed to make up the top and bottom sections of an orange box. In most browsers this works fine, but in Mac Safari the colours don't match.

Top of box:
[i.imgur.com...]

Bottom of box:
[i.imgur.com...]

If I open both of these in photoshop they appear to match. But if I load them both in safari the bottom section is clearly paler than it should be. I save both of them in the same way (PS export to web, optimised, no color profile, convert to sRGB.

What am I missing? Thanks for any suggestions!

[travelin cat]

Well, the large rectangle is #d28a14 which is:

R: 210
G: 138
B: 20

and the small rectangle is #e58e1b which is:

R: 229
G: 142
B: 27

These are considerably different.

What I would do is choose the exact color you want, and paste it into the background of each rectangle and then add your white type and export each at the same time so that your settings do not change.

[swa66]

Maybe one of the original files is in rgb and the other in cmyk ?
Or you might have one set for a coating and not the other etc.

[lucy24]

Huh. From where I'm sitting, it's the one labeled "bottom" that looks darker :)

Actual color values seem to vary within each box. Looks as if both are intended to be around 229/142/26 but in the bigger box the red value can drop down to around 211 with similar but smaller drops in the other two colors. The smaller box-- the one with text-- has much less variation.

Do you get the same effect if you save as a png? If it's all the same color, you'll probably get more accurate values and a smaller filesize. And if the text is part of your image, then you'd want to go with png in any case.

[thoughton]

Hmm, I guess I haven't made myself very clear :)

These two images were one box I made in PS, then I cut it in two. They should match up perfectly. (NB the box has a slight gradient as noted by lucy24).

Here is an example page. This page is directly calling the two images from my earlier post.

[thoughton.co.uk...]

On my Mac this looks fine in Firefox, Chrome and Opera, but in Safari the two parts of the box don't match. Can anyone explain why? Thanks!

[swa66]

Works just fine on my mac (10.8.3) and safari (6.0.4). Are you sure safari is not caching an old copy of one of them or somethign like that ?

[LunaC]

At first I thought it looked the same in Safari, then a second later it didn't. Turned out it was the viewing angle (from above at first, sitting on the floor with the macbook on floor in front of me, then later face directly in front of screen).

It's not an answer to why they're different (both are saved in RGB, no profile), but it might be why some see the colour shift and others don't.

In Firefox and Opera, no matter what viewing angle, they matched up so it's a bit of a mystery.

Try what Lucy24 mentioned, save as png and see if that works better. Another way to go is to use CSS for that box, it can give the rounded corners and slight gradient and might have fewer issues, will load faster to.

Hmm, after staring at that for a bit I now have a huge craving for pumpkin pie. Mmm, pie. ;)

[lucy24]

Oh, wait. Does the actual image have a gradient? Then saving as png will probably send the filesize through the roof.

Doing it in CSS is definitely safer. How many versions of MSIE will you lose if you take this approach?

Remember also that your users will be seeing the page in their own everyday browser. So they'll see what they are accustomed to seeing.

[thoughton]

@swa Can you confirm again that it works on Safari on your Mac please? I really hope not, or this has suddenly become a whole lot more complicated :|

@LunaC Whew, for once I'm glad someone else's Safari is having the same issues as mine.

@lucy24 Thanks for the suggestions. Re-doing it in CSS will be a last resort. The jpeg is currently a background image as there is a PNG icon overlaid on top which is animated via jquery. Losing older versions of IE isn't really an option either as this company has many clients in Africa and Asia where Windows XP and IE6 are still fairly common.

[swa66]

Test 1:

It's perfectly the same in chrome and safari, no difference to be seen to even find the seam of the two images. I've looked at in from multiple angles: all is ok.

I'm using a retina mac 15" mid 2012.
Screen never was recalibrated and is using the "Color LCD" display profile.

OK

Test 2:
Same result using an external Apple thunderbolt monitor on the machine from test 1.
Screen als was never calibrated and is using the "Thunderbolt Display" profile.

All software on my machine is fully up to date.

OK

Test 3:
a mac mini server I've hooked up to a home theater setup (onkyo receiver, pioneer plasma, all 1080p, HDMI)

Uhoh: the upper image looks as if it's gradient was removed and it looks like the orange all was converted to some websafe color (I did walk up to the tv, so you can see pixels: they all look the same flat orange.

The display profile being used is "HD 709-A"
It's an Onkyo TX-SR875 it's connected to, which is set to passthrough 1080p (so no upscaling, deinterlatcing or anything like that is done on this signal)

All software on my mac mini is fully up to date.

NOT OK

Test 4:

Same macmini as above, but approaching it not through the screen, but via screen sharing from the retina mac used in test 1 and test 2

NOT OK

Test 5:

Same home theater setup from test 3, but now connected to the hdmi port of the retina mac from test 1 and 2:

OK

I did not capture the color profile the mac chose, it's too awkward to get to the HDMI cable without too much work to rewire it all.


Fixing this

So, what's different about safari and those images.

Well let's look at them: both images are in RGB, and neither says what color profile they are made for.
Hmm, safari is afaik the only browser to support ICC4 color profiles in images.
Maybe not having a color profile in them makes it "guess" and well guess wrong under some conditions.

Test for ICC4 color profiles: [color.org...]

FWIW: the test fails in chrome for ICC4 , succeeds for ICC2 on all combos I tried it on, and succeeds on ICC4 and ICC2 for all combos in safari.

What I'd do is make sure the images have a color profile in the jpeg.

I opened your images in photoshop (CS6), added the Adobe RGB (1998) colorspace as suggested by photoshop and saved it.
The images are quite a bit bigger as I didn't bother exporting them for the web etc - photoshop likes big images unless you tell it to make them small.

I then uploaded them here:
[swa66.com...]
[I hope that link is ok - if not it's on www.<my screen name>.com/WebmasterWorld/safari-colour-profile-test.html ]

All my tests now yield the same result regardless of browser, screen or machine.

The color profile might make it a bit more bright orange - you might need to compensate for that.

Conclusion

Do not save jpeg images without a color profile in them.

On a mac you can see what color profile an image has when you inspect the image (command-I in finder).

[thoughton]

Wow swa66 that is some great detective work. I can't thank you enough! :)

I removed colour profiles because I wanted Safari to show the same colours as Firefox. I guess that was a dumb move haha. Oddly enough this is the way I have always handled Safari, it's only been since upgrading to Mountain Lion that Safari started doing this mismatched colour thing.

I am going to go and test jpegs with profiles now, I will report back.