Get exact optimized thumbnail sizes instead of hardcoded to lowest denominator #6074

New issue

Closed

opened 2021-05-17 05:42:27 +02:00 by infinite-persistence · 0 comments

infinite-persistence commented

2021-05-17 05:42:27 +02:00

(Migrated from github.com)

Currently, getThumbnailCdnUrl is called with no arguments, so a default thumbnail size is requested for all clients (ClaimPreview, ChannelThumbnail):

const THUMBNAIL_HEIGHT = 220;
const THUMBNAIL_WIDTH = 390;
const THUMBNAIL_QUALITY = 100;

There are pros and cons.

In the Channel Page case, the same image URL is used for the Channel Avatar (160x160), Tile Preview Channel Avatar (35x34) and Current Livestream (22x22). Fetching the largest version and re-using them for all 3 areas is somewhat faster than getting all 3 sizes:
However, I still think we should get the individual sizes to (a) address the problem with large screen sizes (b) address Core Web Vitals nitpick for not using appropriately-sized images.
Not doing specific sizes is much simpler though, as we don't need to: mount first --> get container size --> load image. Also, we'll have to decide what to do when the window is resized (leave as is, or get new optimized image?)

Currently, `getThumbnailCdnUrl` is called with no arguments, so a default thumbnail size is requested for all clients (ClaimPreview, ChannelThumbnail): ``` const THUMBNAIL_HEIGHT = 220; const THUMBNAIL_WIDTH = 390; const THUMBNAIL_QUALITY = 100; ``` There are pros and cons. - In the Channel Page case, the same image URL is used for the Channel Avatar (160x160), Tile Preview Channel Avatar (35x34) and Current Livestream (22x22). Fetching the largest version and re-using them for all 3 areas is somewhat faster than getting all 3 sizes: - ![image](https://user-images.githubusercontent.com/64950861/118429147-95be6580-b703-11eb-8ae9-f9ac99583f6a.png) - **However**, I still think we should get the individual sizes to (a) address the problem with large screen sizes (b) address Core Web Vitals nitpick for not using appropriately-sized images. - Not doing specific sizes is much simpler though, as we don't need to: mount first --> get container size --> load image. Also, we'll have to decide what to do when the window is resized (leave as is, or get new optimized image?)

Rows
Columns