Images - how to set an explicit width and height on image

[MPDetailing]

Good day all!

I regularly work on my website speed and recently PageSpeed Insight told me that my Image elements do not have explicit width and height 

It specifically pointed out the images on my home page. 

How do I set an explicit width and height on image elements (for the images on the home page and other pages) to reduce layout shifts and improve CLS.

my website

https://mpdetailing.ca/

PageSpeed Insight

Thank you so much!

[Cedcommerce]

Hello @MPDetailing,

You can check the documentation below for detailed information about this issue and how it can be resolved. 

https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions

Let us know if you need any further help with this issue or with Shopify. 

All the best, 

CedCommerce

[flareAI]

Hello @MPDetailing,

I'm Gina - Product Manager at flareAI. flareAI has helped Shopify stores generating $5 million in sales from Google Search, on autopilot.

If it's helpful to you, please let me know by giving it a like or marking it as a solution.

You can add the image's native width and height in pixels as attributes on the image. This lets the browser calculate the aspect ratio for the image.

<img width="600" height="400" src="https://cdn.shopify.com..."/>

For more information, you can go through this guide and also check this documentation of the image object and you can get the width and height from it.

If you found the answer helpful consider supporting the Shopify Community by giving it a Like + Accept the solution.

Gina
flareAI

[OneCommerce]

Hi there,
For more infomation, pls kindly check the link below
https://www.shopify.com/partners/blog/img-url-filter
or
https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions