Image elements do not have explicit width and height

According to PageSpeed setting an explicit width and height on image elements can reduce layout shifts and improve Cumulative Layout Shift (CLS)

How WP Rocket can help?

Our feature Add Missing Image Dimensions can be helpful to address this. This feature can be enabled on the Media tab.

How do images without explicit width and height affect page performance?

Let’s take as an example this page: 

This might render in two stages, first as the HTML is downloaded, and then second once the image is downloaded. With the above code, this would cause the main content to jump down after the image is downloaded and the space needed to display it can be calculated, it would see something like this: 

First stage: HTML is downloaded

Second stage: the main content jumps down when the image is downloaded

Setting the image dimensions allows the browser to reserve space for the image and prevents the content from jumping.

Also, setting explicit width and height can minimize main thread work, prevent large layout shifts and create a smooth experience for your visitors.