Problem is, we changed and so did browsers in the last two years.

By customer demand, we now attach ICC profiles to the photos we display if we sense that you’re using a browser like Safari that can use them.  We do it, that is, for images that are larger than thumbnails, because it doubles the size of thumbnails and for some people that would make pages load slower.

For some people who use color-aware browsers like Safari, it means you could see a color shift between thumbs and larger display images.  We asked a great number of customers about this and the answer among almost everyone was, “better to see the big ones the way they should be seen”, and “this is a great compromise between speed and color fidelity.”

However, it’s understandably confusing to customers who have not been exposed to ICC profiles.  Look at the difference between how Firefox displays this photo (on the left) and Safari (right):

Firefox (version 2) is displaying the photo the way IE would.  Safari is displaying it the way Photoshop would.

It gets worse, unfortunately.  Our customers also love the Flash slideshow, but few know that even Safari ignores ICC profiles when using Flash.  Our full-screen Flash slideshow is immensely popular because of its smooth transitions, but even Safari will display photos like IE does when Flash is used.

The question that just kills people is why do sRGB files sometimes look different depending on what program displays them?  People most often notice it when they open an sRGB file in Photoshop and then select Photoshop’s Save for Web feature.  Save for Web gives a preview of how it will look on the Internet, and by default shows how it would look if the browser doesn’t respect ICC profiles.  Many people notice a color shift when using Save for Web.

The answer to that question is beyond the scope of this post but usually has to do with monitor calibration.

One difficult thing we’ve observed with monitor calibration is that most people put great faith in it.  At SmugMug, we all have very high quality monitors in a dual configuration, both on Macs and some PCs.  Most of us calibrate with various manufacturer’s calibration devices. usually fairly high end.  But none of us have been able to get our monitors to match.  On every dual monitor machine at SmugMug, when you view photos in Photoshop and move them from one monitor to another, you see the colors shift.  Macs that are side by side, calibrated with the same hardware, display images differently.

We have a saying when it comes to getting great prints:  ”In the Photoshop eyedropper tool we trust.”  The words of death we hear so often are, “it looked different on my calibrated monitor.”

One way to see that SmugMug is really not changing your file (other than to add an ICC profile) is to use the File > Open menu with your browser software.  Open a photo from a file on your hard disk, and also open it with Photoshop.  Depending on your system, you may see a color shift.  But if you compare the file you opened on your hard disk with your browser to the same file you uploaded to SmugMug, viewed with the same browser, they should look the same.

If they don’t, there could be two reasons:

1.  Is the photo on your hard disk missing the ICC profile and you are viewing it with a browser like Safari?  We add the ICC profile for Safari users.

2.  Is the photo in some other color space than sRGB?  We only display them in sRGB at SmugMug, because it’s the only color space browsers like IE can display correctly.

Clear as mud?!

Unfortunately, most flashes emit UV unless you place a filter over their heads. Using the Canon EX550 flash for fill made this dress blue where the flash hit it hardest:

Some photographers have a photoshop action to look for the brightest part of the photo and turn it white. The assumption is the brightest part of the photo must be the dress.

But that wouldn’t help the blue grass near the dress, which is lit by the blue light coming off of it:

I have seen photographers place plastic warming filters over their flash heads that also cut the UV. Warming filters can be selected to match the color of indoor light so you can use fill flash in a chapel with the fill being the same color as the light inside.

Here’s our blue dress corrected, but notice it didn’t remove the blue from the grass around the dress:

Anyone have favorite filters for their flash heads?

Here’s an example: the right and left images, below, are the exact same copy of the same photo — one displayed in Photoshop and one in a browser (Firefox):

One possibility is your photo is in a color space other than sRGB, the only one the Internet can display correctly.

The thing is Photoshop knows about color spaces and your browser doesn’t (except for the strange case of two Mac browsers). Your browser bets that everything it sees is in the sRGB color space. And when it loses that bet? Your photo looks awful.

The other reason defies the experts and tortures endless photographers who can’t find the answer: Photoshop (and some other desktop programs) use your monitor profile and your web browser doesn’t. You can think of a monitor profile as a scouting report: it tells Photoshop your monitor is weak on blues, so amp those up, but the greens are too vibrant, so subdue them.

Photoshop bets your monitor profile is the key to displaying your colors accurately. And when it loses that bet? Your photo looks awful.

To make Photoshop and your browser look almost identical, choose sRGB as your monitor profile. Then continue with life. One less thing.

(On the Mac, they called it TV before the Tiger release of OS X because they couldn’t choke out the term sRGB, a Microsoft/HP-inspired standard.)

Here’s how you do it on Windows:

Go to Control Panel > Display > Settings > Advanced > Color Management. You should see a dialog like this one:

Enjoy the newfound harmony between Photoshop and your browser.

But…but… Why did my monitor profile suck? Alas, I don’t know. You’ll have to ask the people who wrote it.

Disagree? Have something to add? Post it!