you do not have any lazyload class on the images you are trying to lazyload.
1 Like
I donāt have it on any image on the website but they still seem to lazy load?
1 Like
would you have a link to your website for us to see if those images really lazy load ?
1 Like
yeah, https://fooxea.com
on google PageSpeeds in the defer Offscreen image section it says I just have to do it to the product images so I assume itās working for the other images. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffooxea.webflow.io%2F
1 Like
Thanks for the reply. Now that my internets no longer slow it looks like it does what I wanted. When it was slow, it looked like it was not loading them in order of screen appearance.
Here is my custom code - a direct copy paste of @webdevās code:
The images have .lazyload added to them and as you can see I set up the data-src. Setup really is as simple as this, no? I guess I expected it to be more complicated.
And thank you for the advice on the images - I scaled them down, but I might go back to 2500 as I see on my 4k laptop they become blurry. Its an interesting and confusing choice - as its a portfolio, I guess I ought to gear the works towards the latest 4k/5k and mac retina screens because on those new 27inch imacs, the ones less than 2500 look pretty crapā¦ ouch.
Thanks again anthony !
1 Like
@kivexnz i I understand.
Though before going into the process to optimize your website for 5k retina ready display, If not yet done, I would definitely try understand who your target audience is. I had a client willing to optimize full width images for 4k retina displays but realised via Google Analytics that 80% of his user were requesting the website from mobile devices 
Resolution of images really is a tricky question, but well since we can now lazyload imagesā¦ by the way, why not use Webflow native Webflow srcset generation instead of the data-src attribute ? The data-src attibute will load the 2500px wide image on mobile too (heavy)ā¦ native srcset would load a more appropriate one.
2 Likes
True that ! Thats a very relevant thought that Iād have never come up with in a thousand showers!
You are referring to the way webflow generates different sizes of each image yes?
And by using data-src, I remove this possibility, forcing mobile to load a 2500px width (and its associated mb weight), correct?
But I have no idea how to implement what youāre suggesting. Are you saying Iām better off enabling on mobile a div containing non-lazyload images?
1 Like
Webdev in his blog post proposed two ways to lazyload content. The first way is with native Webflow srcset images, the second with data-src.
If you use data-src images, images are loaded as they are no matter which device you are loading them from meaning heavy files for mobile users (someone correct me if Iām wrong).
However, Webflow automatically generates a set of image alternatives (srcset) for the browser to choose from depending on the device the user is on.
If you go for super big images meant for 5k retina ready display, I would tottaly harvest the power of Webflow srcset generation and lazyload those images with the lazysizes noscript extension Webdev explained in his post.
1 Like
I created a new demo using webflow responsive images with lazysizes. Image had to be uploaded first, then using the source paths, created a custom code embed to display a responsive lazy loaded version.
1 Like
@webdev @anthonysalamin could you check my site. I canāt figure out if any of the images are lazyloading and if they are I canāt tell why the product images arenāt. Google page speeds seems to think I am lazyloading. https://fooxea.com
1 Like
Hi @webdev, thanks for the input !
So the lazysize noscript method does not actually lazyload the right image variant from the webflow srcset when the image comes into the observer threshold ?
1 Like
The no script demo does lazy load the correct srcset image automatically. The new demo is not a practical alternative to the no script implementation, since you need to have the URL of the generated images. Meaning a two step process. However, it does show how to lazy load images hosted externally. Which was really more to the point.
1 Like
You need to evaluate what is happening with browser developer tools. If an image is lazy loaded, you can see that the script was the initiator in the network panel. I am available for hire for custom implementations.
1 Like
The lazyload script loads but on google page speeds it says the product images should be lazy loaded =\ I canāt figure out why those images arenāt lazy loading. I have followed the tutorial completely
@nxwebflow - Two things:
You are not loading the plugin since it is commented out. I would recommend using the CDN link for that as well.
<!--lazysizes library-->
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.1.0/lazysizes.min.js"></script>
<!--
lazysizes no script extension
https://github.com/aFarkas/lazysizes/blob/master/plugins/noscript/ls.noscript.js
-->
You are unnecessarily wrapping elements when you could just wrap a container of elements.
Removed the comment part in the custom code section. I was worried about wrapping the whole grid of images because I was worried it would disable the parallax animation. Would Parallax and opacity animations still work?
I donāt know if there would be a conflict. You should check that yourself.
I started the guide over again. Iām doing the responsive webflow method now. For each image do you write out the code into an embed block? Iām sorry for bad english
Yes, unless you are stacking images one after another ( image tag + image tag + image tag), then one would suffice.