Color management is constantly an issue for photographers, digital artists, and videographers. We spend money on great monitors, only to know that we have to calibrate them and our input devices and our output devices as well. Some of us even opt for a wide gamut monitor designed specifically for those who work in the digital arts, allowing us to adjust brightness, color, and contrast like we would an image. This introduces one more, slightly more insidious potential problem: color management within our web browsers.
For many of us using computers to process our photography or videos, a larger color space such as AdobeRGB or ProPhoto RGB are common spaces to work in as we like to keep our working file at the highest quality possible, even when the output is for the smaller space of sRGB. We use our calibrated wide gamut monitors like the Dell UltraSharp and Eizo ColorEdge series to ensure that what we are seeing is what will leave our studio. We calibrate every step of the way, except our Internet browsers.
You see, web browser developers are working for the masses who, for the most part, aren't aware of color management or its implications — and frankly, have very little reason to be. And for most users, this isn't an issue. Most commercial monitors operate in sRGB color space, and so does the web by default. This makes them a great match.
Most browsers will read the ICC profile embedded in an image, and then make the necessary translations to your monitor's color space. The trouble comes along when we remove the ICC profile from a JPEG or PNG file, which is often done to reduce file size. With the absence of an ICC profile to draw from, most browsers will display the image directly in your monitor's color space, without adapting the data it is drawing from. The result of this can be skewed saturation, contrast, and colors.
A lot of my clients are visiting from parts of South East Asia. This means some of their Internet is not blazingly fast, so I recently used Kraken Image Optimizer to reduce the size of all the JPEGs on my site. Being able to load the pages quickly seemed like a positive step, so I went ahead and ran the tool over all of the images on my site. I got between 10 and 50 percent reductions in size, and my pages loaded much quicker.
Then, I noticed something. On my Dell U2410 monitor (which is set to AdobeRGB mode and calibrated using a Spyder 4), all the reds and magentas in my images had become a lot more saturated, and in some cases the contrast had increased significantly. At first, I took a break from the screen, thinking my eyes had become tired. Then I thought it might have been the tool, so I ran a manual test. No color shift. I tried it on my phone. No color shift. I tried my laptop. No color shift. My wife's computer? No color shift. Then I opened the page in other browsers. Same color shift. Finally I moved the browser window over to my second, cheap-as-they-come, monitor and saw no color shift.
Does it Really Matter?
My worry was that my clients would see hyper-saturated versions of my images, and that it would affect my business negatively. Then I got to thinking, how many wide gamut monitors are actually out there? Who uses them? Most monitors on the market only cover a portion of sRGB, with the best covering 99–100 percent of the colors available in that space. Mobile device screens, laptop screens, and the vast majority of consumer-grade screens only cover this space. Hopefully, it should never become an issue for any of my clients.
Possible Solutions to the Problem
The first solution is more of a "throw a blanket over it" approach as it is a localized solution that applies only to the browser you enable it in. Up until recently, the two heavyweight browsers, Google Chrome and Mozilla Firefox both had options for forcing them to convert images to monitor color before displaying them. Now, it's only Firefox, and even then this type of color management isn't enabled by default (a guide to enabling it, and some great articles about color management in general can be found here). So, for those using a wide gamut monitor and accurate color from all images displayed on the web, there is now only one browser.
The second solution is to retain the ICC profile. After speaking with the people at Kraken about the issue, they have assured me it is all but fixed. The next version of their WordPress plugin will have options for stripping or retaining certain parts of the files it works with, including ICC profiles and other metadata. This will mean that we are able to compress our images even further, while still retaining the profile for correct display.
This is a complicated topic with a lot of variables, and I am offering my personal experience and some of the information I have discovered along the way. This may not be the answer for your exact situation, but hopefully will provide a place to start if you are having difficulty with images displaying incorrectly in your browser. It would be great if we could continue this topic in the comments with some of your experiences and solutions as well.