How to explict set product image width and height on shopify theme supply

xiaopei
Tourist
19 0 2

I have big Cumulative Layout Shift on google core vital web . Google message "Image elements do not have explicit width and height". I use supply theme. I am not sure which class I should add "height: auto"  on the timber.scss.liquid. Please help.

Reply 1 (1)
oreoorbitz
Shopify Partner
229 27 126

Adding height: auto is useless for your goals.
You need to add a height and width attribute to each image element you want to fix.


So for example, if an image was formatted like

<img  src="{{ image | img_url: '500x' }}" >
Then you would an height and image attributes using the hieght and width properties of the image object
<img height="{{ image.height }}" width="{{ image.width}}"  src="{{ image | img_url: '500x' }}" >

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/