Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi,
Struggling trying to use lazy loading for product images.. trying to use this tutorial from https://github.com/aFarkas/lazysizes#readme
I've added the <script src="lazysizes.min.js" async=""></script> into the Theme.liquid into the body section and that is as far as managed. Can not seem to find where to add the class and lazyload to the images.. could someone help me out?
What images need lazyloading?
Dawn should come with native lazyloading out of the box. I just think it's missing background image lazyloading.
You are right dawn does come with lazy loading.
Next step would be adding low res images as a background. Would you have any tips? getting lost with google.. currently learning and would appreciate any help
Hi @bmdesign,
Just add the attribute loading="lazy" to your images e.g. <img src=".." loading="lazy"/>.
There is no need to add a low res image, unless you really want to 🙂
https://web.dev/browser-level-image-lazy-loading/
Best,
Hasan
Thank you where can I find these in the code? cant find the images anywhere..
I added this code on my website and it works. Thanks.
But I must say that I expected a more spectacular effect
Regards
Where about are the images in the code? I cant seem to find them anywhere
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025