Page MenuHomePhabricator

[M] Media search: Using wrong size thumbnails
Closed, ResolvedPublic

Description

I am getting a lot of blurry images in the result set and in the quick view both on desktop and mobile.

Are we choosing one size too small of thumbnail? If we bump up the size of the images, how much will that hurt performance?

images.jpg (778×2 px, 467 KB)

Event Timeline

We could look at making the images more responsive by requesting multiple thumbnail sizes from the API and using a srcset attribute; this would let us load a better thumbnail source if the image element hits a certain size on the page. This approach isn't supported in IE but can be handled as a progressive enhancement (old browsers will just ignore these rules, but newer browsers can use them).

We would need to keep an eye on performance and make sure we are not loading way too many thumbnails, since we are already hitting some rate limits however.

CBogen renamed this task from Media search: Using wrong size thumbnails to [M] Media search: Using wrong size thumbnails.Aug 26 2020, 4:33 PM

Note that we'll need to pay attention to images in the QuickView panel on mobile, especially at something like an iPad viewport width, since the image is 100% device width. This could cause an issue if the thumbnail is too small, or if the original image is smaller than the viewport width. Might need to play around with the design a bit.

Change 627929 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Programmatically generate responsive images for QuickView

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

Change 627929 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Programmatically generate responsive images for QuickView

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in commons betalabs - moving to check in production.

Checked in commons wmf.10 - as far as I could see, Quickview always provide an image with high resolution. But the grid does have low resolution images. Both of the screenshots below show that - and sometime the difference is quite noticeable. @mwilliams - should there be some follow ups?

Screen Shot 2020-09-23 at 4.54.50 PM.png (672×1 px, 943 KB)

Screen Shot 2020-09-23 at 4.56.11 PM.png (654×1 px, 665 KB)

Quick view images are looking good, but I agree that the images in the grid still seem low resolution . @egardner is this expected?

@Etonkovidova are they still low resolution when the quick view isn't open? I wonder if the grid images got larger and lower resolution in your screenshots due to the quick view making them 1 per row.

@Etonkovidova are they still low resolution when the quick view isn't open? I wonder if the grid images got larger and lower resolution in your screenshots due to the quick view making them 1 per row.

Here is a screenshot without Quickview

Screen Shot 2020-09-23 at 7.43.11 PM.png (586×1 px, 1 MB)

@mwilliams - you're right - the grid images without Quickview look ok cause they are smaller and are placed among other images, e.g. compare the image of Milton Whitney when it's just in the grid and when it's in the Quickview:

Screen Shot 2020-09-23 at 7.46.19 PM.png (602×1 px, 1 MB)
Screen Shot 2020-09-23 at 7.49.29 PM.png (665×1 px, 907 KB)

@Etonkovidova This is a big enough improvement that I wouldn't block this from being released but yeah, seems like we have a bit more work to do on this.

@mwilliams we've been talking about work to further refine the grid layout anyway – it might be good to include a sub-task about changing the thumbnail resolution globally.

The patch here only touches Quickview images (which were the worst offenders).

Agree with the above comments - the scope of this task includes Quickview images fixes which was done.