[v0.162.0] AVIF image processing strips/washes out colors on vector graphics

support
1

With the recent introduction of native AVIF support, I’ve noticed a significant color shift (loss of saturation/washed-out colors) when Hugo processes flat vector graphics or text-heavy banner images into AVIF.

For context, when processing a PNG banner with a deep purple/blue background, the resulting AVIF file strips away the richness of the purple, making it look dull and greyish compared to the original.

2

An example image would be quite helpful.

3

I added some more PNG to AVIF testcases with some vivid colors in Add some PNG to AVIF golden test cases by bep · Pull Request #14951 · gohugoio/hugo · GitHub

Which looks fine to me. But the devil is in the details, so

  • A sample would be great.
  • Also, if you can tell if there’s a difference when converting e.g. PNG to WebP vs PNG to AVIF.
4

That’s what I was trying to do here but my example site failed. Let me create a new site and get back.

5

If you just want a simple Hugo site up and running quickly, I would recommend you start with something ala:

The above is a template project, so just hit the green “use this template” button.

6

Here goes the test site. GitHub - bandulu86/test: failing examplesite · GitHub

Check posts 1 or 3 for the images.

7

I cannot see any difference. I’ve run this test site that uses your banner image on Windows 11 with different monitors, Ubuntu 24.04 with different monitors, and macOS.

git clone --single-branch -b hugo-github-issue-14896 https://github.com/jmooring/hugo-testing hugo-github-issue-14896
cd hugo-github-issue-14896
hugo server

EDIT: I see a slight difference in the banner image at the transition (border) between the two colors.

8

featuredhubaf9b5ccc1e32db7
featuredhubaf9b5ccc1e32db7640×360 2.2 KB

Here’s how my AVIF one looks on Firefox in Linux Mint. The purple background is brighter, and also slightly for the blue. I can also see the same on your first image
ff
ff828×249 8.29 KB

Edit: I think maybe Firefox is doing something to the AVIF image coz as @jmooring mentioned, all colours look similar on Brave. Strange!

9

FF had a bug re color space(s) in AVIF files:

It is said to be resolved, but perhaps it’s worth digging around the color space in your file(s).

10

I viewed this in all of Chrome, Safari and Firefox on my MacBoo, and they all looked the same to me.

11

Could be related.

As I indicated, it seems like an issue specific to my FF. Might switch to Brave.

12

Gemini AI suggested the following:

> Open Firefox and type about:config in the address bar. Accept the warning.
> Search for gfx.color_management.mode.
> Double-click it and change its value to 1 (this forces full color management for all web elements, untagged images, and CSS).

This actually worked. I remember having this issue on Brave last year and I also had to change the colour profile (which appears fixed in Brave now). Strange! Will diagnose this further with the Linux Mint team.

And the Problem is with Linux Mint! I had to set a colour profile at color>Add profile>Artifex Software sRGB ICC Profile. Then reboot the system.

13

Weird. This is supposed to be fixed since 6 years and the config setting no longer needed:

and with FF on macOS, the gfx.color_management.mode is set to 2 by default.

14

Looking at Brave, I think the standard browsers shower the purple/blue as lighter by default for all cases, while in my case, Firefox shows the colours for PNG and WEBP darker, but the AVIF as lighter. The purple is #4c04a9 while the blue is #0284c7.

Maybe, because I have not used a Chromium browser in over a year, I did not notice the difference.