Page MenuHomePhabricator

PNG/WebP thumbnails of SVG images have color issues in Firefox
Closed, InvalidPublic

Assigned To
None
Authored By
Jc86035
Nov 19 2017, 10:47 AM
Referenced Files
F28367876: Screenshot 2019-03-11 at 9.55.46 PM.png
Mar 11 2019, 1:59 PM
F28367811: Screenshot 2019-03-11 at 9.32.30 PM.png
Mar 11 2019, 1:42 PM
F28367810: Screenshot 2019-03-11 at 9.32.04 PM.png
Mar 11 2019, 1:42 PM
F28367809: Screenshot 2019-03-11 at 9.31.53 PM.png
Mar 11 2019, 1:42 PM
F28367744: BSicon_exSTR.svg
Mar 11 2019, 1:26 PM
F28367742: 40px-BSicon_exSTR.svg.png
Mar 11 2019, 1:26 PM
F28367743: 40px-BSicon_exSTR.svg.webp
Mar 11 2019, 1:26 PM
F28367787: Capture d'écran 2019-03-11 14.24.38.png
Mar 11 2019, 1:26 PM

Description

Unlike other images, WebP images do not have colour correction applied in Firefox. This causes visual issues when images using the same colours are used next to each other or overlaid, because only some (but not all) upload.wikimedia.org PNG thumbnails are served as WebP.


Original description

I've just uploaded File:BSicon RACONTgq.svg. The colours I've used are F00 and FF0, which should be interpreted as FF0000 and FFFF00, but librsvg colours them differently. Even more confusingly, File:BSicon RAl.svg uses the six-digit colours, but the rendering still uses the incorrect colours, and only in Firefox 57 and not in Tor Browser (Firefox 52 ESR) or Safari 11. This could be a Firefox bug or because of a change in how librsvg works. The below file description pages look identical on Tor Browser and Safari but don't on Firefox 57 (I cleared my cache twice and it persists).

BSicon RAr (2017)BSicon AKRZrf (2011)
Screenshot-2017-11-19 File BSicon RAr svg - Wikimedia Commons.png (1×1 px, 34 KB)
Screenshot-2017-11-19 File BSicon AKRZrf svg - Wikimedia Commons.png (1×1 px, 35 KB)

Event Timeline

Jc86035 triaged this task as Medium priority.Nov 19 2017, 10:53 AM
Jc86035 updated the task description. (Show Details)
Jc86035 updated the task description. (Show Details)
Jc86035 updated the task description. (Show Details)
Aklapper lowered the priority of this task from Medium to Low.Nov 19 2017, 7:02 PM

It sounds like you're trying to check the colors via printscreen/screenshot or by a color picker that is in the web browser. This is not a good way to check the colors due to the way programs and computers generate colors, there are a lot of factors that come into play.

I opened the generated raster images 500px-BSicon_RACONTgq.svg.png and 500px-BSicon_RAl.svg.png in photoshop and I'm showing the colors #FFFF00 and #FF0000.

@Offnfopt Regardless, the difference in rendering is still an issue because BSicons are usually juxtaposed with each other in Wikipedia articles, so the colour change between icons uploaded before April 2017 and after March 2017 is minor but nevertheless visible. The easiest way to fix this would be to force every SVG on Commons to be re-rendered, but I'm not sure if that's possible without reuploading every single file.

No action is presently needed since I have purged all of the BSicon files myself with pywikibot, but it would be nice to have the renders automatically redone upon librsvg updates.

Aklapper raised the priority of this task from Low to Needs Triage.Mar 10 2019, 6:58 PM

@Jc86035: It's unclear to me why the task says it's librsvg that is doing something wrong (and not e.g. the SVG rendering code in Firefox, given that other browsers do not expose the problem). Could you explain please?

I also seem to fail to reproduce locally, but my local libsrvg version is newer than the one on Wikimedia servers:

Screenshot from 2019-03-10 19-54-27.png (1×824 px, 91 KB)

@Aklapper I don't know if the original issue is still relevant, since this may have been some sort of normally-invisible librsvg change that made Firefox start applying colour correction. However, starting with Firefox 65, there is still an issue with non-matching colours, which only occurs because certain files (and only at certain thumbnail sizes – 20px, 30px and 40px) are being served as WebP.

Firefox 65Internet ArchiveFirefox 60 / Tor BrowserSafari 12wget
40px-BSicon_exSTRr.svg.png.1 (40×40 px, 657 B)
40px-BSicon_exSTRr.svg.png.2.png (40×40 px, 657 B)
40px-BSicon_exSTRr.png (40×40 px, 657 B)
40px-BSicon_exSTRr.svg.png.2 (40×40 px, 657 B)

I have no idea why the server is doing this for a very particular set of BSicons. It could be related to frequency of usage, since rarer images don't seem to ever be served as WebP, but there might not be a particularly strong correlation.

File:BSicon [ID].svgUsesWebP at 40px?
STR37948Yes
exSTR13930Yes
WASSERq13543Yes
exHST10987
STRc49735Yes
uSTR8841Yes
FLUG6938
utSTR6028
exKBHFe5656Yes
STR+14947Yes
uhKRZWae3172Yes
uKBHFe2749
exABZg+l2733Yes
BS2l2539
BS2r2410Yes
exTUNNEL12174
STR+c42102
STR~R1644
STR~L1546Yes
uLSTR1191Yes
exKDSTeq1180Yes
KDSTxe1002Yes
utCONTg966Yes
uhKRZW918Yes
vSTR+1-764Yes
uKRW+l459Yes
uKRWgr346
uKRZt162
uhBHFe112
eKRZu+r20
exSTR+r~L18

I drafted a Phabricator bug report but decided to file one to Mozilla's bug tracker first (after posting to Wikipedia:Village pump (technical) on enwiki), and was bluntly informed that this was an issue with the Wikimedia server.

Firefox does not convert between image formats !
The server converted the image to webp and send the webp image to Firefox for the requested URL !

I think this may warrant a different bug report but I'm still not sure if this is the same issue. The downloading issue will no longer appear in Firefox 66 but the colour mismatch issue could.

Would it be possible or appropriate to turn this off for BSicons, or even all PNGs?

Alternately, would it be possible to turn this on for all BSicons? There are about 110K of them, so this may be an issue.

(Also, it could be appropriate to turn it off until after Firefox 66 is released, since there are a lot of Firefox users who are currently unable to save loaded PNGs.)

Using one of the files you've mentioned https://commons.wikimedia.org/wiki/File:BSicon_exSTR.svg

Opening the SVG, the PNG thumbnail we generate at 40px and the webp thumbnail we generate at 40px, the color of the stroke is exactly #d77f7e in all three of them (verified in GIMP). Files attached here for reference:

40px-BSicon_exSTR.svg.png (40×40 px, 301 B)

Displaying all 3 formats together on an HTML page, no difference in Firefox 66:

Capture d'écran 2019-03-11 14.24.38.png (394×60 px, 4 KB)

This was tested on Firefox 66/MacOS 10.14.3

@Gilles What Firefox displays is different to what GIMP displays because (as far as I understand it) Firefox applies some sort of colour correction to PNGs but not WebP images. No one is viewing the pages in GIMP.

As tested in Firefox 66.0b14:

Screenshot 2019-03-11 at 9.32.30 PM.png (438×812 px, 84 KB)
Screenshot 2019-03-11 at 9.31.53 PM.png (362×434 px, 49 KB)
Screenshot 2019-03-11 at 9.32.04 PM.png (410×492 px, 64 KB)

These are screenshots from Template:Bristol and Gloucester Railway Line. I used Firefox's built-in colour picker on the row above "Lawrence Hill", and I used the built-in macOS screenshot function to make the screenshots. The difference is large enough to be visually noticeable for me.

(The middle image is actually enough to demonstrate the difference, because a PNG image is overlaid above a WebP image in the diagram.)

  • In Chrome/Chromium, there is a very slight colour difference between .svg.png and .svg.png.webp thumbnails; the colours above are actually shown as #b03730 and #af3a33 respectively. However, because Firefox applies no colour correction at all to WebP files, the difference is more jarring.
  • In Safari, the webp file is not recognized and Safari tries to download the file. (macOS does not seem to support WebP files natively.)
  • Tor Browser (Firefox 60.5.1esr) does the same, since WebP support was added in version 65.

Below is Chrome's rendering of part of the same diagram. The difference is much subtler, and I didn't notice it at all.

Screenshot 2019-03-11 at 9.55.46 PM.png (146×158 px, 10 KB)

Should we expect Firefox to apply colour correction to WebP files?

We should expect browsers to render identical color information identically, irrespective of the image format it's expressed in... What we get from GIMP by looking at the files directly is the reference and we're getting identical color values between the 3 formats we're serving. If there are color rendering discrepancies when displayed, it's a browser bug.

At least the mix-and-matching of WebPs and PNGs in those diagrams will go away eventually, as we are working on serving WebP variants to WebP-capable clients for all images, not just the high traffic ones. Currently blocked by this ongoing task: T211661: Automatically clean up unused thumbnails in Swift which I hope to complete this year.

Jc86035 renamed this task from librsvg does not handle RGB colours correctly to PNG/WebP colour issues in Firefox.Mar 11 2019, 2:10 PM

Would it be appropriate to file another Firefox bug? I can't find an existing ticket for this, although maybe it's because I'm using the wrong keywords.

Aklapper renamed this task from PNG/WebP colour issues in Firefox to PNG/WebP thumbnails of SVG images have color issues in Firefox.Mar 11 2019, 2:19 PM
Aklapper removed a project: Wikimedia-SVG-rendering.

Certainly. You should provide the identical webp and png after having verified that they contain the same color information in GIMP, Photoshop or any tool of that nature, and a screenshot showing that they render differently side-by-side in Firefox.

Jc86035 renamed this task from PNG/WebP thumbnails of SVG images have color issues in Firefox to PNG/WebP colour issues in Firefox.Mar 11 2019, 2:21 PM
Jc86035 renamed this task from PNG/WebP colour issues in Firefox to PNG/WebP thumbnails of SVG images have color issues in Firefox..
Jc86035 renamed this task from PNG/WebP thumbnails of SVG images have color issues in Firefox. to PNG/WebP thumbnails of SVG images have color issues in Firefox.
Jc86035 updated the task description. (Show Details)

Are we sure that the ICC and/or sRGB info is equal between the two thumbs as well ? Because that too could cause browser side differences of course. especially if browsers support one of those and not the other..

No ICC profile in any of these, because SVGs don't have color profiles.

In my understanding https://bugzilla.mozilla.org/show_bug.cgi?id=1534997#c2 confirms that this is Firefox specific behavior which should be changed in the future, hence closing this task as it's out of Wikimedia's scope to fix this behavior.

I'm glad that the issue has been acknowledged by Mozilla. Thanks for your thorough reporting work both on our end and theirs, @Jc86035