Add dimensions to images

This means that the URL contains images that do not have width and height size attributes.

Why is this important?

Cumulative Layout Shift (CLS) is one of the Core Web Vitals metrics that feed into Google's understanding of 'page experience.' CLS is about how much it feels that the page layout moves around as it is loading.

If you don't specify width and height on images, when loading the page, the browser does not know how much space to allocate for the images. This results in an image 'jump', as the layout shifts around the images. 

What does the Hint check?

This Hint will trigger for any internal URL that contains image elements which do not have explicit width and height attributes.

How do you resolve this issue?

Simply adding 'width' and 'height' attributes to <img> tags will avoid layout shifts, but a fully responsive solution is a little more complicated.

When working with responsive images, use 'srcset' to define the set of images you want the browser to select from, and what size each image is. The browser will calculate the aspect ratio and therefore understand what space to allocate in the layout (ensure that the images themselves use the same aspect ratio).

<img
 width="800"
 height="800"
 src="champions-800.jpg"
 srcset="champions-800.jpg 800w, champions-1600.jpg 1600w, champions-2400.jpg 2400w"
 alt="The amazing Leicester City"
/>

Further Reading

• Optimize Cumulative Layout Shift - Images without dimensions (Lighthouse documentation)
• Setting Height And Width On Images Is Important Again