Jank-Free Image Loads
3 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
Taylor Hunt
Eric Portis
@Taylor Hunt — great question! Maybe! As long as you’re sure your content doesn’t have any height/width attributes in percentages (e.g., `width=“100%”`) and you understand the tradeoffs involved with setting extrinsic vs intrinsic sizing… I think that sounds like a great option?
@Stefan — Unfortunately, `height: auto` in CSS overrides (and so effectively undoes) the `height` attribute in HTML. When you use it on an image with `height` and `width` attributes, it causes browsers not to reserve any space on the layout for the image before it loads, and we’re back to a janky load experience.
Stefan
Hi,
I am trying to understand this properly and I really wonder, why not use the simplest solution to the Problem here, which IMHO would be to add „height: auto;“ to your img CSS?
Could the new `attr()` superpowers let us define something like this?