Real World Color Management Issues In Your Browser
Let me start by talking about what issues most people face which eventually lead them to look into color management. There are a few common mistakes and misconceptions to clear up. So what are the issues one might experience when putting images on the web?
Images Look Dull
One issue one might encounter is: images look too dull, desaturated, and have a slightly yellow color cast.
This can happen if an image was worked on in a larger color space and on export the color space has not been down-converted to sRGB. For once, it can occur that a browser or app does not read color profiles and therefore simply interprets colors as sRGB colors. Secondly, it could be an image without a color profile embedded. Then the color reference is lost and by default, most apps and browsers will also interpret those images as being in sRGB color space.
Images Look Oversaturated
The second scenario one might encounter is: images looking way oversaturated. With other people’s images, it is sometimes hard to tell, but you will notice when images you worked on look so much more vibrant compared to how they looked when you were working on them in Lightroom or Photoshop.
Here, when using a wide gamut display, your browser does not map colors to the wider gamut of your monitor. Potentially, the browser cannot access your display gamut / custom color profile to map the colors or does not support color management at all.
About Color Gamuts And Color Spaces
Color spaces are outlined frameworks in which we reference colors usually by coordinates in a 3-dimensional space.
The whole of all colors to be described in a color space is called the color gamut. Different color spaces can hugely differ in the number of addressable colors and therefore in the size of gamut.
sRGB is a so-called minimum common denominator color space.
“Images intended for professional printing via a fully color-managed workflow, e.g. prepress output, sometimes use another color space such as Adobe RGB (1998), which accommodates a wider gamut. Such images used on the Internet may be converted to sRGB using color management tools that are usually included with software that works in these other color spaces.” (Source: Wikipedia)
That said, Images with no color tag / embedded color profile usually default to be displayed as sRGB as it is easier than guessing the unknown color profile.
Best practice is to convert every image to sRGB and to embed the sRGB profile on export before images hit the web!
3 Most Common Issues With Browser Color Management
1. Wrongly Embedded Color Profile
If you have worked in a larger color space than sRGB and have not converted your image to sRGB on export, this can lead to all sorts of issues.
Considering, there is no embedded profile, no application will ever know how to interpret the color information and by default will look at the available color data as if it was an sRGB image.
You can imagine, issues are pre-programmed, and almost always this will result in a lousy viewing experience.
2. No color Management Or Discarded Profile
Should you have worked in a larger color space than sRGB and have embedded the color profile but not converted to sRGB, the result depends on the capabilities of the application you are viewing the image with.
If the application or browser does not support color management, the embedded profile won’t be read, and all colors will be interpreted as if they were in sRGB.
In some cases, upon upload, the server/system will strip away the images metadata and color profile information. Should this happen, the result will be the same as if you have not embedded a color profile, to begin with.
Avoid Color Shift For Embedded Or Stipped Away Color Profiles
To avoid issues demonstrated in scenario one and two, make sure to always down-convert your image’s color space to sRGB and preferably embed the sRGB color profile information into your image’s metadata.
3. Images Look Way Oversaturated – Even In sRGB And Correctly Embedded Profile
In some cases, you might experience your images in an app or browser to look super saturated, much more compared to how the same photo looks within Photoshop.
The Color Space of the exported image was set to sRGB, and the profile has been embedded correctly. So what happened there?
This scenario can occur if you are working with a wide gamut display (much larger color space than sRGB) and viewing an image with an application that either does not support color management or its color management features are not activated properly.
The Web Is Still sRGB
The reality is images nowadays mainly go onto the web. While in print, you are sort of in control of the outcome, with the internet, you are not in control of what devices your images are being looked at with. You cannot know it the displays people use are calibrated, if they are color-managed applications or not, or how wide the display device’s gamut will be.
In the earlier days of the internet, things were a bit easier. Wide gamut displays were rarely used outside of a professional print and design environment, so the number of colors was pretty much restricted by the technology of graphics cards and the operating system. The outcome then was more predictable.
With today’s variety of devices and different color gamuts, things have gotten a bit trickier. Color management is necessary to implement for a predictable outcome. Unfortunately, some browsers have worse progress in adopting those features than others. It still can be hit and miss.
As sRGB is the smallest common standard color space, it still is the basis of all colors and images displayed in browsers, if not tagged otherwise.
Browser Color Management Test
It is always recommended to check if your browser currently supports color management or not. If you have the latest updates dated in 2019, you most likely have been using a color managed browser. However, some of us do not always update their browsers and might be on an earlier revision of the software, possibly without color management features.
As I said, luckily, now almost all browsers have adopted a color management engine. That said, Firefox has a color management engine but most likely needs some tweaking or even manual activation. We will get into the details of that in a bit.
ProPhotoRGB tagged image vs. sRGB tagged image
The difference shows how much wider your display’s gamut is, compared to sRGB.
sRGB untagged vs. sRGB image
If these display as the same color, untagged images are getting color managed. If there is a difference, you might want to activate color management for untagged images.
Untagged CSS element vs. sRGB image
Shows if non-image elements are getting color managed.
Current State Of Color Management Support (2019)
This table contains information about the state of color management engines in 2019. If you are on an older browser version, you might want to consider updating. Color management features have been adopted by most browsers over the year of 2018 and chances are, if you had issues with your favorite browser before by now they might have been sorted out, either partially or entirely.
Mobile devices are still the Achilles heel of color management. Most mobile operating systems and its browsers struggle with displaying colors correctly. The lack of color managed apps and lack of calibration capabilities still can make every photographer cringe. Hopefully, this will change shortly, too!
Internet Explorer V11
CM in V11
(ICC V2 and V4)
|Edge (Windows 10)||✔||(ICC V2 and V4)|
needs to be activated, settings below *
|Chrome on Android||✔|
Safari on iOS
Chrome is not a color managed browser, but there’s some movement in this direction. Chrome 16, currently in beta, is the first version to offer ICC v2 and v4 color profiles support on the Mac OS X platform. The Windows version still doesn’t have any color profiles support but provides a command line switch to treat all images and page elements as sRGB, avoiding over-saturation problems for wide gamut display users. What we need now is a combination of both. 🙂
Safari supports both v2 and v4 ICC profiles. Unfortunately, it has no control over color on other page elements. Tagged images look right, but every other page element has over-saturated colors on a wide gamut LCD.
Firefox has been one of the first browsers to adopt color management features. In earlier versions, you might need an add-in to enable color management and to use the settings that now are integrated into the base-engine of firefox. Most times, color management has to be controlled and activated in the advanced config settings. *see all settings and how to access them below
While Microsofts Internet Explorer supports color management out of the box. The edge browser is still stuck in development regarding the color management features. Unfortunately, Microsoft has announced to eventually drop the browser, so there is not much further feature development to be expected.
How To Enable Color Management For Firefox
- Open a new tab in Firefox
- Type “about:config” into the URL field
- Access the Firefox config after the notice of warning.
- Filter for “color_management” in the search field.
- Change “gfx.color_management.enablev4” to the value “true”
- Change “gfx.color_management.mode” to the value “1” to enable color management for all tagged and untagged colors.
- Add the URL of your custom monitor profile as value for “gfx.color_management.display_profile”
- Restart Firefox for the changes to take effect.