Warning: preg_match() expects parameter 2 to be string, array given in /home/native/public_html/site/wp-includes/functions.php on line 4796

Warning: substr() expects parameter 1 to be string, array given in /home/native/public_html/site/wp-includes/functions.php on line 1620

Colour Management in Web Browsers

Most of the monitors that we sell have large colour gamuts optimized for image editing, often they approach and in one case exceed the gamut of the Adobe RGB (1998) colour space. This makes them great for viewing images in properly colour managed applications such as Photoshop, Lightroom or Aperture.

In these applications colours are converted from the image colour space to the monitor profile to ensure accurate viewing. It doesn’t matter if the image is in a colour space smaller than the monitor gamut, the colours will still be rendered accurately because the conversion process that occurs in the background will colour manage everything correctly.

However, even photographers and designers spend a lot of the day looking at images in non-colour managed software such as web browsers, word processing apps, or even elements of the operating system graphical user interface (your ‘desktop’ for example).

[box type=”info”]Curiously, parts of the Mac OS ‘desktop’ or ‘finder’ are colour managed and parts are not. For example, if you set a background image (desktop image) and the image has a profile tagged, it will display correctly colour managed, through the monitor profile, yet desktop icons etc do not.[/box]

In these non-colour managed environments the wide gamut of the monitor is not taken into account and images can look over saturated and unnatural. There are some problems, for example file icons looking over-saturated, that there is no real solution for, but if you want colour accurate web browsing there is an answer.

Different web browsers have different levels of support for colour management. Let’s start with the bad guys; Opera, Chrome and Microsoft IE (Internet Explorer) versions prior to version 9 have no support for colour management at all. All elements of a web page are rendered to the full monitor gamut and so can look over saturated on a wide gamut monitor. If you care about colour on the web don’t use these browsers.

Microsoft IE 9 does have some support for colour management, in that it will respect profiles tagged in images BUT, and it’s a big but, it assumes your monitor is sRGB in gamut and ignores any monitor profile you’ve made, meaning the colours will never be accurate!

Apple Safari is better. Any image tagged with a profile will be converted correctly to your monitor profile, however any image not tagged with a profile and all other web page elements and colours will be rendered in the full monitor colour gamut so that’s not so good.

Firefox is the browser with the best support for colour management. All tagged images are converted to the monitor profile, and more importantly all untagged images and elements are assumed to be sRGB before being converted to the monitor profile, ensuring that they too look good on a wide gamut monitor. You will have to enable colour management fully on Firefox to get the best results, see below for advice and links on how to do this.

[hr]

Test images

The three images below were all converted to different colour spaces and their respective profiles embedded or tagged into the files. sRGB on the top, Adobe RGB in the middle and ProPhoto RGB on the bottom.

[box type=”note” border=”full”]Please note, due to the way our website content management system automatically creates ‘small’ versions of images, these will have had some tagging information stripped out. However, the full size version which you can see by clicking on the image is correct![/box]

Image tagged with sRGB

Image tagged with sRGB - click to enlarge

Image tagged with Adobe RGB

Image tagged with Adobe RGB - click to enlarge

Image tagged with ProPhoto

Image tagged with ProPhoto - click to enlarge

The three images then had their profiles stripped out, the order below is the same.

[box type=”note” border=”full”]Please note, due to the way our website content management system automatically creates ‘small’ versions of images, these will have had some tagging information stripped out. However, the full size version which you can see by clicking on the image is correct![/box]

sRGB image untagged - click to enlarge

sRGB image untagged - click to enlarge

Adobe RGB image, untagged - click to enlarge

Adobe RGB image, untagged - click to enlarge

ProPhoto image, untagged - click to enlarge

ProPhoto image, untagged - click to enlarge

A well colour managed browser should show all the tagged images as similar but you will see large differences in the untagged ones.

If you are a photographer wondering what the best colour space to convert images into for use on the web then even though some browsers will support colour management sRGB is probably still the safest choice.

Implementing Colour Management in Firefox

This information is given ‘as-is’ – we don’t guarantee the validity of any of this, but, to the best of our understanding, it’s correct at the time of publishing this article. Unfortunately, checking and changing the colour management settings in Firefix can appear a little scary, but it’s not too bad:

  • In the browser bar (where you usually type the web address), type about:config and press return or enter.
  • You’ll get a scary warning – click on the button to proceed
  • In the filter box, type or paste: gfx.color_management.mode
  • Double-click on the line listing and change the value according to one of these settings:
    • 0 = colour management disabled
    • 1 = colour management enabled for rendered graphics
    • 2 = colour management enabled for tagged graphics only

For more information, check out this link: http://kb.mozillazine.org/Gfx.color_management.mode

If that all seems too much, there’s also a Firefox Addon that you can download which does the same job that you could try: https://addons.mozilla.org/en-US/firefox/addon/color-management/

To learn more about browser colour management and see more tests images go to:

http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html#
http://www.gballard.net/firefox/#config
http://gearoracle.com/tools/web-browser-color-management-test/
http://gearoracle.com/guides/web-browser-color-management-guide/

Did you find this useful? You can drop us a comment below and/or tweet about it!

 

Tweets

Follow @native_digital on twitter.