Browser check

By Marti Maria | September 9, 2020

It is Browser color management check day!

As some users asked for this, I am recovering an old test I posted in lcms blog many years ago. Basically, it uses special images with crafted embedded profiles. If profiles are correctly honored, a text will show up. But not all web browsers behave equally.

Here are the old tests. They only check V2 compatibility.


Test 1


Test 2


No surprises. The images are using embedded profiles to do the trick. A self-explanatory text shows up on each image.

 

But now I have taken a step ahead and made a good test on V4 compatibility. This test uses a JPEG image with a special embedded V4 profile. If the render engine understands correctly all the steps the profile has, a lonely text “if your browser works correctly, only this text should be displayed”.

This profile has a little bit of everything a decent CMM should understand. Including a quite interesting tone curve:

Curve

Well, all what is in the profile is in the ICC V4 spec.

Please note the V4 spec is already outdated right now. It is superseeded by new ICC Max spec.

iccMAX is powerful!

But at a price. iccMAX is complex. I mean, really complex. Such complex it is not in the LittleCMS radar, not sure if MS, Apple and Adobe have implemented it and not sure if it will ever be.

Anyway, back to our test. V4, which dates from 2001!!! is a widely extended color standard. Almost every single image editor with color capabilities is supporting it. Operating systems does as well. Windows Color System does. Apple does. Linux does as well, and I’m proud that latter is because LittleCMS.

Here are the gory details of the profile. It uses LutBToA pipeline, parametric curves, CLUT with different granularity and multilocalized unicode. Nothing of that is missing in V4 spec, and in fact I’m avoiding advanced features like multi process elements that would make the test unnecessarely demanding.

Having said all that, here we go with the test:

Test 3

What do you see?


If all is ok, you should see something like that:

Test OK

If everything fails you get that:

Test OK

With diferent degrees of diagnostic. You can get no white bars if only some features are working, or you get complete blackness if the profile is misunderstood. Anyway there is only one “good” rendition, which is the one I am depict above, in the “if all is ok” part.

Several browsers I’ve tried

  • Chrome 85 – Pass. All is ok, no need to adjust anything. On mobile, tablet, PC… all are working.

  • Safari on Catalina – Almost pass. Everything is OK except precedence of tags. Read ICC spec ICC.1:2010 on 8.10.2 “Input, display, output, or colour space profile types” this is just a minor issue.

  • Edge 85 – Pass. All is ok, no need to adjust anything.

  • Opera 70 – Pass. Here I must confess I’m surprised and pleased to see a browser not on the top three doing such a good job. Congrats Opera!

  • Vivaldi 3.3 – Pass. Another excellent surprise. Congrats Vivaldi!

  • Firefox 80 – Fail. Houston, we have a problem. Fixefox folks argue color management is a thoughput killer, so in order to accelerate things, V4 is de-activated by default and has to be enabled by using an arcane combination. Ok, no problem, I did the gfx.color_management.enableV4=true trick, and tried again. Nope, it still does not work. Using default settings it fails on the 15-years-old test we used to check V2 compatibility. Now on V4 with all bells and whistles activated, Firefox keeps ignoring profiles otherwise fully V4 compliant and valid. It is fast, sure, blazingly fast. But color management doesn’t work. Worst, it works a little bit. That means, you are not sure if the color you see is correct. Which is indeed a very bad situation for color pros. I think it would be better to deactivate completely color correction and specialize this browser on tasks where speed is the main requirement.

  • PaleMoon – Fail. I tried this one just for checking another not-so-frequent browser based on Firefox. It does not work either on V4 profiles. I think the problem is not on the browser but in the mozilla engine. It simply doesn’t work with icc profiles.

For your amusement, here is the code I’ve used to build the profile.

Profile inspector, and Windows/Mac operating systems accepts the embedded profile without complains. I used Krita to edit the image. Krita did a good job, understanding correctly the embedded profile.

Bottom up

Based on the testing you can see here, I would recommend to pick any of the passing browsers for color-critical applications. It is very nice to see such broad support of color managemnt on most browsers.