Same on zhwiki

Same on idwiki and jawiki

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.

In T279645#6990123, @Legoktm wrote:

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.

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.

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):

In T279645#7902153, @Stang wrote:

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.

In T279645#8117638, @ori wrote:

In T279645#7902153, @Stang wrote:

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.

Thanks for the reply! I use zhwiki as an example here: they use a logo for calibration which size is 114K, and after gzip we got ~42K size icon. Also, currently in static/images/icons there's even a ~200K size icon (for wikinews) for years, so probably a ~100K svg file should not be considered as a problem. I would like to move forward on this.

I got tired seeing a blurry Wikipedia logo all the time and fixed it in my global.css

/* ⚓ T279645 Use SVG for Wikipedia logo rather than PNG (wgLogos['icon']). to avoid blurry logo in some displays */
.mw-wiki-logo.timeless-logo img {
	content: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg);
}

Retitled the task as this isn't about SVG. You can specify a 2x PNG URL and achieve the same result:

.mw-wiki-logo.timeless-logo img {
	content: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/200px-Wikipedia-logo-v2.svg.png);
}

Fundamentally what this comes down to, is Timeless trying to do too many things at once. It's an incompatibility between
two already hard to maintain designs, and trying to invent a third.

On the one side the MediaWiki standard of a 135px vertical logo, which site configuration provides low and high res variants of that compatible skins can render in their place of choice so long as it won't demand a larger size it'll remain sharp no matter the skin's layout.

On the other side there is Vector 22 introducing the new 50px height horizontal header, where by logos are split up into an "icon" and some unnamed wordmark+tagline concept (with neither the concept nor its sideways composition found anywhere in the Visual identity guidelines).

That's fine and all from a technical perspective, but then we have Timeless taking the icon out of the 50px horizontal composition, and blowing it up into a full size word-less square logo, and breaking even more guidelines by displaying the wordmark separately, this time without tagline, and over top of the icon, with a colored line and shadow in-between.

While Vector 22's logo change leaves some (imho) unanswered questions around some of the specific choices and implementation, broadly it seems reasonable to demand support for both a vertical and horizontal logo rendering. This third one though seems impractical support from core. Even if the skin configuration in core is fixed to support a 2x variant, it would still be 50% too small (instead of 75% too small), and would still be a departure from our visual branding. It's not an easy fix, but I would kind of lean toward helping Timeless adopt the square logo in its design so as to ease its adoption, both at WMF but also for other wikis out there. It might take a little juggle to figure out, but I think it's feasible to e.g. render the square over top by default, and then have the wordmark tage over when scrolling past that.

Below is an example of what that might look like. (I'm sure others can do it better with more than ten minutes effort!)

Related, with classic Vector skin: T358545