Follow

Anyone knows how to solve the problem of undetermined picture size in combination with native lazyloading?

When I understand things correctly, in order to prevent content reflows I have to provide image sizes/dimensions, but how to calculate them properly in a responsive design?

@sheogorath You could try LazySizes[1] to help. Otherwise you'll need to predetermine the sizes before they get shipped out.

[1]: github.com/aFarkas/lazysizes

@ndegruchy I actually want to explicitly not use JS for lazy-loading. If JS, then something between 3-10 lines and only to do minor adjustments.

web.dev/native-lazy-loading/

My current test implementation works okayish, main issue: With some minor CSS modifications, the images become exactly as intended, just the image box itself, due to the determined heigth, will be too long. (Means unneeded whitespace in the article.)

git.shivering-isles.com/shiver

@sheogorath Hmm, could you use a negative margin on one end to properly size the box?

Sign in to participate in the conversation
Sheogorath's Microblog

This is my personal microblog. It's filled with my fun, joy and silliness.