Problem: contrast varies between browsers

My images look great in safari, washed-out otherwise

[Bruce Siegel]

I've been creating a website, and largely using Safari (on my Mac) to proof it. But now I'm noticing that the images that look so nice and punchy on Safari, look faded on Opera and Firefox.

Looks like I'll have to up the contrast on most of my images. But I'm not sure which browser(s) to use as a trustworthy model for what the majority of folks will actually see.

Any thoughts, anyone?

Thanks,
Bruce

[Yoshimi]

Well the majority internet users are using IE, so I would optimise for that in the first instance, then when the site is up and running, find out which browser most of your users are using and re-optimise for them.

[Bruce Siegel]

Thanks, Yoshimi. Sounds like good advice. So is this a known issue—that Safari renders with greater contrast than other browsers?

I should probably explain that I'm not running Windows on my Mac, so I'm relying on sites like Browsershots.org to check for compatibility.

[edited by: Bruce_Siegel at 10:15 am (utc) on Jan. 15, 2009]

[Yoshimi]

I have no idea if it is a known issue, it's not one I have come across before, but if you are having a display difference between browsers that you can't correct, it's generally best to go for the masses then optimise for your customers once you know who they are.

[topr8]

the end users screen resolution and monitor colour calibration and monitor quality can also have a huge difference in the way images look, i have a 3 monitor set up here -
1 x high end viewsonic
1 x new acer widescreen
1 x old benq lcd
and the same image looks different in each one using the same browser.

[phranque]

i just experienced the opposite.
i am usually on FF and rarely IE.
recently i started testing in safari and it definitely looks different from the others.
i didn't realize it was contrast, but it's more than that.
and html/css & layout/style works better out of the box.

[Bruce Siegel]

>and html/css & layout/style works better out of the box [on Safari].

I've been aware of this for a while, because I've been testing my coding for browser compatibility using Browsershots.org. But I wasn't thinking about testing for variability in contrast.

This is tricky for me. I've only got the one Mac and one monitor—my Apple Cinema Display. I guess I'll need to spend some time on other people's equipment to see how my site looks there.

[Bruce Siegel]

Thanks to those of you who helped me here. I just had an insight into the problem. It seems that when an image's contrast is only marginal—in other words, not quite contrasty enough—I can see a big difference between browsers.

But when the image definitely has sufficient contrast, it was difficult or impossible to see any difference between Safari and the others. So I'm just upping the contrast on all my images.

[jessejump]

Images should all be sRGB.

[travelin cat]

Bruce,

As a Mac user and long time evangelist, this is difficult for me to say, but here goes: you need to get a pc.

When you are developing on a Mac, you are proofing for an environment which presently has at most 10% of the market. You need to see what the other 90% are seeing.

We have an HP PC running Vista with IE, Opera, Safari and FireFox on it. When we create anything, we view it in all of those browsers on the PC, THEN we look at it on a Mac in Safari, Opera and FF.

If you can't or don't want to buy a PC,you should find someone that has one and tweak your site for it. Then figure out how to make it look good on a Mac.

This point is of course moot if you don't care about PC's because you develop Mac only products.

[Bruce Siegel]

Thanks, Travelin Cat. What you say makes sense. But let me ask you this. Could I get the same results by running the Windows operating system on my Mac (via Parallels or the like)? Or does that not quite produce the same results?

[travelin cat]

Well, you will still be seeing the results on a Mac monitor. I'm not sure how Parallels or other emulators handle the issue of different color temperatures on the the two systems.

[Bruce Siegel]

OK—I just had a major insight. Yesterday I rented some time on a PC at Kinko's to see how my site looks outside the Mac environment. Colors looked deeper and darker.

After getting your message, Travelin Cat, I did some googling and came to understand that a big difference between Macs and PC's is the gamma setting. So I changed mine at home to 2.2 and it looks a lot more like what I was seeing at Kinko's. I'll use that setting from now on.

If anyone has suggestions on how I can fine tune this even further—use my system (Mac Pro, Apple 23" Cinema Display) to more closely simulate the PC environment—I'd appreciate it!

[tangor]

The gamma is the biggest difference between the two systems. You can dumb down your Mac's monitor to the pc default, or as has been suggested, get a pc, local net the two together. Do your work on the mac and test it locally on the pc before uploading.

Also google "calibrate monitor images" and you'll find a bunch of excellent sites that can walk you through the process.

However, having done that, don't expect Joe and Sue Average User to have done the same for their computers!

[Bruce Siegel]

Thanks, Tangor. I can't afford to buy a PC right now, but I have upped the gamma on my Mac to 2.2.