Page MenuHomePhabricator

Add image: Set a minimum width for image suggestions
Closed, ResolvedPublic

Description

Problem
Per T295922: [testwiki-wmf.9] Add image - small size image breaks caption box, very low resolution images cause display issues on captions, as well as being undesirably low quality for a lead image in an article.

Proposed solution
We should not allow the user to do image suggestions where the resolution of the suggested image is too low. On arriving at the suggestion, they should see the dialog that tells them no suggestions are available and brings them back to the suggested edits feed.

The threshold will be a minimum width of 100px.

In the future, this could be part of the upstream image algorithm.

Event Timeline

RHo added a subscriber: MMiller_WMF.

fyi @MMiller_WMF - I've created a proposed min width on the task.

Configurable values in the upstream algorithm logic would be complicated.

We probably want filtering at the quality gate level as well. That could be configurable but it's just a short-term workaround so I'm not sure there's a point.

@RHo -- could you include an explanation for how you choose 240px? So that we'll know in the future? I'm worried that might be too large -- just based on me looking at this preview thumbnail, which is 240px in height: https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Werkstattreihe_gemeinsam_f%C3%BCr_ein_starkes_Deutschland%2C_K%C3%B6ln-3539.jpg/320px-Werkstattreihe_gemeinsam_f%C3%BCr_ein_starkes_Deutschland%2C_K%C3%B6ln-3539.jpg

MMiller_WMF added subscribers: mewoph, Sgs, kostajh, DMburugu.

@RHo -- I changed this to be a task about what we want to do for Iteration 1, and we'll include the filtering upstream in the future version of the API. Please let me know what you think about my question above.

kostajh triaged this task as Medium priority.Nov 23 2021, 9:16 AM

@RHo -- could you include an explanation for how you choose 240px? So that we'll know in the future? I'm worried that might be too large -- just based on me looking at this preview thumbnail, which is 240px in height: https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Werkstattreihe_gemeinsam_f%C3%BCr_ein_starkes_Deutschland%2C_K%C3%B6ln-3539.jpg/320px-Werkstattreihe_gemeinsam_f%C3%BCr_ein_starkes_Deutschland%2C_K%C3%B6ln-3539.jpg

Sure, my reasoning was based on making sure an image that is the lead section still is at a reasonable 2/3rd size of the screen even on smaller device sizes (basing this on 360dp being a fairly standard smaller device resolution), but actually looking at some examples and the template, the default sizing seems to be 220px which is not much off my original recommendation.

image.png (336×232 px, 15 KB)

FWIW here's some mocks at a few different resolutions for comparison:

Min width240px220px150px96px
Example with matching real image sizes
image.png (2×720 px, 174 KB)
image.png (2×720 px, 342 KB)
image.png (2×720 px, 133 KB)
image.png (2×720 px, 145 KB)
Example with same 288x288px image scaled to different min. widths
image.png (2×720 px, 119 KB)
image.png (2×720 px, 121 KB)
image.png (2×720 px, 113 KB)
image.png (2×720 px, 114 KB)

Whilst seeing that the default is scaling down to 220px when a thumb width is not still makes me includes to go with a ~200px width as a good minimum to weed out most bad images. However, looking in the mocks above and also other IRL examples of narrow portrait images like the pastry fork (90 x 310px) and Tamburica (75 x 397px) articles, I agree there will likely be some suitable images even with narrower caption that would be cut out. I guess @MMiller_WMF it depends on how much we want to entrust newcomers to naturally say 'no' to poor quality low res images in V1, but IMO the absolute lowest would be the 90-100px.

Okay, thanks @RHo. Because this is our first iteration and we want to be open to learning, I think we should go with a lower resolution. I'm changing the task description to 100px.

Change 741099 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Add an image: set a minimum width for image recommendations

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

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/bfff2de526/w/

Change 741099 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: set a minimum width for image recommendations

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

Testing in testwiki wmf.12 - I came across the following example: Picto_infobox_reptile.png ‎(123 × 45 pixels, file size: 3 KB, MIME type: image/png). The image is above 100 px but has the display issue when added to an article via the add image inspector.
(the screenshots from Samsung Galaxy )

The small-size image is present in the add image inspectorClicking 'yes' - the img is not presentPublished - the img is not presentWhen searching- the img is not present
Screenshot_20211207-164655_Chrome.jpg (2×1 px, 403 KB)
Screenshot_20211207-164640_Chrome.jpg (2×1 px, 362 KB)
Screenshot_20211208-102358_Chrome.jpg (2×1 px, 431 KB)
Screenshot_20211208-102347_Chrome.jpg (2×1 px, 259 KB)

Note: commons wiki also has problem to display the image

  • the File page
    Screen Shot 2021-12-08 at 10.44.00 AM.png (872×2 px, 174 KB)

Screen Shot 2021-12-08 at 10.46.28 AM.png (1×2 px, 286 KB)

@Etonkovidova @RHo For this case where the image is white against a transparent background, we are showing the checkerboard in the image viewer (T290540#7387898). We're not showing the checkerboard in the thumbnail (since it has a background color) or in the caption. I'm not sure what should be shown in this case? On the one hand, if we do show the checkerboard during the caption step, the image would show up. On the other hand, if the user does accept it, in the article, the image is shown without a background anyway.

@Etonkovidova @RHo For this case where the image is white against a transparent background, we are showing the checkerboard in the image viewer (T290540#7387898). We're not showing the checkerboard in the thumbnail (since it has a background color) or in the caption. I'm not sure what should be shown in this case? On the one hand, if we do show the checkerboard during the caption step, the image would show up. On the other hand, if the user does accept it, in the article, the image is shown without a background anyway.

Thanks, @mewoph! So far Picto_infobox_reptile.png looks as a really edge case. With more usage (and testing of the types of images in the pool), it might be worth to make some adjustments. For now, since the scope of the task is done, I'm closing the task as Resolved.

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bfff2de526/w/