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.
The green triangle is colors covered by sRGB, the purple is AdobeRGB, and the red is my Dell UltraSharp U2410. As you can see, if the sRGB image were simply stretched into the monitor color space, the colors would be somewhat skewed.
My Story
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.
The top is the original image the way it should be displayed, and the bottom is the same image displayed in AdobeRGB without conversion.
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.
In Conclusion
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.
I don't understand the issue. Are you exporting files for display on the web with a wide color profile (AdobeRGB), or are you exporting them with a more limited (Srgb) but more commonly supported profile? Is your monitor calibrated with a custom viewing profile, or is it set to display Adobe RGB without any calibration?
I have soft proofed all my profiles is Srgb for years and have never had any color shifts except where a monitor is not calibrated (or displayed in the older versions of IE) even when compressed and stripped of metadata.
The issue comes into play when your monitor space is a wider/narrower gamut than the file it is trying to display AND you strip the ICC Profile. There is a much more detailed description of the cause and solution if you follow this link. http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html
Your monitor space is completely independent from the space used in your browser. For example, my monitor is set (in hardware) to the AdobeRGB gamut. It is then calibrated to make sure that what my video card is sending it is displaying correctly (using a Spyder 4).
This is independent of your browser. The browser is interpreting a FILE, not your monitor profile, or its colour space. If that file does not direct the browser to use a specific method of reading those colours, the browser will simply display the image without converting the colours to the correct space for display on your monitor.
In the case of web images displayed on a wide gamut monitor, this means that the colours will effectively get stretched to fit the colour space.
An easy way to see the effect that this potentially has is to open an sRGB image in Photoshop and use Edit->Assign Profile. This will NOT convert the colours, but merely stretch or compact them into the space you choose. When the dialog pops up, choose the Profile radio button and select AdobeRGB from the dropdown. You will see the colours in your image shift in a more saturated and more contrasty direction. This is the issue at play.
Whether your monitor is calibrated or not is irrelenvent to this issue. This is about the monitor's ability to display within a certain gamut and the browser's ability to convert to that gamut. Most people will never see this issue, as stated above.
Pardon me for saying this: but you published an article where YOU only understand half of the problem or the simple solution for it?! Also you didn't grasp fully what that link was trying to show you.
Simple solution: ALWAYS export your images for the web in sRGB. You may at any time strip the color profile from the file to reduce it's size (Facebook does this for you /s). All images WITHOUT a color profile will "auto-magically" be displayed using sRGB everywhere on almost every viewing device ever created in the last 20+ years.
Read that link again.
Doc, please re-read the section about wide gamut monitors. This is what we're talking about here.
Without an ICC profile tag, browsers will simply pass the data straight to the monitor colour space without conversion. Of course, sRGB monitors will display the images just fine, and of course, all images tagged with a profile will display fine. However, untagged sRGB files will incorrectly display on wide gamut monitors, and untagged aRGB or ProPhoto RGB files will display incorrectly on standard gamut monitors when using partial colour management.
Of course, the best solution is to keep the tag in your images to ensure they are displayed correctly in all cases. These are the results of an experiment in reducing file size, not a complete solution for colour management.
Yes, I just re-read you post. You touched on all of the bases in the article why wide-gamut is neither necessary for web viewing for 99% of the viewing public; suggestion of leaving your images tagged; and the browser color management "problem" across all platforms.
So pardon me for stating that you understand only half of the problem. I now realize that you understand the problem, but I'm not exactly sure why you're making it one?
Petition the browser providers maybe to go back to including color management?
I just ran across something, possibly interesting: do you have a switch or somewhere in the monitor menu to flip between AdobeRGB and sRGB? I was on the dell site but I can't tell from the info they provide whether that is the case.
Most Eizos I've worked with have a button on the front that you can use to toggle between the color spaces.Maybe this would be just a quick-fix to your browser problem?
Indeed, I can switch between AdobeRGB and sRGB in the monitor. This, too, solves the problem. But it's not worth it just for web browsing. I use Firefox, so it makes sense for me to simply use the colour managed mode.
As I said above, I wasn't intentionally setting out to make this a problem. It cropped up while I was working on making my site as optimised as possible for the low-bandwidth users that make up a good portion of my client base. For them, cutting down a few KB on each image makes a great difference to loading time, which was my goal from the outset.
This isn't intended as a petition to browser makers. I believe that's been unsuccesfully tried before. Honestly, I had no idea some would be so passionate about this topic. I was merely sharing some findings in the hope it would be helpful to someone. :)
Again my apologies for misreading your article and what you were trying to say and bring to light with. Pun intended.
Also: even though I don't have a W-G monitor myself, a number of my clients do and yes, we all use Firefox. Not only for it's color-managed mode but the considerable number of very useful plug-ins.
I'm still not getting it.
If you soft proof your files in SRGB (make sure they look right with that profile), save them with the SRGB profile, display them in a browser that uses the SRGB profile (all of them), and have a calibrated monitor (Spyder works well), you should not have any surprises (such as magenta saturation) when you see them.
The only way your problem should occur is if there is a break in that chain of color management. The monitor can have a wider gamut range, because the photo will not.. it will only display in the SRGB gamut range.
In most cases that holds true. The break in that chain is what the article is about. Only when that chain is broken to you see the issue, and only on monitors with a different gamut from the original file, and only if the profile is stripped from the file.
It's quite difficult to understand until you actually see it happen. Another good way to see it is to save two copies of a photo. Pick one with lots of red or magenta as they show a big change. Make sure the image is in a different colour space from your monitor (ie. use AdobeRGB or ProPhotoRGB if you're on an sRGB monitor, or the other way around). Save two copies of that file from your image editing software, one with the profile and one without. Drag those into your browser. You should see quite a big difference between them.
The two below are a good example. Try downloading them and take a look. You may even see it in your browser here. They are both the same image. The first one has the embedded profile, the second one does not.
Okay. I've re-read the article. Now I think I get it. Your optimization software was actually stripping the embedded profile. Which would be the same as not saving it with the profile embedded, but the problem only makes itself obvious on wide gamut monitors.
Exactly! It took me a while to wrap my head around it, as well. There's so many links in this chain!
There is no issue, the guy has no idea about color management, I can't believe Fstoppers does publish this stuff...
Actually the only issue is whether you are working in a calibrated space and your awareness of the use the exported files.
As noted the monitors in the wild are all sorts of crap and will remain so forever. We can only work to an industry standard and export appropriately.
Anyway, one's cat pictures will always be cute regardless of color space, resolution, lens, camera, DR, bokeh,phase of the moon or the color of your underpants. ;)
this feels like one of the worser articles on fstoppers.... why would you even strip away the ICC profile to save some bytes on images which are using 500KB updwards? this article feels very useless and confusing to me... just stick with files with a correct ICC profile and everything will be fine...
now I read the article a second time. Maybe the article should have been about making sure your files do contain proper ICC profiles. Or maybe one bold sentence saying as long as your files properly have a valid ICC profile included everything is fine.
Edgar, you're absolutely right. And retaining the ICC profile is listed above as being a good solution. It is certainly the best solution at this time. This is a problem very few of us will or should ever run into. However, a 500kb file is too large to load on much of the internet outside of the developed world. File size becomes are very real issue, and as stated above, I was in the process of making my site load just a little faster for the people who visit it from slower connections when I discovered that this could be an issue. Many of the visits I get are from slow mobile connections in smaller cities, which means I need to serve them as best I can. By shaving my file sizes down to 30-50kb, I am helping them get the information they need quicker. The article is geared at pointing out a potential problem for some, and not for suggesting everyone use smaller files.
100% useless article.
What's the matter of this post? 99.99% of the world have and will have sRGB capables (as best) monitors, the problem here is you not exporting your files as sRGB (with embedded profile) not the browsers...
Anyway the browsers should do a better job, but tons of people have and will still have Windows XP, IE6 and monsters like that so if we look into our Eizo monitors... the real problem are ourselves...
Very educational ... I only want to chime in and say thanks for posting this. I have been considering a wide gamut monitor for sometime and was therefor studying the reasoning behind sRGB, AdobeRGB and other top ICC Profiles. Finding www[dot]gballard[dot]net and the information he provided was just what I needed to more or less move on and put an end to the studying. Happily I'm much closer now to hitting the buy-button. In addition as an unrepentant Firefox fanboy finding --- 'Full Color Management' option (Value 1)' and the related information very eye-opening. From a colour profiling beginner (noob), thanks again ...
If you are color calibration noob, let me give you one word of advice that I wish someone had given me: When soft proofing images for prints, you'll want to adjust the brightness (the backlight) of your monitor to a dimmer setting. How dim may be a matter of trial and error, but you will definitely get a more accurate print that way.
Not a good idea. Technically it's advised not to touch your monitor's brightness or gamma at all after calibration.
What you should do is calibrate your printer/paper combination, and then possibly add a special tone curve to your soft proof profile to "simulate" lower brightness/gamma/contrast.
You would be correct in a technical sense. I have taught this technique for years, and whether technically correct or not, though, it works. Noobs trying to set up a special tone curve would be a disaster. This gives them a quick way to get where they want to go.
Yes, there is a possibility of a slight color shift, but that is why, no matter how well you calibrate your monitor, you should always put a print of the image next to the monitor and make brightness adjustments until they look the same. Then write down that number. You don't want to do this with all your adjustments, but before sending to the printer, it is a quick final check.
While you as an individual can get away with a 'quicky-eyeball' proof, it's still not he right way to go about proofing.
I have set up many systems using industry standard techniques for years, calibrating printers across countries and continents... so that what a designer/photographer sees and proofs in Germany is the same proof in China, Australia... or anywhere else.
You "should" calibrate your printer/paper combinations... and even a noob can do it. It takes time, patience, ink and paper, unless you use a professional service (such as I offer), or purchase the truly good-for-small-studios Colormunkie (as an example).
The "print" i.e. printer is the last device in a project today more than ever. If you're not getting out of your printer what 90% of the people are seeing on a screen... you're doing it wrong, and setting yourself up for some nasty client remarks and costly reprinting... EVEN in a small studio environment.
Peter, glad it helped someone with something! That's what I set out to do. Honestly, you'll probably never run into this issue, but if this or some of the links have helped you to understand anything about colour spaces and colour management, then glad to be of service. The biggest difference I have noticed when working with the wide gamut monitor is just how much smoother colour transitions appear. I'm sure that people with more colour critical workflows have many other great reasons for picking up a monitor that supports AdobeRGB space in the hardware.
what do you guys think of this color enhancer extension for chrome. It's and accessibility extension.
https://chrome.google.com/webstore/detail/color-enhancer/ipkjmjaledkapil...
Just colors are not important. Closely look at the situation and you will know that the web browsing experience is made better with browsers. Web designs, themes, templates and add-on features with the web browser. It can increase the browsing experience altogether. http://www.nynerds.com