profile » Matharu's Rants and Raves

Corrupted PNG images, Firefox colour management, ICC v4 profile support, and Windows 7

Sep 172012

In an earlier post I explained how to enable ICC v4 support within Firefox:

Firefox colour management settings – Part 2
http://www.metalvortex.com/blog/2012/07/12/979.html

I’m running Windows 7 Ultimate 64-bit.

Well, I’ve recently experienced a problem where certain PNG files where displayed in a corrupted manner. This occurred at the xkcd site and an example is http://xkcd.com/1108/

How the corrupted image looked:

How it should really look:

I’ve seen another person who had a similar problem:

Firefox 15.0 problem rendering png file
https://support.mozilla.org/en-US/questions/935704

I tried following the suggested methods by creating a new Firefox profile and this seemed to cure the problem initially, but then it came back later when I was customising Firefox. So that was a clue. Through further investigation (undoing the customisation one at a time and seeing the effect!) I managed to track the problem to the enabling of ICC v4 support in Firefox.

Now, I don’t know if this is the fault of Firefox, of Windows or of my display profile; I’ve not had an opportunity to fully root-cause this but I can say that setting gfx.color_management.enablev4 to “false” allowed me to view a non-corrupted view of the xkcd PNG files within Firefox.

So, for the time being, I strongly recommend that you do not enable ICC v4 support in Firefox.

By the way, xkcd is a brilliant site!

Article by Kulvinder Singh Matharu – 2012

Firefox colour management settings – Part 2

Uncategorized Comments Off

Jul 122012

[Update 17th September 2012: Don't do this! See problems experienced at http://www.metalvortex.com/blog/2012/09/17/1008.html ]

I’ve previously described how to configure Firefox’s colour management features in Windows 7:

I noted at the time that Firefox 6 had problems working with ICC v4 profiles and, coupled with the rather sparse support for ICC v4 in other software, I recommended that the user stick to using ICC v2. It has come to my attention that more recent versions of Firefox (currently 13.01) now properly support ICC v4. But Firefox needs to be explicitly configured to support ICC v4; this is done by setting the Firefox property gfx.color_management.enablev4 to “true”. I’m not entirely convinced that we need ICC v4 support in web browsers as most images on the web are untagged. But there may be specific requirements for particular users so lets try to enable it.

Setting gfx.color_management.enablev4 to “true” is easily done; see below.

Type the following into Firefox’s address bar and hit the Enter key:

about:config

You’ll then be presented with a huge list, at the top of which is a “Search” bar.

Type the following into this Search bar:

gfx

You will now be presented with a list similar to that shown here.

Just double-click on the property gfx.color_management.enablev4 to change it to the value of “true”. Then just restart Firefox.

To check that it all works, point the browser to:

http://www.color.org/version4html.xalter

Hopefully, you should see something like this:

By the way, Internet Explorer 9 also seems to pass this test but it doesn’t really, it’s lying. Look here:

IE9 and colour management
http://www.metalvortex.com/blog/2011/03/15/579.html

Article by Kulvinder Singh Matharu – 2012

Firefox colour management settings

Uncategorized Comments Off

Mar 162012

[Update 13 July 2012: Note that I now have a Part 2 on this article at http://www.metalvortex.com/blog/2012/07/12/979.html ]

If you care about accurate colours on the Internet, especially if you have a wide-gamut monitor, then you need a fully colour-managed browser on a colour-managed operating system (OS).

I’ve explained previously why Firefox is the best browser to use, at least on non-OSX platforms such as Windows, when colour fidelity is important to the user.

However, I’ve found a couple of forums where some people are finding that Firefox does not appear to provide correct colour especially when using wide-gamut monitors; this may be a result of having not correctly set up colour management within their OS and/or within Firefox. I think it’s safe to assume that this could be fairly common so I’ve written below a concise set of steps to help. Note that I’m using Windows 7 and Firefox 11 so some of the screenshots may look a bit different depending on your version of OS and Firefox.

Step 1 – Select operating system

If you wish to use colour management within Firefox, the first thing you must do is to ensure that you have an OS that supports colour management (such as Windows 7).

Step 2 – Calibrate and profile your monitor

You must, must, must calibrate and profile your computer’s monitor. This is best achieved by using a hardware-based device such as the Datacolor “Spyder3Elite” or the x-rite “i1Display2”. It’s pretty straightforward these days, however make sure that you create profiles that are compliant to Version 2 of the ICC Specification and not to Version 4 of the ICC Specification due to the rather sparse and sometimes broken support for the latter.

Using non-hardware based software tools is not recommended although, if forced, I can point you to http://www.normankoren.com/makingfineprints1A.html but don’t expect miracles.

If calibration and profiling is not done correctly then you may as well not bother with colour management.

Step 3a – Configure Firefox

To ensure that Firefox’s colour management is correctly configured, we need to makes some changes within Firefox.

I’ve detailed below the steps to take using manual entry but there is an Addon available that provides a GUI front-end to colour management but I’ve not used it.

Anyway, to continue with the steps. Type the following into Firefox’s address bar and hit the Enter key:

about:config

You’ll then be presented with a huge list, at the top of which is a “Search” bar.

Type the following into this Search bar:

gfx

You will now be presented with a list similar to that shown here.

The listing will be different on different versions of Firefox and perhaps also if you’ve done upgrades or fresh installs of Firefox.

Step 3b – gfx.color_management.mode

Mozilla’s documentation for the gfx.color_management.mode values says:

Color management allows images and colors to be displayed consistently across a variety of devices. Mozilla recognizes embedded ICC profiles in image files and uses a local color profile to perform the color adjustments. This preference determines if Mozilla should make these adjustments.

Possible values and their effects

0 – Disable color management

1 – Enable color management for rendered graphics

2 – Enable color management for tagged graphics only. (Default)

In more recent versions of Firefox (e.g. Firefox 11), the property gfx.color_management.mode has a default value of “2”. In much earlier versions of Firefox colour management was disabled by default with gfx.color_management.enabled set to “false”.

I have gfx.color_management.mode = “1” as that aligns with the interpretations of the W3C recommendations that untagged images should assumed to be in the sRGB colour space. I’m not entirely sure why Firefox has the default value set to “2”, but I do think that this is a mistake. So, go ahead and change gfx.color_management.mode to “1”.

A note: I would add that those who have not already calibrated and profiled their monitors are likely to see mismanaged colours with gfx.color_management.mode = 2 or 1. Firefox’s default value for gfx.color_management.mode should therefore have been set to “0” so as to avoid using profiles that do not match the monitor; the user can then change the value to 1 when the monitor is correctly calibrated and profiled.

Step 3c – gfx.color_management.display_profile

Mozilla’s documentation for the gfx.color_management.display_profile values says:

A string containing the full path to an ICM profile for output. Default is an empty string in which case the systems global profile is used. If no global profile can be found a default sRGB profile is used.

If you’ve followed Step 2 and have just a single monitor then leave the property gfx.color_management.display_profile to a blank value. This will instruct Firefox to use the default monitor colour profile.

Step 3d – for a multi-monitor system

If you do not have a multi-monitor system then you can skip this step.

If you do have a multi-monitor system like mine, then you have to tell Firefox which monitor colour profile to use. The property gfx.color_management.display_profile will need to have its value changed to the path of your monitor profile.

The choice to make here is which colour profile to use; Firefox will only display colours properly when displayed in the monitor of the chosen profile. I’m lucky, in my dual-monitor set-up, that both of my Dell UltraSharp 3008WFP wide-gamut monitors have an almost identical profile so I was quite happy to use either of my two monitor profiles. I chose the one for my primary monitor where Firefox lives most of the time. I do wonder which of the two profiles Firefox would choose if I left gfx.color_management.display_profile to a blank value; perhaps an experiment for the future.

Here’s the path to my main monitor’s colour profile (this is for a Windows 7 machine so your mileage may vary):

C:\Windows\System32\spool\drivers\color\Monitor_Fri 18-02-11_1.icc

Not that the date in the filename is old but only because I’ve re-used the same filename for each of my regular re-calibration and re-profiling exercises so as to avoid changing the value in my other colour-managed software.

Step 4

Just restart Firefox and that should be it; a fully colour managed web browser showing correct colours on your monitor(s).

Good luck!

Article by Kulvinder Singh Matharu – 2012

[Update 13 July 2012: Note that I now have a Part 2 on this article at http://www.metalvortex.com/blog/2012/07/12/979.html ]

Safari on the iPad does not colour manage

Uncategorized Comments Off

Feb 082012

I actually found this out by accident.

I’d upload some jpeg photos to my website but unfortunately I forgot to convert the profile from ProPhoto RGB to sRGB when saving from PSD to jpeg. I initially saw no problems on my Windows 7 machine using a wide-gamut calibrated profiled display as I use Firefox which handles colour management with aplomb. It was only whilst I was looking at the uploaded photos using Safari on the iPad to check if the resolution was OK on a tablet that I got the shock of my life. Yup, Safari on the iPad does not colour manage…what a mess!

Those images with ProPhoto RGB should never have escaped into the wild in the first place as I knew how broken various systems and browsers are with regards to colour management. I just need to make sure that I am more diligent in ensuring that the profiles are converted to sRGB when saving to jpeg. I normally use Photoshop (CS4) “Save for Web & Devices…” or Adobe Bridge’s Photoshop “Image Processor…” but on this occasion I used Photoshop’s “Save as…” feature. Must be more careful next time.

My earlier findings on colour management of various browsers in Windows 7 remain though:

Why I use Firefox browser
http://www.metalvortex.com/blog/2011/08/21/643.html

Article by Kulvinder Singh Matharu – 2012

Why I use Firefox browser

Uncategorized Comments Off

Aug 212011

[Update 21 March 2012: I haven't used Google Chrome much but have discovered that Google Chrome 17 can colour manage by appending the string --enable-monitor-profile to the application shortcut target e.g. C:\Users\name\AppData\Local\Google\Chrome\Application\chrome.exe --enable-monitor-profile.]

There are a bunch of web browsers on the market today and there seems to be a big battle happening between IE, Firefox and Chrome. However, for me and others on non-Mac platforms who care about colour management, there is really only one choice. Let me explain.

Historically, most consumer PC displays have adhered (more or less!) to a colour standard known popularly known as “sRGB” (or more formally as IEC 61966-2-1:1999 for the latest version). The sRGB standard was originally developed by recognising the limitations of common consumer monitors at the time (mid 1990s). This standard allowed for fairly good and consistent colour reproduction for consumers, and a lot of software assumed sRGB colour-flow from source to display; web browsers being a prime example.

However, professional photographers, graphics artists and others utilise images that have far more colours than can be displayed by sRGB monitors but which other output devices are well capable of reproducing (eg high-end printers). For such people, an sRGB monitor is unsuitable for creating/modifying images. So a small market in high-end and expensive monitors was created that could display colours far greater than sRGB monitors; these are the wide-gamut monitors.

With the unrelenting march of technology, many “prosumer” digital cameras and printers today can capture/reproduce colours far in excess of the sRGB colour space. And wide-gamut monitors are increasingly being found in the consumer market. This allows professionals and other keen hobbyists to work with colours outside of the sRGB colour space and have a good idea what such colour spaces look like on their monitors before committing to prints.

There is one big issue with wide-gamut monitors; software needs to be colour-aware. By “colour-aware” I mean that the software must be able to translate an image from one colour space to that used by the display device. This is achieved by ensuring that the monitor is calibrated and profiled; the profile is used by colour-aware software to do the translation. If the software is not colour-aware or makes incorrect assumptions on colour spaces then there is going to be colour mismatch. For example, an sRGB image without colour-translation would have its colour space stretched on a wide-gamut display making the image appear too saturated especially in the reds. Believe me, this looks horrible but, unfortunately, some people seem to like that artificial colour pop (but I digress).

Image files can be saved in various colour spaces such as sRGB, Adobe RBG, etc. Most colour-aware software such as Abobe Photoshop CS5 can tag the image file with a colour space so that other software can use this tag to undertake colour-management. Files without a tag are called “untagged” but it can be safely assumed that such images are in the sRGB colour space. But there is a large amount of graphics software which isn’t colour aware and which don’t tag the files they create. On the web, most images are untagged. Those that are tagged are in the sRGB colour space. Very few, percentage-wise, are in other colour spaces. The common rule of thumb is that, unless there is a special reason for doing otherwise, all images on the Internet should be in sRGB format.

As indicated earlier, web browsers have not traditionally been colour-aware but the need for this requirement is increasing especially with the rise and proliferation of wide-gamut monitors.

I’m on a Windows 7 Ultimate 64-bit platform with two wide-gamut monitors each properly calibrated and profiled (ICC v2) using a colorimeter. I’ve set my monitor luminance to 80 cd/m² which some people may consider too dark so they may recommend 90 cd/m² or even 120 cd/m². ISO 3664:2000 allows a monitor luminance from 74 cd/m² to 100 cd/m², and ISO 12646:2004 (which takes printer output into account) allows a monitor luminance from 80 cd/m² to 120 cd/m². It all depends. The chromaticity graphs for my two monitors are shown below:

A three dimensional graph of one of these monitor profiles compared to Adobe RGB is shown here:

Right. Let’s go onto web browsers. I have the latest non-beta builds of the following 32-bit browsers:

Internet Explorer (version 9.0.8112.16421)
Firefox (version 6.0)
Chrome (version 13.0.782.112 m)
Opera (version 11.50 build 1074)
Safari (version 5.1 build 7534.50)

What I have found is that only Firefox gives me the capability for full colour management using ICC v2 profiles (Firefox appears to have problems with the newer ICC v4 profiles). The other browsers don’t colour-manage at all or have partial (i.e. broken!) colour management (I am led to understand that Safari on the Mac is fully colour-managed but I do not know if this is limited to ICC2 or if it extends to ICC v4 profiles). Despite what Microsoft may say about IE9, their browser is broken as discussed in a separate blog. Chrome, fast as it is, does not colour-manage and the hideous results far outweigh any speed advantage that Chrome has. It has to be Firefox, especially for those using wide-gamut monitors.

browser screen-shots of untagged image

Firefox has colour management turned-off by default and I think that this is very sensible. Unless your display is calibrated and profiled, colour-management will mistranslate from one colour space to another. To turn on colour management, see the article at http://gearoracle.com/guides/firefox-color-management/ . Note that you do not need to enter a path to the monitor’s colour space as Firefox will use the default monitor profile. I actually have two monitors so I’m not entirely sure which display Firefox is using but my two monitors are pretty much identical (see the chromaticity graphs above) therefore that isn’t a real problem for me…other people with displays exhibiting different colour characteristics may opt to use Firefox on a designated monitor and use the appropriate monitor profile in the Firefox settings.

So there you go. That’s why I use Firefox on a non-OSX platform. If you care about accurate and consistent colour reproduction, and especially if you use a wide-gamut monitor, get your monitor calibrated, profiled and then install Firefox.

Article by Kulvinder Singh Matharu – 2011