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:
@media (max-width:600px) {
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:
@media (max-width:600px) and (max-height:399px) {
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 say height=1024 and the crop to various widths to create portrait versions. For these versions we need a rule with both max-height, but also max-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:
It sets the default quality to q90 (in my tests it provides much better compression than q100 at no visible cost), but makes it configurable via the image_options param.
The original large cover is also converted to webp.
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: coveralgorithm upscales the image to cover the height, leading to the blurry cover.There are two solutions to this:
Include
max-heightin 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
coveralgorithm 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=1024and 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 thanq100at no visible cost), but makes it configurable via theimage_optionsparam.