Image elements do not have explicit width and height

Scrowp
Shopify Partner
32 0 1

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.

Scrowp_0-1693314924364.png

 



Any solutions to this guys ?

Thank you in advance

Shopify Web design created by Marouane RHAFLI
Reply 1 (1)

JohnE10
Shopify Partner
101 11 16

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.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com