This is your Mac on drugs
Why the web can look wonky on a Mac by Chris MacAskill, President of SmugMug
The PC is a soldier. When Direktor Gates demands color #e3823c, PC responds “Sir, Yes Sir!!” Color #e3823c looks identical on the PC whether it’s in a JPEG, GIF, PNG, CSS, or HTML.
The only colors Direktor Gates tolerates are found in the box of crayons called sRGB. Internet standards like HTML, CSS and Flash march in step with the same colors.
The Mac Thinks Different. Color #e3823c is different on Macs. Except sometimes*.
If you have a Mac with Safari, check out this wonkiness (if you don’t, here’s a screen shot). Now check the page with Firefox. It looks completely different than it does in Safari, and different from Firefox and Internet Explorer on the PC.
Why this is a big deal:
Most people don’t have light-controlled rooms with color-calibrated monitors. I don’t, and you probably don’t, either. Almost everyone will see your photos slightly differently than the next person. We’re not talking about perfect color precision here, because on the net, that’s an impossibility.
What *is* important, though, is for your photo to match the rest of the page. If you’ve selected a background on a PC to match the blue in your subject’s eyes, you don’t want background and eyes to be mismatched on a Mac. Or your photo to look different in some Mac web browsers than it does in Photoshop.
Yet this is exactly what’s happening. And the fix is simple.
Demystifying the wonk:
#1: Macs ship with a display gamma of 1.8. The word gamma was probably chosen to make it sound like nuclear physics, but it’s fairly simple. It’s a setting, like brightness or contrast, that adjusts your image. Halfway between black & white (midtones) the changes are greatest; they change less as the colors get darker or lighter.
If you’re a mime with white makeup and black clothes, photos of you on the Internet will look similar on Macs and PCs. But if you’re gorgeously mid-toned, you’ll lose some of your tan on a Mac. Except sometimes*.
Internet standards, including HTML, CSS, and Flash, are based on a gamma of 2.2, making colors partway between black & white appear darker and higher contrast than 1.8 gamma makes them appear. Examples.
#2: Some Mac browsers (IE, Safari and Omniweb) go part way in preserving the artist’s intent: if you know what an ICC profile is, you can attach it to your photo and the Mac will render your photo with a gamma of 2.2. Then it will look like it does in Photoshop on your Mac, or on the Internet on PCs.
There are three problems:
- Safari still won’t know to adjust the rest of the page, such as borders drawn in CSS or background colors specified in HTML, leaving you with color mismatches like you saw on the wonkiness page.
- Other Mac browsers like Camino, Opera and Firefox don’t know for ICC profiles. The good news is they don’t get color mismatches. The bad news is nothing on the page matches your intent. (Except sometimes*.)
- Very few photos on the web have ICC profiles because they slow down browsing, especially on thumbnail-sized images. In this case, Safari doesn’t render them with a gamma of 2.2 unless your monitor is set to 2.2.
If your Mac’s gamma is already at 2.2, you’re golden. Unfortunately, this is rare. Macs ship with a default gamma of 1.8, even though Apple recommends you and your friends change your gamma to 2.2. Here’s what they say:
If you calibrate your monitor with a Huey, for example, you’ll be asked what you do with your Mac. If you answer photo editing and web surfing, it will quietly set your gamma to 2.2 to make web pages match the artists intent. The good news: theoretically, now web pages look the same in Firefox & Safari — and on the PC. Photos look the same as they do in Photoshop. And in print. Color mismatches disappear.
In practice, devices like the Huey are not 100% accurate and the calibration they provide is influenced by the room’s lighting. So if you’re using Safari, you’ll probably notice that color mismatches will be reduced but not gone on the wonkiness page.
If you want to see almost no mismatches on the wonkiness page, go to Apple > System Preferences > Displays > Color > and pick sRGB IEC61966-2.1. Then quit Safari and restart it. Now everything should be as it is on a PC except the PNG may not match perfectly. It will match in Firefox.
What would Photoshop do?
If your monitor is set to the factory default, Photoshop is between a rock and hard place. It knows to display your photo with a gamma of 2.2 because it’s smart. But how should it preview your photo when you choose Save for Web? It has no idea. Will you be viewing your photo in Firefox or Safari? Will you be seeing it with an ICC profile or without? On a Mac or PC? It can’t know.
So by default it plays the odds and takes its chances: you’ll probably end up viewing it on a Mac and since few photos on the web have ICC profiles, it shoots the crap and renders the photo the way your monitor is set, with a gamma of 1.8. Tens of thousands of photographers are tormented by the shift in color they see between an open photo in Photoshop and the save for web preview they see of the same photo right beside it, and they wonder why Photoshop is so wonky.
If you set your monitor to sRGB IEC61966-2.1, that color shift goes away.
What should Steve do?
It seems to me…that artists and photographers want their admirers to see the web the way they intended, which they would if Mac browsers used a gamma of 2.2 for everything on the page.
I worked for Steve’s company in the NeXT days so I can understand the dilemma. High-end publishers standardized on 1.8 gamma before consumers seized the web. But publishers understand words like gamma, ICC profiles, and calibration. Try saying gamma to a consumer. They just want the web to look right.
And let’s not forget that Apple already recommends changing the gamma to 2.2 after you buy your Mac.
Why not ship OS X with gamma at 2.2 and say farewell, wonkiness?
UPDATE: The story gets worse. 😦 Turns out the right sRGB profile isn’t included by default on the Mac, so you can’t fix things yourself without some outside help. Photoshop installs it for you automatically, as do some other apps. You can download the right profile here and stick it in /Library/ColorSync/Profiles yourself to fix things up.