Streaming live at 10am (PST)

Lazyload for Webflow Images

I can’t share client projects. I created a demo site and an article that demonstrates the LQIP method using lazySizes.

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

2 Likes

This is an excellent solution that works with webflow responsive images (where-ever) and a very nice find. Saves a ton of extra steps and work in webflow. Kudo’s to @cheechee! :partying_face:

4 Likes

Thank you! :blush:

I assume there may be some compatibility issues with archaic browsers, still investigating…

1 Like

Wow, I’d love to hear more about that workflow ! I also went for the Cloudinary solution to manage my asset not mentioning I was blown away by how easy it is to make on fly URL transformation to the master image hosted on Cloudinary.

I did not know Cloudinary could manage responsive images automatically ? At the moment, I had to set up an embed code within Webflow, where I would specify all the URL transformation for the data-srcset attribute. (I am using the quite powerful Vanilla JavaScript lazy loading technique from Andrea Verlicchi https://www.andreaverlicchi.eu/lazyload/).

See screenshot below:

Screenshot%20(1620)

Is that an overkill, could my workflow with cloudinary be more efficient to generate those src-set images automatically “à la Webflow” ?

Thank you ! :slight_smile:

1 Like

I am building a demo on the site I shared in a previous post.

The Holy grail would be if webflow would let me “flag” a site as cloudinary enabled, then just open the image tags to use my CL Url and integrate the uploader and media library. Ok, I am probably dreaming.

Back to responsive generation, yes you can get it automatically by including the JS, and adding a class to an image. Boom your done, and yes you can lazy load with no hacks since the CL responsive image tag uses data-srcset, and data-sizes.

The CL product gallery is insanely cool too. Pick a tag and boom gallery on a page.

Demo coming.

2 Likes

Can’t wait !

Thank you for taking the time to share the knowledge !
Yes, it would be awesome if Webflow could implement a native lazyloading method for all type of images, responsive or not. Surely such feature is no easy task from an infrastructure point of view also, but well dreaming is good.

2 Likes

@cheechee provided a solution above that makes it trivial to lazy load with or without webflow responsive image generation, CMS images, and slides. Take a look. I tested it and it works.

Noscript Demo created > https://wf-images.webflow.io/lazy/lazy-sizes-no-script

8 Likes

Hi @cheechee,

Sounds indeed really interesting ! what a lovely hack to wrap / squeeze the image in between two webflow embeds :slight_smile:

One question though, how does that work if lazysizes uses the data-srcset attibute and not the srcset attribute that webflow actually uses when the page is created ?

Here is snipet from the lazysizes documentation:
responsive image with srcset and sizes attribute
Simply use data-srcset and you can support responsive images.

<img
	alt=""
	sizes="(min-width: 1000px) 930px, 90vw"
	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	data-src="medium.jpg"
	class="lazyload" />

Thank you for your help !
A.

1 Like

I added an image to the Noscript demo page that webflow created responsive versions and tag. Class assed to image. Working. It is being loaded by the plugin, which you can confirm in the network panel of chrome dev tools (see the initiator).

2 Likes

Thank you @webdev ! Will dig into those upcoming day.

I spent some time digging into the Cloudinary documentation again and found an interesting article describing a way to serve responsive images via automatic url transformation through javascript SDK from Cloudinary.

I came up with a codepen test:
https://codepen.io/anthonysalamin/pen/VNJZxJ?editors=1010

Would you say it is the way to go for responsive imagery ? Does this method replace the srcset method effectively ? Knowing I’d like to then lazyload those responsive images with the https://www.andreaverlicchi.eu/lazyload/ lazyload powerfull lazyload script.

Here is my old srcset markup alternative (working but tedious to update all srcset attributes…)
https://codepen.io/anthonysalamin/pen/EJQpyg

Thanks for your precious insights !
A.

1 Like

I am doing this right now off on site hosted on one of my servers. I tested in WF and it works fine. When you have a src file defined, you can obviously see it in the designer. I am using LOW quality for the src and then letting the API generate the responsive images. I did test auto generation on type and webp images are served when supported as well.

You can. I am doing this for a resort site now.

I am working on a demo for the complete gamut and will have it up soon.

2 Likes

Really looking forward to it !

Quick question, is it possible / does it make sense to set the url transformation in the javascript directely to preserve a clean URL in the HTML ? I will have quite some images in my feed, if I decide to set the quality to let’s say 70, I’ll have to manually tweak all my URLs - if I have it set up in the javascript snipet, I’d just change one line. I looked into the documentation but find it relatively obscure to understand / implement.

Here is my codepen again:
https://codepen.io/anthonysalamin/pen/VNJZxJ?editors=1010

1 Like

I did try to update the url via Cloudinary javascript SDK but it does not work anymore. I must be missing something.

EDIT:

Almost there ! :sunglasses: (still not working)
https://codepen.io/anthonysalamin/pen/vMoOmv?editors=1010

I know dynamically generate data-src images based on the low res src image. The javascript then applies the cloudinary transformation dynamically aswell. The whole thing is being successfully lazy loaded…

… but it seems the very same image is being served, regardelss of the window’s width. I tried to rescale my browser’s window from big to very small, it seems the image is the same size after download -> same image which does not change (like it is supposed to be with Cloudinary cl.responsive(); function.

I’m still missing something, can’t figure out what :slight_smile:

Here the version with pure cloudinary working responsive image but without lazy load:
https://codepen.io/anthonysalamin/pen/wbwyNv

1 Like

Okay,

I think I got it right now, used Lazysizes aswell. I got inspired by someone else on codepen lazyloading cloudinary images but had quite different structure… I rewrote the javascript to fit my webflow workflow, seems to work. Let me know what you think !

Documentation:
http://afarkas.github.io/lazysizes/rias/

Codepen:
https://codepen.io/anthonysalamin/pen/OYJgWJ?editors=1010

Live website:
https://lazycloudinary.webflow.io/

Webflow read-only:
https://preview.webflow.com/preview/lazycloudinary?utm_source=lazycloudinary&preview=304d59c4f8a57c38ac08a2303e0a45e8

Hope this can help someone too !

2 Likes

Hi @webdev,

I gave it a try today ! :slight_smile:

I must be however missing something since the google dev tool network shows me no progressive image loading, everything is loaded on page load, strangely.

Here is a video recording:

Here is my read-only link:
https://preview.webflow.com/preview/sticky-section-f38b32?utm_source=sticky-section-f38b32&preview=836a8217234897977eb5df2ab6f40c88

1 Like

Should I only lazy load sections that are under the initial page that loads?

heres my read only link: https://preview.webflow.com/preview/fooxea?utm_source=fooxea&preview=642701297951d08087e9cba40bd86c2b&mode=preview

1 Like

Hi @nxwebflow,

as for now, I did not succeed in using the noscript method suggested by @webdev to lazyload native Webflow srcset generated images. As an alternative solution, I am using a more complicated solution by hosting high res images on Cloudinary using lazysizes RIaS (Responsive Image as Service) extension to serve the proper image size and format(webP, etc…) for desktop and mobile. It’s really effective but need a bit more custom code here and there and is costly (cloudinary).

If someone have a noscript solution to play with (cloneable) for Webflow srcset image I’m happy to give it another try !

1 Like

Will you be updating this? lazyload 1.5.0 was released.

1 Like

@anthonysalamin - Were you trying to use the noscript plugin with data-sizes? I just double checked the noscript demo and it is working with WF responsive sizes.

@nxwebflow - Demo’s updated with version 5.1.0

1 Like

demo only shows the top of the page now


https://wf-images.webflow.io/lazy/lazy-sizes-no-script

1 Like