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

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

MPDetailing
Visitor
1 0 1

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

MPDetailing_0-1669829743532.png

 

Thank you so much!

Replies 3 (3)

Cedcommerce
Shopify Partner
718 76 114

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

flareAI
Shopify Partner
2405 224 544

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

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing

OneCommerce
Shopify Partner
253 19 110

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

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us