Streaming live at 10am (PST)

Lazyload for Webflow Images

@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 :slight_smile:

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.

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?

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.

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.

https://wf-images.webflow.io/lazy/lazy-sizes-responsive

@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

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 ?

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.

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.

@webdev awesome ! Thank you for the clarification !

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

https://preview.webflow.com/preview/fooxea?utm_medium=preview_link&utm_source=designer&utm_content=fooxea&preview=2e75fd68481745122f2a84a493d7e270&mode=preview

@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.

where do you get the url for each image?

View page source or inspect elements with developer tools in your browser.

so you upload the image to webflow, drag it into the website. Then publish and go into inspect element for the urls and then add the image through an embed with all the code written out pointing to the image urls?

That is what I did for the demo since Webflow has to generate the responsive images for me to use.

Quick question: Does webflow generate different various responsive sizes for animated GIFs also? Surely not.