Properly size images- Collections. --Venture Theme

[Chickybling]

Hi-

I am trying to improve site speed.  I keep getting this recommendation

**Properly size images**

It is only on my collection images.  All my collection images are the same size.  they appear correctly aligned on the website so i believe it must be something missing in the code?

I am using venture theme

Website is 

https://www.chickychickyblingbling.com

Thank you for your time

Holly

[oreoorbitz]

The srcset attribute will end up delivering a larger than opitmal image.
If you want image sizing to be as exacting as possible, use the picture tag with exacting media attributes to match the image container.

[speedboostr · Accepted solution]

Agree with the previous poster's recommendation on using "srcset", that allows you to serve different sized images based on the size of the user's device.

Details here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Pass that to your developer they'll know what to do.

Also, make sure you're using lazy loading (and that it's working correctly). That will also clear those warnings because lazy loaded images do not load at all until the user scrolls. For images above the fold / top of the screen you can't lazy load those, so ideally they are using srcset but if you're getting those warnings on all images on the page then implement lazy loading: https://speedboostr.com/shopify-lazy-loading. I see some lazy load code in your screenshot so if all images on the page are triggering that warning it means lazy loading wasn't set up correctly.

If you need any help from Shopify optimization experts feel free to reach out at speedboostr.com/contact, we've optimized over 1500+ Shopify sites and do regular website edits and features every day as well.