Firefox and corrupted PNG images, colour management and ICC v4 support

Jan 122013

Introduction

I’d previously reported that I had experienced corrupted PNG images in Firefox if I enabled ICC v4 support within the browser:

Corrupted PNG images, Firefox colour management, ICC v4 profile support, and Windows 7
http://www.metalvortex.com/blog/2012/09/17/1008.html

That was way back in September 2012 and there have been many releases of Firefox since then, and my Windows machines have been through a number of Service Pack and revision updates since then including some changes to my implementation of monitor calibration.

I’ve also noticed this PNG image corruption is logged as a bug at https://bugzilla.mozilla.org/show_bug.cgi?id=791456 and there is suspicion there that the profile embedded in the PNG image may be corrupted in some way. I’ll have to do some separate checks on that suspicion but I could not detect any embedded profile in the PNG image and it appears to be a simple greyscale-formatted image. In the meantime, I have undertaken some quick checks on ICC v2 and ICC v4 support and seeing the effect on viewing the xkcd PNG images.

Tests

With the release of Firefox 18 I thought it was about time to test again. I undertook five tests, with configuration and results detailed below. Generally, I used the ICC test page at http://www.color.org/version4html.xalter to confirm ICC version compatibility, and I also checked the PNG image at http://xkcd.com/1108/ for PNG image corruption. My system is a Windows 8 Pro 64-bit machine with all the latest updates as of today (12th January 2013) in a dual-monitor configuration using two Dell UltraSharp 3008WFP 30-inch wide-gamut monitors.

1. Test 1 – ICC v4 monitor profile (matrix-based), ICC v4 enabled in Firefox

Config: The ICC v4 monitor profile was created with x-rite “i1 Profile” using an i1 Display Pro colorimeter. The profile type was matrix-based.

When I checked at http://xkcd.com/1108/ the PNG image there was not corrupted.

When I checked at http://www.color.org/version4html.xalter the image colours were shown in an unexpected manner:

icc4-test1

Clearly something was very wrong.

I then checked the integrity of this monitor profile using “ICC Profile Inspector” and CHROMIX “ColorThink”; the profile seemed fine, so I suspect that the error is within Firefox. I would like to have used ArgyllCMS to create an ICC v4 profile to help in validating if the error is within Firefox and not within the profile but, at this time, ArgyllCMS does not support ICC v4.

2. Test 2 – ICC v2 monitor profile (LUT-based), ICC v4 enabled in Firefox

Config: The ICC v2 monitor profile was created with ArgyllCMS + dispcalGUI using an i1 Display Pro colorimeter. The profile type was XYZ LUT + “swapped” matrix.

When I checked at http://xkcd.com/1108/ the PNG image there was corrupted.

When I checked at http://www.color.org/version4html.xalter the image indicated full ICC v4 compatibility:

icc4-test2

ICC v4 support and LUT-based support is excellent here but the downside is that the PNG image was corrupted. Oh dear.

3. Test 3 – ICC v2 monitor profile (LUT-based), ICC v4 disabled in Firefox

Config: The ICC v2 monitor profile was created with ArgyllCMS + dispcalGUI using an i1 Display Pro colorimeter. The profile type was XYZ LUT + “swapped” matrix.

As soon as I loaded Firefox I knew there was a problem; all of the Firefox app window colours were messed up. And, of course, so were the colours on the Internet.

When I checked at http://xkcd.com/1108/ the PNG image there was not corrupted but other elements had incorrect colours.

When I checked at http://www.color.org/version4html.xalter the image indicated ICC v2 compatibility but all the colours were incorrect:

icc4-test3

What does all this mean? Well, the ICC v2 profile was LUT-based, to which was added a deliberately wacked matrix. Firefox was clearly not using the LUT data when ICC v4 is disabled and instead used the matrix data as shown by the wacked colours. So the lesson here is not to use LUT-based ICC profiles (at least with ICC v2 profiles, as I was not able to create LUT-based ICC v4 profiles).

To clarify the above, the Firefox setting “gfx.color_management.enablev4″ enables ICC v2 LUT support support as well as enabling ICC v4 support; you can’t have one without the other.

4. Test 4 – ICC v2 monitor profile (matrix-based), ICC v4 disabled in Firefox

Config: The ICC v2 monitor profile was created with ArgyllCMS + dispcalGUI using an i1 Display Pro colorimeter. The profile type was matrix-based with curves. I used a matrix-based profile as it was clear from the previous test that Firefox was not reading correctly reading LUT-based profiles.

When I checked at http://xkcd.com/1108/ the PNG image there was not corrupted.

When I checked at http://www.color.org/version4html.xalter the image indicated ICC v2 compatibility:

icc4-test4

5. Test 5 – ICC v4 monitor profile (matrix-based), ICC v4 disabled in Firefox

Config: The ICC v2 monitor profile was created with ArgyllCMS + dispcalGUI using an i1 Display Pro colorimeter. The profile type was matrix-based.

When I checked at http://xkcd.com/1108/ the PNG image there was not corrupted.

When I checked at http://www.color.org/version4html.xalter the image indicated ICC v2 compatibility:

icc4-test5

Recommendations

These tests are by no means exhaustive or even as rigorous as I would have liked but I can recommend the following:

Avoid the use of ICC v4 monitor profiles and, instead, use ICC v2 profiles whenever possible.
Avoid the use of LUT-based monitor ICC profiles and, instead, use matrix-based ICC profiles whenever possible. A mixed LUT+matrix profile is acceptable.
Ensure that ICC v4 support within Firefox is disabled (gfx.color_management.enablev4 = false). Note that this will also disable ICC v2 LUT-based profile support.
Wait for Mozilla to confirm and fix colour-management issues with ICC v4 profiles!

Article by Kulvinder Singh Matharu – 2013

Is it acceptable to use the manufacturer’s colour profile for my monitor?

Uncategorized Comments Off

Jan 042013

I’ve previously explained the importance of calibrating and profiling the monitor to ensure correct colour management. But some people have queried if it’s acceptable to use the manufacture-supplied colour profile for the monitor. In most cases this is a bad idea. Look at the diagram below. This is a 2D CIE colour space chromaticity diagram where I’ve plotted two colour profiles for my wide-gamut monitor; one profile is the standard profile supplied by the manufacturer, the other profile is one I’ve created after calibrating the monitor.

The manufacturer-supplied colour profile is actually not too far from an sRGB profile. However, it’s pretty clear that the manufacturer-supplied profile does not even remotely characterise my monitor and is therefore completely unsuitable for use in any colour-management workflows. So, next time you try to use colour-managed software such as colour-enabled web browser, make sure that your monitor has been calibrated and profiled otherwise your user experience will suffer. If you haven’t calibrated and profiled your monitor, please, disable any colour management features in your software.

I actually have strong feelings that colour-management in web-browsers need to be turned-off by default, and that web-browsers need to give the user a prominent and clear choice on whether to turn-on colour management. That’s why I think Firefox has got it wrong be enabling colour management by default. But that’s a rant for another day.

Article by Kulvinder Singh Matharu – 2013

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 ]

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

Monitor Calibration

Uncategorized Comments Off

Jan 302011

Just a quick post that my Monitor Calibration page has been updated. It can be found here:

Monitor Calibration
http://www.metalvortex.com/chart/

I’ve included some information on wide-gamut displays and colour management. I’ve reprinted the references here:

Article by Kulvinder Singh Matharu – 2011

Opera Software CTO misdirects and misleads

Uncategorized Comments Off

Feb 192008

The CTO of Opera Software, Håkon Wium Lie, must be feeling the pressure. The Opera browsers are not taking over the market place. No, Microsoft’s IE browsers and Mozilla’s Firefox browsers are the big players here with Apple’s Safari increasing its presence, and Opera having a bit part. Dunce

But rather than emulate Firefox’s successes, Opera Software opts to complain to the EU about Microsoft in the same vein that Netscape tried many years ago. This is not the way to go. Opera need to improve their software. Their mobile versions are rubbish as it takes several keystrokes to get the browser and its Java environment running. And their desktop versions have given me such a lot of headache that I no longer test my pages for Opera behaviour…IE and Firefox are the kings here. So Opera Software, pull your finger out and don’t go crying to the EU. And it isn’t just me, but a lot of people think that Opera are wrong.

Now, Håkon Wium Lie recently published an article at The Register…the article is damming evidence of the pressures being felt by Opera as Håkon Wium Lie deliberately misleads on the current situation regarding Microsoft’s new IE8 standards-mode switching.

As detailed in my previous article, a proposal has been put forward to use meta-declarations for switching IE8 to full standards-mode rather than rely on DOCTYPE-switching. Håkon Wium Lie implies that because there was an uproar over this proposal that Microsoft should remove this feature and instead rely on DOCTYPE. Well, his suggestion totally ignores all the arguments that other respected web developers and web standards experts have made as to why meta-declaration standards-mode switching is probably the right thing to do. Just look at Jeffrey Zeldman’s article “Version Targeting: Threat or Menace?”, Eric Meyer’s article “From Switches to Targets: A Standardista’s Journey” and Aaron Gustafson’s article “Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8″. I agree the proposal is controversial but Håkon Wium Lie implies that everyone is against this idea. That is so false.

Håkon Wium Lie also implies that Microsoft isn’t keen on standards and are holding back web development. This doesn’t stack up with what the new IE team have been doing over the last couple of years or so. IE6 was in the doldrums for a long time, but the new IE team have produced a far superior standards-compliant version in IE7, and now they’ve developing IE8 (currently in beta) which probably puts the browser right up there at the cutting edge of standards-compliance. And this development wasn’t done at the behest of someone with a big stick from the EU! So don’t lie Lie!

Håkon Wium Lie is trying to use the well-known techniques of Fear, Uncertainty and Doubt (FUD) rather than use smarts to develop and market his company’s software. So, Håkon Wium Lie, what do you want to do? Rest on the laurels of your past achievements and act like a cry-baby, or get off your back-end and start producing software and a business model that can take on Microsoft’s IE browsers and Mozilla’s Firefox browsers? Well?

May 2013
S	M	T	W	T	F	S
« Apr
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31