Browser color discrepancy

rompingfury

Hi all,

Check out this picture http://www.rompingfury.com/images/Gilman%20Farm/Screenshot_1.jpg (on the left is safari, on the right is firefox) - it's the same image. WHY are the colors different?? The firefox one is closer to my photosop edit (but still a little off).

*Note to safari users, the colors are even MORE oversaturated, but you can see the point I am trying to make

It seems that Safari is oversaturating everything in the image. And actually, when I save the file (sRGB .jpg) and open it up in Preview, it's a little different than what it appears in Photoshop.

I have my monitor calibrated, it just seems the colors are different in each application. Can someone help me achieve correct color in each application? I thought .jpg's were agnostic when it came to being displayed within applications.

HELP me!! Haha, thanks in advance for any help

Adam

System

Read this.

Andy

rompingfury

Thanks for the link, that helped describe it.

Question though, lets say I assign an sRGB profile to an image; does that mean that safari will use the sRGB colorspace instead of the monitor profile? (and thus, the colors will be the same across both browsers?)


Thanks again for your responses

Andy

rompingfury wrote:

Thanks for the link, that helped describe it.

Question though, lets say I assign an sRGB profile to an image; does that mean that safari will use the sRGB colorspace instead of the monitor profile? (and thus, the colors will be the same across both browsers?)


Thanks again for your responses

No, because most images don't have an ICC profile on them, so Safari will revert to the monitor profile.

One reason we strip the profiles is because they average 2.5K in size. With an average of 15 thumbnails and 1 larger image on a page, they significantly slow down page loads for anyone without a fast connection.

The other reason is that no Windows browser is profile-aware, so they are just dead weight for them. Since we convert images to sRGB as we receive them, all Windows browsers (along with TVs, cell phones, handhelds, game consoles, digital photo frames, etc.) do the right thing and display the images as sRGB, which they are.

The problem browser is Safari on the Mac, which doesn't always assume sRGB even when the image is in sRGB, depending on how the monitor is set. Practically, however, CNN, eBay, Amazon, etc., don't want their customers to think their pages are slow, so they don't embed profiles with their photos. Apple has to deliver their machines so sRGB images without profiles look good with the default settings.

For us, the number of people with Safari whose monitors make sRGB images without profiles look bad is small compared to the number of people who notice every nuance of speed.

We believe the popularity of the Internet is its simplicity, made possible by adopting a simple color space that TVs, game consoles and handhelds can understand. TVs, game consoles and handhelds don't know for profiles, but you can watch TV on the Internet and the Internet on TV, on your Xbox, or on a handheld -- and it looks good on all of them without choking your cell phone with extra baggage it can't understand and that you have to pay to receive.

rompingfury

Thanks for taking the time to explain this to me, Andy, and I see your point.

It's strange to think that I never new any of this for such a long time .... I'm almost glad my pictures didn't look correct (I learned a lot from it).

So I assume as a best practice (if you can call it that), my site would benefit (speed wise) from discarding an image profile (I guess that's what "save to web" does - strip the profile along with optimization?)

But herein lies the rub, most of my family members and relatives (my biggest audience) have macs and use Safari. What would you suggest in this case?

The problem browser is Safari on the Mac, which doesn't always assume sRGB even when the image is in sRGB, depending on how the monitor is set.

... I thought them not having a calibrated monitor was bad enough!!

Andy

rompingfury wrote:

But herein lies the rub, most of my family members and relatives (my biggest audience) have macs and use Safari. What would you suggest in this case?

Get the to use Firefox
I really don't have a good answer, Sorry.

Oh and don't use Save For Web, that's unnecessary

El Kiwi

Andy, can you clarify when Safari would *not* show an image correctly in sRGB if it does actually have an sRGB profile attached?

I've been reading about this recently, I've come to the conclusion that (for me) the best solution is to have my images in sRGB, with an sRGB profile attached for Safari's sake. I host from my own site, and much as I would like it to be, I don't think traffic overload will be a problem any time soon I use a Mac & I calibrate my monitor to my Eye-One's default.

One thing I found out that no-one seems to mention is Photoshop's proofing ability:

View->Proof Setup->Windows RGB will show you how it will appear on a Windows machine in sRGB.

View->Proof Setup->Monitor RGB will show you just the raw RGB data stuck on the screen (i.e. someone using Firefox on a Mac).

View->Proof Setup->Macintosh RGB will (I think) show you the image as Safari will display it if it has no profile (raw RGB with the monitor profile), but I'm not sure about this one.

This is really, really useful, and had the nice side effect of finally giving me the penny-dropping moment about how all this really worked. Additionally, you can do it per window, so you can select Windows RGB, go View->Arrange->New, then select Macintosh RGB, and have the two (updateable) previews side by side.

The problem is that on the Mac, there is no right choice of browser to use. Firefox doesn't display images as sRGB but instead simply sticks the image right on the screen, which works great on Windows but means that on the Mac it really uses the system known as "roll the dice". It's kind of ironic that the Mac, of all platforms, has absolutely no way to show web images correctly unless they have an embedded profile. I'm just lucky that the Eye-one seems to calibrate to more or less sRGB. Fortunately there seems to be some hope.

A lot more very useful information can be found here and here.