Solved

Properly size images- Collections. --Venture Theme

Chickybling
Tourist
6 0 0

Screen Shot 2022-05-20 at 11.02.24 AM.pngHi-

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

Holly
Accepted Solution (1)

speedboostr
Trailblazer
136 20 26

This is an 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.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).

View solution in original post

Replies 2 (2)

oreoorbitz
Shopify Partner
244 29 129

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.

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



You can also contact me directly if you prefer.

speedboostr
Trailblazer
136 20 26

This is an 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.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).