Mac browsers: can you believe your eyes?
Apple is The King of Simplicity, except when it comes to the simple job of displaying photos on the Internet.
It was actually Microsoft and HP who came up with a very simple idea: let’s use the same box of crayons for all photos on the Internet. And since we expect the Internet to be viewed on TV and TV to be viewed on the Internet, we’d better choose crayons that work for both.
Apple went its own way with painful results. Here’s 1 photo, 3 browsers, 4 different colors:
Every Windows browser — such as Internet Explorer & Firefox — adhere to The Simple Idea: just post your photo and don’t bother to bloat it with an ICC profile that a TV can’t understand anyway, and I’ll draw your photo with the crayons of sRGB.
On the Mac, the browsers Internet Explorer and Safari look for an ICC profile (few photos on the net have them) and use whatever box of crayons it specifies. In that case, what you see on your Mac is not what someone sees on Windows, their TV, or the excellent Firefox browser, which many Mac owners use.
It gets worse.
On the Mac, when no ICC profile is embedded in the photo, it uses the crayons of your monitor profile. That is, unless you use Internet Explorer on the Mac and you’ve taken the time to go into preferences and check the box that says use ColorSync. Then IE uses the crayons of sRGB.
On Windows, TV, cell phones, etc., your browser uses sRGB no matter what your monitor profile may be.
It gets worse.
Macs come with monitor profiles that are quite different than the ones on Windows machines. They are lighter, for one thing. Which is why photos look lighter on Macs than they do on Windows, TV, etc.
And that tricks many photographers into receiving darker-than-desired prints. That’s because the same box of crayons (sRGB) that works well on TV also works well for photographic prints using commercial printers, so the sRGB tide has swept all the major ones: Kodak, Shutterfly, Costco, Wolfe’s, Walgreen’s, EZ Prints, whcc, MPIX, Photobox, etc. They don’t know that you’re viewing photos on a Mac and that you think they’re lighter than they really are.
If you’re interested in seeing how your photos look to the rest of the world, you can go to the Apple menu > Preferences > Displays > Color and choose sRGB (it was called TV before the OS X Tiger release). You’ll also need to use the Firefox browser. No sacrifice there — it’s great.
December 6th, 2005 at 2:39 pm
Interesting comments. Monitor colors are different from brand to brand, model to model, box to box. They are susceptible to ambient conditions as well as age. Yes, I understand that your example shows different browsers display color differently, but that’s not what I’m talking about.
Monitor calibration is tricky at best and unreliable without professional equipment. Very few people even know how to calibrate unless it is necessary for their work, such as for print production. No matter what a Web designer thinks about color, he has no control over the color on the monitors of his viewers. The best he can hope for is that the color is relatively what he was looking for. By relative, I mean relative to whatever else is on the same page.
Print came first. Mac color was designed first for the most difficult and critical job of outputting predictable color in print, which makes sense from a monetary perspective (forgive the pun). If you don’t like the color on a Web site, it’s a simple matter to adjust it and the whole world of your viewers sees the change instantly. If you don’t like the color on a print job, it could cost hundreds of thousands of dollars and weeks to correct. Don’t expect Macs to dumb down their color capabilities anytime soon.
We have “Web safe” colors just to accommodate legacy PCs with limited color capabilities. But you’re correct: Web designers shouldn’t use profiles that aren’t useful and eat bandwidth. That’s a choice, however, and as a content provider for print and Web, I’d rather have the choice than not.
January 18th, 2006 at 6:37 am
This question may not be germain to this area. But why are some of my photos really blue. see:http://big.smugmug.com/gallery/1127671/1/52619972
Using either a Sony Ti or Cybershot the results were the same, under extreme sunlight I get a blue wash to the photographs.
July 26th, 2006 at 8:30 am
When you created the screenshots for your illustrations above, did you first convert each of them them to sRGB before publishing them here, or are we looking at the differences between monitor profiles rather than browser differences?
The reason I ask is my results are totally different from yours. On the same Mac monitor, I made captures of the same image using Firefox, Safari, and Explorer, and converted the profile to sRGB for display here:
http://olive.com/web/picture 5.png
Explorer was not set to use colorsync. But when turned on, it accurately showed the discrepancies in a web page that was caused by accidentally mixing sRGB files and RGB files on the same page:
http://olive.com/web/picture 7.png
In this image, the background is RGB while the image, which includes the shadow around it, is sRGB. Clearly, the Mac platform is ctitical in color, which is what I need. Now, compare this same image to my first page at
http://www.olive.com
Do you see the differences shown in the Picture 7.png sample? This undoubtedly needs more exploration, but those files in Flash are NOT tagged. This is why I tag my files, because it provides more accurate color, which I believe most photographers want. The difference is substantial.
Then I also created two identical files, one tagged with sRGB, and the other UNtagged sRGB, to see what “wasted bandwidth” looks like. This resulted in file sizes of 110 kb versus 107kb - less than 4kb difference. I do not consider this wasted bandwidth. First it’s not wasted, and second, 4kb is hardly a bandwidth issue. Accurate color, which I don’t think you are getting in your samples, is far more important, whether everyone looking at your site can actually tell the differnce. Those who can are likely prospective clients.
Tim Olive
http://www.olive.com
(New site being corrected for accurate color and navigation errors, etc… arrrgh!! Click on the –> arrow to see more images.)
October 17th, 2006 at 9:01 am
[...] Mac browsers: can you believe your eyes? [...]
November 18th, 2006 at 3:48 pm
I would rather macs web default color space was sRGB. I don’t mind if they turn on a more advanced version, which like was said about, is nice to have and would be silly to remove. It’s hard enough to make you website adhere to 5 different browsers and all their versions, let alone make your colors right.
About the file size thing.. Any good developer is always trying to save KB. Ever notice why people always have a good experience when viewing google as compared to yahoo when they want to search something? Yes that’s a much larger difference in filesize, but everything adds up and if you are inefficient in one aspect you are bringing down the total design. If 10 million can’t see your ICC profile and 1 million can, is it worth it to make all 11 million download that 4kb? I’m probably just thinking out of the world where 50kb used to be the website max
November 22nd, 2006 at 5:30 pm
This is good. But i am confused. Can you label the images?
There is another massive factor behind this and that is macs default gamma of 1.8. Of course no-one can know this and the screen shots will not demonstrate it.
So what system are you using to generate the shots?
Cheers
Ian
December 26th, 2006 at 12:10 pm
Can I assume that using Firefox on my Mac I with display set to sRGB will see the same colors as on some PC?
I ask because I use some transparant pngs and their background color blends with page background perfectly in Firefox but is off with Safari.
January 28th, 2007 at 7:11 am
So what to do if I use the Heuy to calibrate the Mac’s monitor and then use Firefox to browse?
January 28th, 2007 at 12:31 pm
That’s a very good question, Rutt. Check out this post for a dilemma maybe you can answer:
http://www.dgrin.com/showthread.php?p=472539
March 5th, 2007 at 1:39 pm
So I understand the different outputs for different monitors and different systems - okay. But does smugmug’s printer go off of the sRGB settings as well? read: do you also have to calibrate for prints?
June 2nd, 2007 at 9:21 pm
So I’ve been running into this issue a lot lately. Thanks to a few posts on SmugMug, I believed it to be a Safari problem for a while. However, now I’m quite sure it isn’t.
Take a look at this the site linked with my name (http://safariphoto.blogspot.com) in Safari. The top photo is perfect there. In no other browser/OS combination is it possible get the photo to look that good. And SmugMug messes it up.
Since Photoshop, iPhoto, and other photo programs all support the use of color profiles, I think we can assume that color profiles are a good thing for the digital photo community in general.
You argue that Microsoft and HP are wonderful because they say, “Forget color profiles! Forget photographers! Forget professional photo apps! We like TV!” And this is supposed to be a good thing?
I don’t know about you, but I really don’t want the capabilites of a TV to be the lowest common denominator for viewing photos on the web. That’s just not logical.
My photos look good in iPhoto. If I export from iPhoto at the size I want and then upload to ImageShack, which won’t remove the profile, they look good on the web in Safari. Smugmug’s upload process causes my photos to lose color and since I know there are other ways to make it work, I can safely say that Smugmug is part of the problem for me.
Your site is great at just about everything, except actually showing my pictures the way I see them in my editing application. That is your problem, and IE’s problem, and Firefox’s problem. it’s not Safari’s problem for supporting modern common color management features. Firefox is fixing it in 3.0. And since IE follows Firefox they’ll be next. Very soon it’s going to be only your problem.
My suggestion, and request, is that you include color profiles (the original profile, not a conversion to sRGB) with all image sizes except for the two thumbnail sizes. Although I personally would prefer it to be in those too. I understand that’s a bandwidth cost decision, but if another site offered this feature at your same price, I’d happily move all my photos over tomorrow.
June 11th, 2007 at 9:02 am
Please, somebody just tell me what do I need to do to make what I see on my mac what others see.
Is it just all bad news for Mac owners.
That sucks.
Is there some way around this by saving the photographs in an different format photoshop?
I’m still on the trial period. I need to know this before I shell out the membership fee.
June 19th, 2007 at 10:54 pm
That’s like saying that browser’s that follow web standards are doing it wrong and should be more like Internet Explorer because most people use IE. Web Standards like ICC Profiles are a GOOD thing. Internet Explorer screws everything up for Web designers.
June 20th, 2007 at 8:21 am
All browsers, even Safari, assume an image is in sRGB if there is no embedded profile, or no tag with the name of the desired color space described in a profile.
If an image is tagged sRGB, it doesn’t matter. In assuming sRGB both ColorSync and Windows ICM convert from the source color space (assumed to be sRGB) to the hardware profile of the monitor, regardless of what it might be. At least, that is the way it is supposed to work. If a browser doesn’t do this and displays raw pixels, that’s not a knock against color management. While an sRGB tag would seem to be superfluous, it’s good to have if that image later needs to be converted to another color space.
Since most people don’t calibrate their monitors, and the default on a new OS is a monitor profile whether good or bad, this works out when all image data is not only IN sRGB but when it is assumed that all image data is thus. When content producers use best practices and embed or tag images and work in a color-managed process, this breaks on browsers that ignore profiles if content is not converted to sRGB.
Blaming Colorsync for lazy display management is not really a valid gripe. Depending on device-dependent profiles like those for monitors and cameras is a sure way to end up with crap.
The way around this is to always convert images intended for the web from the source color space regardless of what it is (could even be CMYK) to sRGB, either tagged or not (tagged is better), in Photoshop or another app that understands this stuff. I don’t know how consumer apps like iPhoto manage color, if at all.
June 20th, 2007 at 12:01 pm
Seriously - a blog entry on colour management and visibility in blogs and you use bright white text on a black background. Great readability right there…
You should definitely design a web browser!
August 13th, 2007 at 4:10 pm
[...] This is a useful article on what’s going on beneath the bonnet: Mac Browsers: can you believe your eyes?. Answer: no, basically. Anyone else have this experience? And anyone know what to do about it? Suggestions welcome! [...]
January 21st, 2008 at 12:01 pm
“On the Mac, when no ICC profile is embedded in the photo, it uses the crayons of your monitor profile.”
Which is exactly the same as what happens under Windows. It is just that the default monitor profile on Windows (almost) always has a gamma of 2.2 (which happens to be the same gamma as the sRGB color space) and on a Mac the default gamma is 1.8. If you change the gamma on the Mac to 2.2, which you can do with built-in tools, there is no fundamental difference anymore between the two systems. Except that on the Mac much more programs do respect embedded profiles in images than on Windows (eg, iWork vs. Office).