Magento 2: Set an explicit width and height on image elements to reduce layout shifts and improve CLS?

When I run my site through https://developers.google.com/speed/pagespeed/insights/ it shows this error: enter image description here

I have already added image height and width in my view.xml and I also ran catalog:images:resize command but it didnt fix the issue. How can I fix this?

Answers 1

  • Expand this error and check it. You need to set height & width attribute with it's value in <img> tag.

    For ex :

    <img class="product-image-photo" src="http://example.com/pub/media/catalog/product/cache/dfcdafe7c22a7c86b2c2f8e32b4bf198/w/b/wb04-blue-0.jpg" width="240" height="300" alt="Push It Messenger Bag">
    

Related Questions