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

bzimport added a subscriber: wikibugs-l.
bzimport set Reference to bz56695.
Fabrice_Florin created this task.Via LegacyNov 6 2013, 10:28 PM
Bawolff added a comment.Via ConduitNov 6 2013, 10:48 PM

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.

bd808 added a comment.Via ConduitNov 6 2013, 11:30 PM

(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.

brion added a comment.Via ConduitNov 7 2013, 7:36 PM

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

gerritbot added a comment.Via ConduitNov 13 2013, 9:48 PM

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

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

MarkTraceur added a comment.Via ConduitNov 20 2013, 10:44 PM
  • Bug 57325 has been marked as a duplicate of this bug. ***
MarkTraceur added a comment.Via ConduitDec 10 2013, 10:01 PM
  • Bug 58290 has been marked as a duplicate of this bug. ***
gerritbot added a comment.Via ConduitDec 30 2013, 6:19 PM

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

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

MarkTraceur added a comment.Via ConduitJan 10 2014, 6:33 PM

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 added a project: Multimedia.Via WebDec 4 2014, 9:35 AM
Gilles raised the priority of this task from "High" to "Unbreak Now!".Via WebDec 4 2014, 10:11 AM
Gilles moved this task to Closed on the Multimedia workboard.
Gilles lowered the priority of this task from "Unbreak Now!" to "High".Via ConduitDec 4 2014, 11:22 AM

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.