Optimize channel banner #6504

Merged

infinite-persistence merged 3 commits from ip/optimize.banner into master

2021-07-20 10:41:15 +02:00

infinite-persistence commented

2021-07-16 09:46:35 +02:00

(Migrated from github.com)

Issue

Core Web Vitals: "Keep request counts low and transfer sizes small"

Channel banners can hit several MBs.

Target

Optimize the banner filesize, but don't compromise on the quality (i.e. never show blurry banner)

Outcome

Visually, the banner is as sharp as the version before this PR, with the exception of the following scenarios:
- If you load the page in a smaller zoom and then zoomed out, it will be potentially blur if you go from one extreme to the other. A reload is required to get a sharp image in the new zoom setting.
  - It's the same in YT's banner. When cache is disabled, YT seems to listen to window-resizing and grabs an updated image. I don't think we need to do that.
- Depending on the format (mostly on JPG), images with sharp edges will be slightly aliased due to the compression. But this is usually not noticeable unless you look really close.
  - Same as YT. General compression behavior, I guess.
On a 1080p screen in various zoom settings, on average we save about 10-40% in image size.

## Issue > Core Web Vitals: "Keep request counts low and transfer sizes small" _Channel banners can hit several MBs._ ## Target Optimize the banner filesize, but don't compromise on the quality (i.e. never show blurry banner) ## Outcome 1. Visually, the banner is as sharp as the version before this PR, with the exception of the following scenarios: - If you load the page in a smaller zoom and then zoomed out, it will be potentially blur if you go from one extreme to the other. A reload is required to get a sharp image in the new zoom setting. - It's the same in YT's banner. When cache is disabled, YT seems to listen to window-resizing and grabs an updated image. I don't think we need to do that. - Depending on the format (mostly on JPG), images with sharp edges will be slightly aliased due to the compression. But this is usually not noticeable unless you look really close. - Same as YT. General compression behavior, I guess. 2. On a 1080p screen in various zoom settings, on average we save about 10-40% in image size.

infinite-persistence commented

2021-07-17 06:04:16 +02:00

(Migrated from github.com)

Set to Draft

Found a bug when applying it on channel thumbnails.

Set to `Draft` - Found a bug when applying it on channel thumbnails.

infinite-persistence commented

2021-07-18 17:37:11 +02:00

(Migrated from github.com)

Ready for review

Skip optimization for files hosted in /public, like Gerbil. If we want to optimize those, we'll need to provide the full URL in the code, otherwise the CDN lookup will fail.

`Ready for review` - Skip optimization for files hosted in `/public`, like Gerbil. If we want to optimize those, we'll need to provide the full URL in the code, otherwise the CDN lookup will fail.

jessopb (Migrated from github.com) approved these changes 2021-07-19 20:56:03 +02:00

ui/component/optimizedImage/index.js

jessopb (Migrated from github.com) commented

2021-07-19 20:52:50 +02:00

connect has nothing to do here.
index.js can just import and export the default from ./view
Though, I sometimes do this if I expect to add some selectors or actions later.

connect has nothing to do here. index.js can just import and export the default from ./view Though, I sometimes do this if I expect to add some selectors or actions later.