Image elements do not have explicit width and height

[Scrowp]

Hi,
Whatever i do to give the width and height attribute for an image, google speed insight still showing that the height and width are still missing.

Any solutions to this guys ?

Thank you in advance

[JohnE10]

Hi,

Your code shows that the width for that particular image is set to “100%” while the height is set to “auto”.

The height of “auto” is the issue, it does not give the browser an explicit height. It tells the browser to decide what to make the height based on the width of the image.

What the browser does is initially render the image with a height of zero until it gets to the actual image in the HTML and then figures out the height after doing some calculations.

This can cause content in your page to shift down after the height of the image goes from 0 to the calculated value. That shilf is what is know as Cumulative Layout Shift (CLS), and if that shift is above a certain threshhold, Google doesn’t like it.

So make sure that your images have an explicit value for width and height.