Medium This Hint is worth investigating further, and may warrant further attention depending on the type and quantity of URLs affected. Opportunity This Hint represents an opportunity for optimization.

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. 

Image jump, no height or width

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

Free 14 day trial.
Full, unrestricted access.
No credit card required.

Try Sitebulb for Free