Skip to content

Conversation

@captainbrosset
Copy link
Contributor

Adding sizes=auto to an image that also has loading=lazy is a really cool feature which makes it possible for the browser to reserve the right size for an image, even though it hasn't yet loaded it. This way, as you scroll a really long page that has many lazy loaded images, you don't get layout jumps.
This only works with lazy loaded images and, for now, is only on Chromium-based browsers.

See also:

@github-actions github-actions bot added the feature definition Creating or defining new features or groups of features. label May 21, 2025
Copy link
Collaborator

@ddbeck ddbeck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks promising to me. I've suggested some possible, but optional, description edits. Please merge, if you think it's ready. Thank you!

@ddbeck ddbeck changed the title New auto-sized lazy images feature Add auto-sized lazy images feature May 22, 2025
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I forgot to mention. To match up with loading-lazy, I suggest changing the ID to sizes-auto.

@captainbrosset captainbrosset enabled auto-merge (squash) May 22, 2025 08:36
@captainbrosset captainbrosset merged commit 2898cf8 into main May 22, 2025
3 checks passed
@captainbrosset captainbrosset deleted the lazy-img-sizes-auto branch May 22, 2025 08:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature definition Creating or defining new features or groups of features.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants