Page MenuHomePhabricator

Image tag for enwiki project logo should specify dimensions and use a stable URL
Closed, ResolvedPublic

Description

The logo in the footer of the mobile version of the English Wikipedia does not specify dimensions. It is styled to have a height of 1em. To lay it out, the browser has to fetch the image, determine its pixel size, and scale it to match the CSS, which slows down rendering.

It is also served from a volatile URL which includes the branch name. You might want to use "static-current" instead (i.e., https://bits.wikimedia.org/static-current/extensions/MobileFrontend/images/logo-copyright-en.png)


Version: unspecified
Severity: minor

Details

Reference
bz58886

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:21 AM
bzimport set Reference to bz58886.
bzimport added a subscriber: Unknown Object (MLST).

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Mingle card https://wikimedia.mingle.thoughtworks.com/projects/mobile/cards/1574

I think it also meant to be slightly bigger to look nice on retina displays.
I guess what you are saying is rather than specifying the height in ems we specify it in pixels?

In terms of volatile URL, this is all done in config...

I'm guessing the offending line is:
$wmgMFCustomLogos['copyright'] = str_replace( '{wgExtensionAssetsPath}', $wgExtensionAssetsPath, $wmgMFCustomLogos['copyright'] );

Would it be better to use an absolute URL here? Considering this is on every page we should be careful where this image is hosted...

Waiting on a response from Ori

jgonera wrote:

Ori, is this really a performance issue? I can't imagine one image slowing down rendering significantly.

(In reply to Juliusz Gonera from comment #4)

Ori, is this really a performance issue? I can't imagine one image slowing
down rendering significantly.

Those are two different questions. It's worth the effort to fix, if that's what you're asking.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions
http://www.feedthebot.com/pagespeed/image-dimensions.html

So it sounds like we just need to use getimagesize and add the image width and height to SkinMinerva::getSitename function

Should be easy to do so let's just do it.

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/wNb5TP4s

Change 174218 had a related patch set uploaded by Bmansurov:
Add footer logo dimensions

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

Change 174218 merged by jenkins-bot:
Add footer logo dimensions

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

Change 174585 had a related patch set uploaded by Kaldari:
Adding Wikipedia wordmark for mobile and switching to it

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

Change 174585 merged by jenkins-bot:
Adding Wikipedia wordmark for mobile and switching to it

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

Fixed on test.wiki. Should go out to en.wiki soon.