Page MenuHomePhabricator

Blurry images on new staff page
Closed, ResolvedPublic

Description

The images on the new staff page are blurry compared to images on other websites, including the old staff page.

This is due to the thumbnails only having a 1dppx thumbnail specified, whereas standard practice nowadays is to at least have a 2dppx size as well (preferably 1.5x, 2x, and 3x).

1dppx means 1 physical dot per logical pixel on the screen, and refers to how digital screens used to have a resolution of 96 dpi (retroactively called 1 dppx), but nowadays more finer resolutions are used with. Most mobile devices having resolutions between 200 and 600 dpi. To avoid showing (older) content with smaller images than expected, such images are stretched 2x or 3x to size by browsers to accomodate the number of pixels these screens have in the same physical space.

The standard practice for specifying higher resolution images on the web is by using the <img srcset> attribute to specify, in addition to the 1ddpx size in <img src>, also a 1.5x and 2x size variant.

CMSes like MediaWiki and WordPress has built-in mechanism for this, so this should be fairly straight-forward to accomodate.

Current (1 dppi)Expected (2 dppi)
Screen Shot 2018-08-02 at 05.13.44.png (572×328 px, 207 KB)
Screen Shot 2018-08-02 at 05.13.34.png (572×344 px, 227 KB)

Event Timeline

Varnent subscribed.

Done to help manage bandwidth.

Done to help manage bandwidth.

Automattic don't have enough bandwidth to host reasonable quality images?

End user bandwidth and loading speed.

End user bandwidth and loading speed.

This is due to the thumbnails only having a 1dppx thumbnail specified, whereas standard practice nowadays is to at least have a 2dppx size as well (preferably 1.5x, 2x, and 3x).

So include multiple different types and the devices will load the appropriate one?

Varnent triaged this task as Low priority.

We can make the request in future technical updates.

We can make the request in future technical updates.

Thanks! Later is much better than declined :)

We can make the request in future technical updates.

Thanks! Later is much better than declined :)

I do not want to give false hope. We may not implement the request - but we will discuss it. :)

End user bandwidth and loading speed.

Hmm, to me it just looks unprofessional to have vague images. It's really noticeable both on my iPhone and my Mac. I sort of understand with multi megabyte images, but these are under 35Kb most of the time.

End user bandwidth and loading speed.

Hmm, to me it just looks unprofessional to have vague images. It's really noticeable both on my iPhone and my Mac. I sort of understand with multi megabyte images, but these are under 35Kb most of the time.

+1. I agree it looks unprofessional. I also don't understand why the images were converted from landscape to portrait, leading to inconsistencies (some images are cut-off while others don't have people at the same height).

Hello - I believe this ticket has been resolved with the updated design we released this week - which I invite you to checkout at: https://wikimediafoundation.org/
I am closing the ticket, but please let me know if it is not resolved on your end. Thank you!