Page MenuHomePhabricator

Display images faster in Media Viewer
Closed, ResolvedPublic

Description

Right now, it can take several seconds to display images in the Media Viewer, because we're asking the server to resize the image at a custom size.

To speed up this image display, we will try to fetch the thumbnail size that is closest to 100% of the screen width but no more than 90% of the screen height (instead of asking the server to pre-render custom sizes, which is too time-consuming).

We would also start displaying the image as soon as it is available, without waiting for the meta-data to be loaded.


Version: unspecified
Severity: major
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=64135

Details

Reference
bz56695

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:14 AM
bzimport set Reference to bz56695.
bzimport added a subscriber: Unknown Object (MLST).

One could maybe preload the small image (scaled large by the browser) to give something for the user to look at well the big image is loaded.

(In reply to comment #1)

One could maybe preload the small image (scaled large by the browser) to give
something for the user to look at well the big image is loaded.

That's actually not a horrible idea. It would be a little like the olden days of progressive jpeg images. You could take the thumb that is already inline in the page and stretch it out to the new size as a placeholder while the larger image is fetched.

(In reply to comment #2)

(In reply to comment #1)

One could maybe preload the small image (scaled large by the browser) to give
something for the user to look at well the big image is loaded.

That's actually not a horrible idea. It would be a little like the olden days
of progressive jpeg images. You could take the thumb that is already inline
in
the page and stretch it out to the new size as a placeholder while the larger
image is fetched.

+1 I endorse this approach. Same technique can be used when resizing the window (or switching orientation on a tablet or mobile showing the desktop-mode site), if you find it's best to fetch a new full-size image for the new window size.

It should be fairly straightforward to nab the src property from the thumbnail, and since the resource is cached it'll display immediately... Then use an offscreen image element (you can just create it in JS, no need to add to the document) and wait for its onload (or onerror!) to fire before updating the visible image with the full-size src.

Don't forget to show a spinner on top of the temporary image. :)

Change 95282 had a related patch set uploaded by MarkTraceur:
Introduce image size bucketing

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

  • Bug 57325 has been marked as a duplicate of this bug. ***
  • Bug 58290 has been marked as a duplicate of this bug. ***

Change 95282 merged by jenkins-bot:
Introduce image size bucketing

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

Insofar as we are *able* to fix this bug in MMV, this is fixed.

If you want to talk about the thumbnail pipeline needing to be faster, please file a bug against core.

Gilles raised the priority of this task from High to Unbreak Now!.Dec 4 2014, 10:11 AM
Gilles moved this task from Untriaged to Done on the Multimedia board.
Gilles lowered the priority of this task from Unbreak Now! to High.Dec 4 2014, 11:22 AM