How do I implement lazy load for images in my store?

[Carens]

Hi there! I want to lazy load some images into my store But I don't know how. Can somebody here tell me the step by step process to follow please? 

[Guleria]

Hello @Carens ,

Here you can find details of it https://www.shopify.com/in/partners/blog/lazy-loading

Thanks

[Huptech-Web]

Hi @Carens 
There are 2 methods for this

1. You can use a jQuery Plugin

2. You can use the browser native method

How to implement 1st method

- Download the Lazysizes JS from here: http://afarkas.github.io/lazysizes/lazysizes.min.js

- Add this js to the assets

- Load the js to theme.liquid like this:

<script src="{{ 'lazysizes.min.js'| asset_url }}"></script>

- then where you need the images to be lzayloaded you can follow the below code class must be lazyload

<img class="lazyload" src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ block.settings.image | img_url: '180x'}}"
data-srcset="{{ block.settings.image | img_url: '180x'}} 180w, 
             {{ block.settings.image | img_url: '360x'}} 360w, 
             {{ block.settings.image | img_url: '540x'}} 540w, 
             {{ block.settings.image | img_url: '720x'}} 720w, 
             {{ block.settings.image | img_url: '900x'}} 900w, 
             {{ block.settings.image | img_url: '1080x'}} 1080w, 
             {{ block.settings.image | img_url: '1296x'}} 1296w, 
             {{ block.settings.image | img_url: '1512x'}} 1512w, 
             {{ block.settings.image | img_url: '1728x'}} 1728w, 
             {{ block.settings.image | img_url: '1944x'}} 1944w, 
             {{ block.settings.image | img_url: '2160x'}} 2160w, 
             {{ block.settings.image | img_url: '2376x'}} 2376w, 
             {{ block.settings.image | img_url: '2592x'}} 2592w, 
             {{ block.settings.image | img_url: '2808x'}} 2808w, 
             {{ block.settings.image | img_url: '3024x'}} 3024w"
 >
Change {{ block.settings.image }} to the variable from where the image URL is loaded

That's it for the 1st method

For 2nd method, you can simply add the below code but it will not work on some old browsers. You can check the list here: https://caniuse.com/?search=loading%3Dlazy

You need to add the attribute loading="lazy"

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

[Carens]

Hi @Huptech-Web! Where exactly, in the theme.liquid, I should paste the first code? When I download the lazysizes JS Should I create a new file under the folder assets to to add it? Thanks for your reply.

[Huptech-Web]

Hi @Carens 
You can paste the JS before </head> check this screenshot:  https://prnt.sc/6hmyR1Zp975y
And Yes you have to create a new file in the assets, check the screenshot: https://prnt.sc/lvWj5KeMIr0T

[Carens]

Thank you so much. What about the second code? Do you have a screenshot of it? So that I can see how to do it? 

[Huptech-Web]

Hi @Carens 
Can you share with me an example where you want to add this code?

For example. Like share the file code and I will update the code and then reshare it with you that way you can have an idea of how to use this code in other files.

[Carens]

Hello @Huptech-Web. I want to use it for a specific picture on my homepage but I can't find the picture code.

[Huptech-Web]

Hello @Carens Hope you are doing well
Can you share the store URL so I can help you,

[Carens]

Hi @Huptech-Web. www.dailyzenfinds.com 

[Huptech-Web]

Hi @Carens 
Thank you for sharing the store URL can you share the screenshot for which image you want to apply the lazyload?
- The slider or the section with Exclusive finds! 

[Pair_of_Squares]

I'm also looking to lazy load an image on my website. Can your 2nd method be implemented on just the slideshow images on a homepage? I'm new to coding so I wouldn't know how to add the attribute 'loading=lazy' or where to add the code you provided to my site. A detailed explanation would be much appreciated if you have time. Thank you!