Web browsers color management (solved)

XavAL · December 1, 2019, 12:18pm

Hi all:

I’m currently testing if the main browsers show image colors the same way, and it seems they don’t. So let me narrow the question to Chrome and Firefox: are they color managed browsers? Everywhere seems that both are so, but in my tests, they render no image the same. I’m a Firefox user.

To begin with, I’ve set Firefox with gfx.color_management.mode=1 (color manage all images) and gfx.color_management.rendering_intent=1 (rendering intent: relative colorimetric), and Chrome with Force color profile=sRGB.

As I mainly use RawTherapee, I’ve set it to Use operating system’s main monitor color profile and Relative colorimetric.

The whole Linux Mint 19.2 Cinnamon system use a profile created with DisplayCAL and an i1 Display Pro

Now to the samples, all of them taken as a screen capture so you may see what I see on my screen. The image is the processing I made in the Noctilucent clouds playraw:

(left side: Chrome, center: RawTherapee, right side: Firefox)

As I have a tendency to use the deep shadows details as part of the composition, it is important to me that images render as I processed them. And that’s not the case with Chrome.

And as Chrome is used by more than half the people in the World, it is important too that it renders my images correctly. Is it possible? If not, i would have to take a decision to either process for my screen and Firefox, or to process for Chrome.

Any ideas?

Thanks

Claes · December 1, 2019, 1:53pm

Hi @XavAL,

Interesting topic!

First of all, I do not think that it is at all possible for you (as a sender)
to govern how your images are shown at the receiving end. Even if some
browsers do have color settings, most presumably they are left in their default state.

Then we have the RGB settings for each monitor, we have Brightness, and Contrast. Brrrr. You, as the sender, do not have any influence over those either.

Depressing, eh?

Regarding Firefox settings – I was once taught to use gfx.color_management…

.display_profile → my own monitor icc
.enablev4 → true
.mode → 1
.rendering_intent = 0

Have fun!
Claes in Lund, Sweden

XavAL · December 1, 2019, 3:03pm

No, I can’t. At least directly. But I think that a meticulous viewer, concerned about the proper rendering of colors (as many people in this forum may be), will read and perform the suggested tweaks in his/her browser (assuming a proper note is added). The not meticulous readers wouldn’t probably give a damn, so no problems there.

Anyway, I have specified the display icc profile, and the result is the same (as expected, because if you don’t add any profile, the system display profile is used).

And even though the rendering intent I prefer is relative colorimetric, I’ve set the perceptual rendering intent, as you suggested (.rendering_intent = 0). Sadly, no change. The output from Chrome is time and again darker that what I see in RT.

Thus, I think the problem is Chrome, not having a good color management. Have it?

Is there any configuration I haven’t set in Chrome that makes it render images the same (or very similar) as RT and Firefox?

betazoid · December 1, 2019, 3:19pm

Hi,
I can contribute two thoughts to this discussion so far:

According to my experience, there are not 2 color managed programs that render colors exactly the same (if they do not have the same color engine). Color management is always interpretation, though the ultimate goal is to render colors as similarly as possible.
According to my experience, Chrome is color managed but its color management is very far form perfect. Maybe one could say that it’s a bit broken. Firefox is better.

Regards
b

snibgo · December 1, 2019, 3:37pm

If your image has an embedded ICC that has a larger gamut than sRGB, then you cannot guarantee consistency across sRGB systems, even if they are calibrated perfectly and the users haven’t twiddled with brightness etc. This is because some software will map to the smaller gamut, and different software can do this differently.

spid · December 1, 2019, 3:47pm

Chrome detects the ICC profile assigned to the monitor, but it only uses the primaries from it. Any LUT or tone curve is ignored (the sRGB curve is assumed instead).

https://crrev.com/c/1592680

XavAL · December 1, 2019, 4:37pm

Well, it seems that in the end I’ve found a workaround, thanks to your comments: it seems that as in other situations, the users don’t have the means nor the right to tweak something Google has coded, and we just have the right to accommodate to a given software ( this somehow reminds me the bad old days of Micro$oft). (Yes, I know I can edit the Chromium code, but I’m not a programmer…)

Now to the «solution»:

Chrome uses a pure, canonical sRGB profile. That’s it. Like it or not.
Firefox uses by default the system color profile, which unless you have a high end display, will be something close to an sRGB color profile
my calibrated display has a bit wider color profile than sRGB (at least with a couple of primaries), thus, I can see better colors with RT, Firefox, XViewer, …, but not in Chrome (that keeps showing images with an sRGB profile)
after setting my display to use a canonical sRGB profile and rebooting, I get this:

(left side: Chrome, center: RawTherapee, right side: Firefox)

If you look really carefully the renderings are not exactly the same, but to me they are close enough.

The sad part is that Google prevents me to make use of all the colors my display is capable of rendering It feels like the old story that somebody knows better than me…

Thank you all for your helpful comments. I really appreciate them!

spid · December 1, 2019, 6:01pm

Chrome actually can use the whole gamut of your monitor. You can look at the images on Examples of various wide-gamut images to verify that it can in fact display colors outside of sRGB. The problem is that since it doesn’t care about A2B/B2A tables or response curves, the conversion from the image color space (often sRGB) to the monitor color space can be wholly inaccurate, unless the calibrated monitor behaves exactly as Chrome expects.

In fact, if it did not use the monitor profile at all, it would make use of the whole gamut too often, stretching sRGB to the wider gamut and oversaturating everything.

betazoid · December 1, 2019, 6:14pm

I am not sure about this workaround. Your programs might all show the same colors but I am not sure they are actually correct. You should not use an sRGB screen profile if your screen’s color space is not very close to sRGB.
Edit: you know, you can create many different types of profiles with Displaycal. Maybe try out several of them. Maybe simple types like curves or gamma only. Maybe Chrome will like one of them.

Morgan_Hardwood · December 1, 2019, 6:26pm

Chrome has broken color management:

It relies on third-party color management systems which over the years have been mostly broken.
It does not let the user specify a monitor profile.
It does not let the user select a rendering intent.
Embedded ICC profiles are not fully used, as @spid wrote.

The situation seems to be that even if I as a photographer follow best practices in a correctly color-managed workflow, then people who view my photos who follow best practices in a correctly color-managed workflow may still see garbage.

Then they’re incorrectly configured or have broken color management. Any two programs should render color the same if their color management is not broken and consistently configured.

If they’re both color-managed and configured consistently, then they should render the images the same. That is color management’s purpose.

It’s not up to some software to decide how to map colors, but to the user. If the software has this hard-coded (e.g. rendering intent hard-coded to perceptual) or not exposed to the user, then its color management is broken.

Unfortunately that’s difficult to notice in a side-by-side. Would be easier if we could open all three in tabs.

age · December 1, 2019, 6:35pm

I’ve downloaded your playraw and on my pc It looks as dark as the chrome rendering

spid · December 1, 2019, 6:43pm

As far as I can tell, embedded profiles are. That commit only applies to display profiles. So, presumably, Chrome converts from the image’s color space to a color space that has the monitor’s primaries and the sRGB tone curve.

XavAL · December 1, 2019, 9:32pm

Well, most probably I didn’t explain it right when I said I have a display with a wider gamut. In fact Displaycal says my profile covers 93.8% of the sRGB gamut:

sRGBcustom

My gamut is the one with the red primary touching the limits of human vision (the colored area). The other one is canonical sRGB (to be precise the one made by Elle Stone with gamma:2.2). As you may see, my profile exceeds the sRGB one in the red-green area, but falling short everywhere else. Anyway, I could say it looks better and brighter to me than the plain sRGB profile. Not sure if I’m splitting hairs here.

Then I would be grateful to know how can I set my custom profile in Chrome, and check if my display behaves as Chrome expects. Because right now, I only know how to force Chrome to color manage images with an sRGB profile.

XavAL · December 1, 2019, 9:50pm

Here they are:

Chrome rendering

RT rendering

Firefox rendering

As I said, this is with the system set to use an sRGB profile, and both RT and Firefox set to use the system profile. Chrome play solo

That was the first comparison I posted. Most probably you’re using a sRGB profile in your system (or close to it), and thus you see what Chrome renders by default (ignoring mostly everything you have set in your color managed workflow). Take a look at this comparison in a previous post.

As a note: I don’t really know if my screen currently shows the right colors, and I have no way of knowing it. But as far as I can tell, at least now I know that what I see in RT is rendered mostly the same in both Firefox and Chrome, and this means that (as a Firefox user) I’m not consistently underexposing the images I post (as most readers use Chrome, and it shows a darker image).

Will they see the images as I intended? I will never know, but at least now I won’t be systematically adding exposure errors.

EDIT: the server seems that doesn’t allow me to upload the Firefox rendering, I think because it essentially is the same as the Chrome rendering

Morgan_Hardwood · December 1, 2019, 10:35pm

The RawTherapee sample is vastly different from the other two. It’s not just a different rendering due to different primaries, it’s actually a different image - it has low-frequency halos the other images don’t, something which cannot manifest just as a result of broken color management as far as I know. I think your test case may be bugged…

spid · December 1, 2019, 10:44pm

To set your profile so that Chrome uses it, assign it to your monitor system-wide (how to do this depends on the OS but DisplayCAL can take care of it), and make sure that chrome://flags/#force-color-profile is set to “Default”.

Then, to see how far off Chrome is (at least within sRGB), you could use DisplayCAL’s verification tab with “Display” set to “Web @ localhost”, “Simulation profile” set to sRGB, and “Use simulation profile as display profile” checked.

(With Chrome’s color management enabled, DisplayCAL can only test how Chrome displays colors within sRGB because it sends its colors via CSS, which only supports sRGB colors until CSS Color Module Level 4 gets more traction. If the color profile in Chrome were set to “sRGB”, then it would pass the CSS colors to the screen unchanged, allowing DisplayCAL to measure the monitor’s whole gamut, but that’s not the point here: the point is specifically to verify how Chrome translates sRGB values into actual colors.)

XavAL · December 1, 2019, 11:00pm

Maybe it’s because those are screen captures and RT shows in the preview a close enough image to the real, exported image?

But even if I’ve made some mistake, or there is some setting incorrectly activated, the 3 renderings are much closer that those at the start of this thread.

I will look into that with another image, but will take me a few days

XavAL · December 1, 2019, 11:02pm

Thanks!

I will test all of it in my system, for sure, but in a few days… Tomorrow is Monday…

spid · December 1, 2019, 11:09pm

If you will allow a small tangent, I just remembered that I actually did something like that to test whether setting Chrome’s profile to “Display-P3” would be an acceptable substitute for a proper display profile on my phone, since Android does not allow the latter. And it turns out that it is! So I can enjoy normal colors when browsing the Web on my smartphone.

Morgan_Hardwood · December 2, 2019, 1:40am

Yes, that’s probably it. To eliminate the difference you could export the photo from RT to say a JPEG file, then open the JPEG file in RT, and only then take the screenshot.