Skip to content

24 ways to impress your friends

Jank-Free Image Loads

3 Comments

Taylor Hunt

Could the new `attr()` superpowers let us define something like this?

img {
  aspect-ratio: attr(width number) / attr(height number);
}

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?