Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve automatic scaling of cover image (fixes blur in mobiles) #198

Merged
merged 1 commit into from
Jul 8, 2024

Conversation

chatziko
Copy link
Contributor

@chatziko chatziko commented Jul 8, 2024

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:

  1. 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.

  2. 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.

@zjedi zjedi merged commit b411ea2 into zjedi:master Jul 8, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants