Have you noticed that your pictures look different when viewed in Web browser and in Adobe Photoshop? Or perhaps you have discovered that the pictures look different when viewed in Internet Explorer and Safari. There is no need to check your sanity or suspect your vision, this is a common problem caused by dismal color management support in various software (including some web browsers) and operating systems.
Web browsers without color management support assume all photos are in sRGB color space and your monitor is also sRGB-compliant. You may see (sometimes very) different colors that you don’t expect if any of the two assumptions is not true. If the photos are indeed in sRGB color space and your monitor does have a device color profile that is sRGB or close to it, your may not encounter much of a problem in your daily web browsing. After all, most sane people upload only photos encoded in sRGB color space to the web. That’s probably part of the reasons why some browsers still do not support color management.
There are other reasons that you may see a different color than you expect, such as incorrect white balance setting, blown channel (over exposure), etc. These are not within the scope of the current discussion.
Why do we want color managed web browsers?
Color management helps to make sure the photos are displayed consistently across all devices and software applications. It helps to avoid the situation where you spend precious time tweaking your photos in Adobe Photoshop or Nikon Capture NX (both are color managed), only to find out the photos look dull and lifeless after they are uploaded to the Internet and viewed in a web browser.
Is your web browser color managed?
To check out your browsers for color profile awareness, visit the International Color Consortium’s test page. Another excellent resource for browser testing is the post titled Digital-Image Color Spaces at Jeffery Friedl’s Blog.
On my computer (Windows Vista), Mozilla Firefox 3.1Beta2 and Apple Safari 3.2 are color managed, while Google Chrome 1.0 and Microsoft IE 8.0 are not.
Color management support in Mozilla Firefox 3+
If you use Mozilla Firefox, Version 3 and above support color management but it may not be turned on by default. The following shows you how to enable color management in Mozilla Firefox 3.x.
- Type (without the quote ) “about:config” and hit enter key in the address bar of the browser and click away the warning dialog box.
- In the filter bar, type “gfx.color” and hit enter key.
- Double click on “gfx.color_management.mode” and change it to 0 (disabled), 1 (enabled for everything, CSS/HTML colors and untagged images are treated as sRGB, tagged images are handled with their profiles), or 2 (enabled only for graphics tagged with a color profile, default).
- The preference “gfx.color_management.rendering_intent” controls how the image is rendered: -1 (Honor the rendering intent specified in the image file), 0 (Perceptual, Default), 1 (Relative colorimetric, 2 (Saturation), and 3 (Absolute colorimetric). Default value of 1 (perceptual) should work fine.
- The preference “gfx.color_management.display_profile” should be left unspecified so the global system profile is used.
There are several caveats with color managements in web browsers.
- Without a properly calibrated monitor and correct color profile, color management may make colors look worse.
- Performance penalty. There is a 10-15% performance hit when color management is enabled on Firefox.
- Images without a color profile may still be rendered differently. Some browser will assume it is in sRGB while other will assume it is in the monitor profile.
Keywords: Color Management, Color Space, Devices, ICC, ICC Profiles, Monitor Calibration, Monitor Profiles