[Firefox] website_suru_DARK jpeg's border is visible since the background color doesn't match

[nobuto-m]

Summary

Please see the following screenshots in Firefox and Chromium respectively. In Firefox, the jpeg's border is distinguishable from the background.

[Firefox]

[Chromium]

Steps to reproduce the behavior

1. Go to https://canonical.com/

Expected behavior

I suppose no border should be noticeable to users.

Screenshot

As above.

Browser/device details

Name	Firefox
Version	123.0.1
Build ID	20240304153655
Distribution ID	canonical-002
User Agent	Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0
OS	Linux 6.6.0-14-generic #14-Ubuntu SMP PREEMPT\_DYNAMIC Thu Nov 30 10:27:29 UTC 2023
OS Theme	Yaru / Yaru
Application Binary	/snap/firefox/3941/usr/lib/firefox/firefox

[immortalcodes]

Hi, I tried recreating this issue on firefox, but it doesn't seem to happen

[nobuto-m]

@immortalcodes So, I think it's about the color profile embedded into the JPEG image.

$ curl -s 'https://assets.ubuntu.com/v1/9469ef82-1_website_suru_DARK_25%20(1)122.jpg' | identify -verbose -
...

  Compression: JPEG
  Quality: 94
  Orientation: Undefined
  Profiles:
    Profile-icc: 3144 bytes
  Properties:
    date:create: 2024-07-30T09:14:45+00:00
    date:modify: 2024-07-30T09:14:45+00:00
    date:timestamp: 2024-07-30T09:14:45+00:00
    icc:copyright: Copyright (c) 1998 Hewlett-Packard Company
    icc:description: sRGB IEC61966-2.1
    icc:manufacturer: IEC http://www.iec.ch
    icc:model: IEC 61966-2.1 Default RGB colour space - sRGB
    jpeg:colorspace: 2
    jpeg:sampling-factor: 1x1,1x1,1x1
    signature: 701a862395853248a7c797751463ed3e657b98d1aeea86976a40465c61dab529

The image gets rendered in my Firefox with the edge color as #2a2a2a while the background color of the page is #262626(--vf-color-background-default).

If I strip the color profile and open it in my Firefox, the edge color gets rendered as #262626 expectedly.

Do we actually need to embed the color profile if it's an sRGB image?

[nobuto-m]

Overall there is work to do here. Please don't close it without taking a deeper look.

[immortalcodes]

Overall there is work to do here. Please don't close it without taking a deeper look.

Yes, you are right. I closed it when I wasn't able to reproduce it. I will take a closer look into it.

[nobuto-m]

It might be an "issue" specific Firefox when it comes to the interpretation of the color management profile embedded into JPEG. There are a bunch of reports or web pages talking about color management issues specific to Firefox.

In any case, stripping the color profile from the image and sticking to the default sRGB would be the easiest workaround.

[nobuto-m]

ref: https://addons.mozilla.org/en-US/firefox/addon/extended-color-management/

When color pass-through is enabled, Firefox does not make any changes to images or videos before they are passed to the operating system. When color pass-through is disabled, Firefox will use color management to attempt to correct colors in images and video.

And that will flip gfx.color_management.native_srgb from false (default) to true. When it's flipped, I don't see the border of the image visible on the web page. So it's definitely a color management thing.

[lyubomir-popov]

Given that most people will have firefox set at the default setting without this addon, the only thing I can think of is to ensure the image we display there has an embedded srgb profile (looks like the current one doesn't). Can you try with this one @akbarkz https://assets.ubuntu.com/v1/41749314-test_suru_1.png

[nobuto-m]

Given that most people will have firefox set at the default setting without this addon, the only thing I can think of is to ensure the image we display there has an embedded srgb profile (looks like the current one doesn't). Can you try with this one @akbarkz https://assets.ubuntu.com/v1/41749314-test_suru_1.png

Looks better than the previous one, the border of the image is no longer distinguishable. However, the quality of the gradation is worse than before.

current

proposed