Page MenuHomePhabricator

Use SVG for Wikipedia logo rather than PNG (wgLogos['icon']). to avoid blurry logo in some displays
Open, LowPublic

Description

In the timeless skin, the Wikipedia globe icon is blurry. It can also become blurry at large font-sizes in new Vector.

As reported by John123521 on enwiki in: https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1016615880#The_logo_looks_blurry_in_Timeless_skin

See live view: https://en.wikipedia.org/w/index.php?title=Main_Page&useskin=timeless

Same on enwiki, eswiki, dewiki

  • PNG icon needs to be replaced with 2x size PNG

Event Timeline

Perhaps @Isarra may have some insight in to this?

It's because of T273250: $wgLogos['icon'] notext logo set for newvector is too small to use in Timeless, except we went ahead and used it anyway out of pure spite. Or, more likely, laziness/lack of resources?

Like why would any project still be using rasters in this day and age?!

Pinging in some additional resources that may have insight here, and who certainly don't want us making hack-arounds about logo files
@Legoktm @Jdlrobson

I'll defer to Isarra and co. on the correct way to solve this...it's unclear to me why $wgLogos['icon'] is a single png and not an array with 1x/1.5x/2x/svg options like the main logo does.

I'll defer to Isarra and co. on the correct way to solve this...it's unclear to me why $wgLogos['icon'] is a single png and not an array with 1x/1.5x/2x/svg options like the main logo does.

I believe the idea was to deprecate all these variants in favour of svg-only, as all supported browsers support this now, good logo design typically results in relatively small svg filesize, and the security concerns that justify converting user-uploaded files shouldn't apply to a site logo. I assume the issue with Wikipedia, however, is that the svg version of that logo is unusually large due to the complexity of the globe, so to reduce the filesize they used a double-size png sized specifically for newvector, but as a result it doesn't render properly in any other skins attempting to use it (at this point only Timeless)? @Jdlrobson might be able to comment specifically.

Jdlrobson renamed this task from Project logo is blurry in timeless to Use SVG for Wikipedia logo rather than PNG (wgLogos['icon']). to avoid blurry logo in some displays.Apr 14 2021, 3:17 PM
Jdlrobson updated the task description. (Show Details)

Current PNG file is 13.1KB, and if it is replaced by SVG file, the size is 100.5KB.
There is indeed a big difference so waiting for comments from experts in this area.

Change 788892 had a related patch set uploaded (by Stang; author: Stang):

[operations/mediawiki-config@master] Update Wikipedia icons to SVG format

https://gerrit.wikimedia.org/r/788892

Also used in vector-2022 so add relevant tag.

FYI @alexhollender there is patch to switch from PNG to SVG. Tagging performance team as this SVG is considerably larger than PNG. @Stang please could you hold off deploying this patch until we've had a chance to provide feedback on this?

Performance team: Could you let @Stang know what you would recommend here regarding converting the 13kb PNG to 100kb SVG? From a product perspective, an SVG looks better. Seems like this would only impact Timeless and legacy modern Vector and obviously, our focus is on making modern Vector default everywhere for now so but this is not a web team priority.

(Edited after @Stang follow up)

Seems like this would only impact Timeless and legacy Vector and obviously our focus is on making modern Vector default everywhere for now so this is not a web team priority.

In fact it has impact on Timeless and Vector-2022, legacy Vector use a different file for logo.

Krinkle added a subscriber: Krinkle.

Our recommendation indeed is to follow the same practice as we do for our default skins: Use a 2x PNG for HiDPI of the Wikipedia globe, given that the original source SVG is quite detailed and high in transfer size and client-side rendering complexity.

The future of simplified interface icons that we bundle with the software, is definitely in SVG (and even embedded SVG data URIs). However, user-generated diagrams and logos will generally benefit from pre-rendered PNGs and I do not expect this to change in the future. There may be a small number of cases of first-party logos such as wordmarks or very simple flat-design shapes where an SVG can be used everywhere, but that's the exception rather than the rule. We can't consider that in software design given that we have to support all WMF wikis and third parties, not just e.g. wikidata.org and its (technically) simple logo. It needs to support Wikipedia and the wider ecosystem as well. It doesn't make sense, I think, for us to mandate that third parties redesign their brand in order to continue to serve a performant and high-resolution logo when using New Vector.

Thanks @Krinkle for weighing in here! @Stang please feel free to replace PNG with 2x size PNG.

It is my understanding that the new icon field does not currently support a 2x PNG. For this to work, you'd first need to add support for this, e.g. something like wgLogos['icon'] and wgLogos['icon-2x'], and take this into account in the code that consumes it. Given that New Vector consumes this as an img instead of background-image, it needs to also have a new formatter that produces a value compatible with <img srcset>.

Firstly sorry for my confusion. It seems that Vector already uses a 2x PNG for a 50x50 image so the logo is 100x100. Timeless uses the logo but renders it at 100x100. So we could use a 200x200 png here but that would mean rendering Vector at 4x. @Stang how big would a 4x icon be?

I don't think this is necessarily a high priority right now but I know we have SVG to PNG rendering in ResourceLoader and perhaps that's worth investigating here (e.g. having the SVG as the canonical and deferring to skins to convert to PNG).

Currently $wgLogos contains 1x, 1.5x and 2x for handling Logo on different devices with different DPI setting, and I think the idea here is to develop two new field called icon_1.5x and icon_2x, which has the similar function with original logo. And I noticed the icon should have width and height set to 100px for scalar image, so icon_1.5x and icon_2x should be 150×150/200×200 squares. However, I have difficult understanding how icon key in $wgLogos array being processed: seems config is passed to getAvailableLogos function in includes/resourceloader/ResourceLoaderSkinModule.php, but I failed to find how icon is handled here...

For the size of PNG file, that's definitely not an issue here. I use commands provide at here to generate PNG file from this SVG file, and the size of 100×100 icon is 6.48KB, 150×150 is 11.2KB, 200×200 is 16.4KB.

It seems that Vector already uses a 2x PNG for a 50x50 image so the logo is 100x100.

I don't think so - modern Vector displays the logo at a size of 50x50, but both modern Vector and Timeless use the same file (100×100).

Currently $wgLogos contains 1x, 1.5x and 2x for handling Logo on different devices with different DPI setting

Right but these are not being used for skins going forward. When adding icon we previously made the decision to require an SVG and not add 1x, 1.5x and 2x variants. At some point we'll hoping to remove 1x, 2x, svg and replace with icon.

I don't think so - modern Vector displays the logo at a size of 50x50, but both modern Vector and Timeless use the same file (100×100).

https://en.wikipedia.org/static/images/mobile/copyright/wikipedia.png is a 100x100 PNG from what I can see? Vector 2022 displays this at 50x50.

Could Timeless just use a 50x50 PNG instead of 100x100 ? That seems like the easiest path and it doesn't look terrible (before and after):

Screen Shot 2022-06-07 at 10.00.12 AM.png (876×2 px, 679 KB)

Screen Shot 2022-06-07 at 10.00.04 AM.png (842×2 px, 593 KB)

Current PNG file is 13.1KB, and if it is replaced by SVG file, the size is 100.5KB.

That's a bit misleading. The pixel data inside the PNG is compressed with Deflate (gzip) and cannot be compressed further. The SVG is uncompressed but highly compressible using HTTP compression. After using SVGO to reduce the precision slightly I can get the SVG down to 30k gzipped.