AVIF files look desaturated in Firefox 98
Shnatsel opened this issue · comments
I have a source PNG I've convered to JPEG and to AVIF. I've opened all of them in Firefox 98 on Linux and noticed that the AVIF file looks desaturated compared to both the PNG and JPEG files.
These are the test files: cavif_color_test.gz
I have tried both RGB and YCbCr color space, with no effect.
Curiously, Chrome 99 on Linux shows all files as desaturated compared to Firefox, my native GTK-based image viewer, and emulsion which uses the png crate and OpenGL.
I see Firefox 92 is listed as not supported in the README. Does that apply to later releases as well?
This is most likely due to your PNG/JPEG files having an embedded ICC profile that changes their saturation. This tool discards ICC profiles, and expects all input files to be in the sRGB color space.
It's not related to AVIF itself, or AVIF support in the browser. The change happens the moment PNG/JPEG is loaded.
I may add ICC support to this tool later (in form of more accurate color-preserving removal of ICC, because ICC itself is an outdated concept). For now I recommend converting input files to sRGB, or stripping their ICC profiles for consistency.
Nope, stripping the ICC profile with neither pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB nor convert in.png +profile "*" out.png changed anything. So I don't think any color profiles are involved.
But there's a good chance this is just a Firefox bug, and unrelated to cavif.
Ok, that makes it interesting. Can you share these files?
The files are attached in the very first message. Direct link
The PNG is the source image, the others are transcoded from it.
I have not attempted using any other AVIF encoding tools to see if the difference persists.
I've checked these files, and unfortunately I can't reproduce the problem. In my Firefox 100 on macOS all four files have the same color. They look the same in Chrome too.
The desaturated display symptom sounds like your Firefox is interpreting AVIF as being in sRGB, and other images as in monitor's native color space.
Does this test pass for you? https://kornel.ski/en/color
Looks like it fails - there are some blocks, although they're barely visible:
I'd consider it a pass, since the differences could be a rounding error.
In the original issue, how much desaturation you mean? Some difference (1-2%) is expected due to color space conversions.
Can you make a screen shot with these images side by side?
Left to right: AVIF, JPEG 4:4:4, PNG, PNG in the native image viewer.
JPEG 4:2:0 didn't fit on the screen but is identical to the reference PNG in terms of saturation.
That is a significant difference, and the avif there looks wrong indeed.
I suspect AVIF goes through color management when other images aren't.
I can try making AVIFs with different color spaces, but generally I don't know if anything is wrong with the files. It can be a Firefox bug.
Does tweaking color management options in about:config help?
Flipping gfx.color_management.enablev4, gfx.color_management.force_srgb and gfx.color_management.native_srgb from false to true did nothing.
gfx.color_management.mode defaults to 2, I've tried setting it to 0, 1 and 3, also no changes.
It does seem likely that color management somewhere in the stack is the culprit - Chrome always renders this image this desaturated, regardless of the format.
And changes to color management didn't change presentation of the other images either?
I assume you have a wide-gamut monitor, or at least your OS thinks so. In that case I'd expect color management settings to affect saturation of "unlabelled" image formats depending on whether they're assumed to be in monitor's profile or sRGB that requires (desaturating) conversion to the monitor profile.
BTW, do you have AVIF files generated with other tools, that do look correct?
The latest GIMP has shipped with working AVIF export through libaom. Images created through it look the same as created with cavif-rs, so looks like the issue is not specific to one encoder.