Improve automatic scaling of cover image (fixes blur in mobiles) #198
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The current process of generating scaled cover images is problematic, it produces upscaled blurry images on mobile resolutions. Here is a screenshot of the exampleSite on a 412x915 Galaxy Note 20: screenshot-old.
The reason the cover appears blurry is that it uses the following 600x399 scaled version: cover-scaled-old, wrapped in a rule:
Although the image has larger width (600px) that the canvas (412px), its height (399px) is much smaller than the canvas (915px), so the
background-size: cover
algorithm upscales the image to cover the height, leading to the blurry cover.There are two solutions to this:
Include
max-height
in the rule:This fixes the issue by simply not picking the scaled version. However the solution is useless for mobile phones which have "tall" aspect ratios, cause none of the scaled images will have sufficient height to be picked.
Mimick the
cover
algorithm for tall screens, which first scales the image to fit the height, and then crops it to fit the width. So we can scale to sayheight=1024
and the crop to various widths to create portrait versions. For these versions we need a rule with bothmax-height
, but alsomax-aspect-ratio
, to use them only in "tall" screens in which the original image would be cropped anyway.This PR implements a combination of both methods. It creates a few "scaled-only" versions of the cover aimed at desktop resolutions. And then a few "scaled-then-cropped" portait versions aimed at mobiles.
In the end the version picked in the 412x915 phone is the following 600x1024 version: cover-scaled-new , which makes the site look exactly as it would look with the original image: screenshot-new.
Two final improvements included in the PR:
q90
(in my tests it provides much better compression thanq100
at no visible cost), but makes it configurable via theimage_options
param.