[Bug] cumulative layout shift issue

[teoh4770]

No description provided.

[GabeDiniz]

Hey @teoh4770, what do you mean by this?

[teoh4770]

article about cumulative layout shift: https://web.dev/articles/cls

[teoh4770]

The most common causes of a poor CLS are the following:

1. Images without dimensions.

[teoh4770]

https://jakearchibald.com/2022/img-aspect-ratio/
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/#fixing-the-resizing-problem

[teoh4770]

Link: A more elegant and easier to use solution

solution:

<style>
  img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
  } 
</style>
<img src="hero_image.jpg" alt="" width="500" height="500">

Basically, this solution means if the following four conditions are true,

1. height is set on the element in HTML
2. width is set on the element in HTML
3. height (or width) is set in the CSS — including using percentage values like max-width: 100%;
4. width (or height) is set to auto in the CSS.

then the correct image dimensions could be calculated without needing to wait for the images to download, and so without the need of a content layout shift: