Page MenuHomePhabricator

Load smaller images in Media Viewer
Open, Stalled, LowestPublic

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/302

Narrative

As a user, I want to load images faster, even if it means I see lower resolution versions.

Acceptance Criteria

Many of the images shown in Media Viewer are quite large (e.g.: over 2Mb), which takes a long time to load from scratch (if nobody has pre-loaded it already).

Instead of loading these high resolution files in the lightbox, try loading the next size down, to match their browser window size, rather than their screen size. Even that smaller size is only 20% less than the current size, it is likely to take less time to load, and every second counts.

Treat the full-screen mode as a separate case from the lightbox mode, so we can load a smaller image for the lightbox mode. Since the full-screen button is not used often (e.g. 9% of thumbnail clicks), we can afford to reload a larger version of the file when the user clicks on the full-screen button.

It may also be possible to serve even smaller files if we find that the user has a really slow connection: we can detect the user’s connection speed by measuring how long it takes them to load a file.

<u>Note</u>: Images continue to take too long to load to provide an acceptable user experience for Media Viewer as a default feature, as shown on low-traffic category pages like this one . If an image has not been previously viewed by another user, it can take 5 to 10 seconds to load the full image, during which you have to watch a blurry thumbnail. This doesn't match user expectations of 1-2 seconds per image, as typically provided on top multimedia sites.

Related Bugs

Related Stories

#8 Media Viewer

#301 Pre-render thumbnails on the back-end

Related Changesets

Event Timeline

MingleTerminator raised the priority of this task from to Normal.Dec 8 2014, 4:53 PM
In mingle on 2014-03-13 at 02:44:11, @Tgr wrote:

We should differentiate between two cases here:

  • image loading takes long because connection is slow. 20% less image size means 40% less pixels, which means 40% less download time - a good improvement.
  • image loading is slow because the thumbnail has not been rendered yet. Thumbnail rendering time will probably be determined by the original image size (depends on the specific algorithm used, but that's what I would expect), so time gain would be minimal.

Given that downsampling an image does not cause any visible quality degradation on a modern browser, but upsampling tends to look ugly, I doubt this would be worthwhile.

In mingle on 2014-03-13 at 17:36:11, aarcos wrote:

Blocked on more analytics.

Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:29 PM
Restricted Application added a subscriber: Matanya. · View Herald TranscriptSep 4 2015, 6:29 PM

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Jdlrobson changed the task status from Open to Stalled.Dec 21 2015, 4:56 PM
Jdlrobson added a subscriber: Jdlrobson.
Jdlrobson lowered the priority of this task from Normal to Lowest.Jul 7 2016, 4:53 PM
Jdlrobson added a project: Design.
Jdlrobson moved this task from To Triage to Needs Analysis on the Readers-Web-Backlog board.
simon04 moved this task from Backlog to Design on the MediaViewer board.Jun 10 2019, 7:12 AM