I can’t share client projects. I created a demo site and an article that demonstrates the LQIP method using lazySizes.
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!
I assume there may be some compatibility issues with archaic browsers, still investigating…
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.
See screenshot below:
Is that an overkill, could my workflow with cloudinary be more efficient to generate those src-set images automatically “à la Webflow” ?
Thank you !
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.
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.
@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
Sounds indeed really interesting ! what a lovely hack to wrap / squeeze the image in between two webflow embeds
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 !
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).
Thank you @webdev ! Will dig into those upcoming day.
I came up with a codepen test:
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…)
Thanks for your precious insights !
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.
Really looking forward to it !
Here is my codepen again:
Almost there ! (still not working)
… 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
Here the version with pure cloudinary working responsive image but without lazy load:
Hope this can help someone too !
I gave it a try today !
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:
Should I only lazy load sections that are under the initial page that loads?
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 !
Will you be updating this? lazyload 1.5.0 was released.
@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
demo only shows the top of the page now