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?
mwilliams | |
Aug 6 2020, 9:35 PM |
F32361590: Screen Shot 2020-09-23 at 7.46.19 PM.png | |
Sep 24 2020, 2:53 AM |
F32361587: Screen Shot 2020-09-23 at 7.43.11 PM.png | |
Sep 24 2020, 2:53 AM |
F32361593: Screen Shot 2020-09-23 at 7.49.29 PM.png | |
Sep 24 2020, 2:53 AM |
F32361513: Screen Shot 2020-09-23 at 4.54.50 PM.png | |
Sep 24 2020, 12:00 AM |
F32361511: Screen Shot 2020-09-23 at 4.56.11 PM.png | |
Sep 24 2020, 12:00 AM |
F31977468: images.jpg | |
Aug 6 2020, 10:38 PM |
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?
Subject | Repo | Branch | Lines +/- | |
---|---|---|---|---|
Programmatically generate responsive images for QuickView | mediawiki/extensions/WikibaseMediaInfo | master | +55 -6 |
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.
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
Change 627929 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Programmatically generate responsive images for QuickView
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?
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.
Here is a screenshot without Quickview
@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:
@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.