MImageBody thumbnail use thumbnail_info for max w and h

[t3chguy]

Fixes element-hq/element-web#13918
If the image was really wide such that it'd hit the Synapse limit of 800px wide but wasn't tall enough to hit our maxImageHeight of 600 then it'd get stretched horizontally causing blur.

Before:

After:

(shows both encrypted and unencrypted [relying on server thumbs])

[turt2live]

lgtm code-wise, though iirc the 1.0 redesign wanted images that grew with the timeline width. The blurry artifacts might have been an unintended side effect of this as after a point we might have been meant to use the raw image instead of trying to thumbnail to 1080p?

[t3chguy]

we always show thumbnails unless the user is on a HiDPI display. I am on a 5220 x 1440 display which is not hidpi but 4 times the width needed to see blurring in the image in the issue.

@matrix-org/design what do we want to do here:

• stretch the thumbnail making it blurry
• show the thumbnail at its maximal size
• fetch the potentially insanely large image which could take forever to load but not be blurry

[nadonomy]

• show the thumbnail at its maximal size

Definite no go, as the varying widths on the timeline would feel terrible.

• stretch the thumbnail making it blurry
• fetch the potentially insanely large image which could take forever to load but not be blurry

Why don't we show the thumbnail to begin with for the best bandwidth and swap it out for the full size one if the user loads it?

[t3chguy]

@nadonomy

Why don't we show the thumbnail to begin with for the best bandwidth and swap it out for the full size one if the user loads it?

We do this, and it causes blurring due to stretching in the thumbnail. See element-hq/element-web#13918

[nadonomy]

@nadonomy

Why don't we show the thumbnail to begin with for the best bandwidth and swap it out for the full size one if the user loads it?

We do this, and it causes blurring due to stretching in the thumbnail. See vector-im/riot-web#13918

I'm suggesting we swap out the thumbnail in the timeline once the user loads/views it— is that what we do? I assume not from the linked issue, but if we do already and users are confused we could look at exposing this better through the hover state.

[t3chguy]

No, we do not, but the complaint was about it ever getting stretched to the point it'd be blurry

[nadonomy]

Yup, my thinking though is:

• It's disadvantageous to download large files pre-emptively, so better to use the thumbnail and expect it to be lower quality
• Once we have the large file, that signifies user intent and the client has the full size, so we may as well use it
• Even if not immediately obvious, I think users would learn what's going on over time, and we have easy options (e.g. hover states) to improve discovery if we need to

I've used other platforms that do this and it's a pretty pragmatic solution, so that'd be my preferred one if we're actioning this now.

[t3chguy]

Definite no go, as the varying widths on the timeline would feel terrible.

Why don't we just max-width 800px - a lot of users complain that the thumbnails are HUGE, 800px width is the limit Synapse imposes on thumbnailing

[SimonBrandner]

Fixes #1520

[turt2live]

@t3chguy this may be superseded by #7017 (sorry)