Trying to defer images without lazy load or jquery, using shopify

Question

I'm using Shopify and I have some mobile speed issues, on my home page all my images load at once, so I have been going by Patrick Sexton's tutorial on varvy.com article: Defer images without lazy load or jquery ( https://varvy.com/pagespeed/defer-images.html ) I'm stuck on where to put the actual HTML code and the javascript code. And do I have to put the code in once per image or does that code provided on the tutorial cover all images?
Can anyone help, please?

The code provided is at the bottom of Patrick's article. https://varvy.com/pagespeed/defer-images.html

Any help would be appreciated :)

I have yet to try to put any code anywhere because I don't want to break something.

Answer 1

You can use srcset to load resolution-specific images. This won't defer them, but it will lighten the bandwidth use.

<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> 

This is supported by Shopify: https://www.shopify.ca/partners/blog/using-responsive-images

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