Hi there 
Is there a way to apply those lazyload image attribute within the webflow Designer with a regular image module instead of using the embed module ?
I read this post on web.dev and was asking me the same question. I’ll give it a try, if I find something useful I’ll tag you.
2 Likes
Hey @anthonysalamin
I made it work with Webflow. Isn’t the most intuitive way and I couldn’t make it work with Collections yet, but it’ll work on most of images.
Here’s the process:
- Upload your images to Webflow’s Assets
- Open the assets, click the
icon, then click the 
: icon to open the image on another tab
- images bellow
- Copy this URL
- Place the image component but don’t insert any image, or just insert a placeholder
- Give your images a
lazyloadclass - Access the Element Settings (D) and scroll to the bottom
- There you can see Custom Attributes > Custom
attributes:
- Click the + button and add:
- Name:
data-src - Value: the URL of the image you copied before
- Name:
- Click the + button and add:
- Access you Pages > Edit Pages Settings > Custom Code and paste this script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.4/lazysizes-umd.min.js" async></script>
And there you go. Publish and see it live.
Look at this rough example:
https://lazy-load-4586f9.webflow.io/
The image Gear Icon
The image Anchor Icon
9 Likes
@gilson that is awesome !!
Thank you so much for having taken the time to try it out, much appreciated 
I will start with this technique ! Having it work on collection images would be the icing on the cake though ! 
1 Like
Yeah, if we could make the attributes get content from the CMS that you be phenomenal.
3 Likes
Hey @anthonysalamin
If you want this idea to be able to be used with CMS, upvote this on Wishlist:
https://wishlist.webflow.com/ideas/WEBFLOW-I-1640
2 Likes
This is awesome! thanks for the example. How can we lazyload BG images?
2 Likes
@gilson I’m really late to the party here, but found this when I was looking how to do lazy loading. I’m struggling with the part of where you add on the lazy load class as webflow is telling me the “alt class” custom attribute is already being used. Is there something I am missing? Any advice would be really helpful. I’ve attached a screenshot as well.
1 Like
Instead of alt class in the Name field, use data-src
For the value, locate the URL of the image as mentioned by @gilson in the solution above.
Unless I am missing something here.
1 Like
Yup, I am able to use data-src custom attribute along with the url link, but I also need to add the alt class custom attribute to label the image as “lazyload”. I believe I’ll need both to get the the image lazyloaded.
1 Like
How are you going to set the data – source attribute with the responsive images that need to be lazily loaded
1 Like
I don’t know if I understand the question fully. Only been working with webflow for the past month. But I was adding the data source attribute under settings and custom attributes.
1 Like
Here is the issue. When an image is placed on the page and responsive image is on (default) then when the page is published, the img tag will have the srcset and sizes attributes added by webflow. When the browser loads the page, it will start to load the image that matches the breakpoint in sizes = “”. So the browser is now also is loading your “pick a lazy loader script” which wants to load the images lazily that are defined in the data-srcset and data-sizes attributes. Great except the browser already loaded the image. So there is no point unless you embed a image in custom code with the attributes needed by the lazy script, which means you will need to create your own versions of the image and upload them to your project, for inclusion in your custom embed.
I recently deployed a custom responsive images solution with lazy loading using Cloudinary’s responsive generation using their JS library, then used lazysizes for the lazy loading. I also did the same using IMGIX’s JS library.
Why? Client has nothing but images (15-20 per product loaded dynamically from cloudinary) and many high res interior design shots on pages.
Would I bother for a page load under 5MB - Nope.
4 Likes
Thank you @webdev, I really appreciate the response. I’m understanding part of what your saying, but definitely need some more experience to get it fully. Would you happen to have a read only view example that I can look at and try to mimic. I understand if not, but just wanted to ask
1 Like
For all of you that have been struggling with lazy-loading CMS images, I have managed to get it done using Lazysizes and noscript method.
More: javascript - DRY lazy-loaded images with <noscript> fallback - Stack Overflow
Step 1: Paste this into custom code:
<script>
(function(){
'use strict';
var supportPicture = !!window.HTMLPictureElement;
addEventListener('lazybeforeunveil', function(e){
if(e.defaultPrevented || e.target.getAttribute('data-noscript') == null){return;}
var imgs, i;
var noScript = e.target.getElementsByTagName('noscript')[0] || {};
var content = noScript.textContent || noScript.innerText || '';
e.target.innerHTML = content;
if(supportPicture){return;}
imgs = e.target.querySelectorAll('img[srcset], picture > img');
for(i = 0; i < imgs.length; i++){
lazySizes.uP(imgs[i]);
}
});
})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>
<script>
$(document).ready(function() {
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
$('.lazyload').each(function() {
$(this).attr('data-src', $(this).attr('src'));
$(this).removeAttr('src');
$(this).attr('data-srcset', $(this).attr('srcset'));
$(this).removeAttr('srcset');
$(this).removeAttr('sizes');
$(this).attr('data-sizes', 'auto');
lazySizes.init();
});
});
</script>
Step 2: Include a “HTML embed 1” right before and “HTML embed 2” right after every photo/video/iframe/whatever you want to lazyload. Works with responsive images!
HTML Embed 1:
<div class="lazyload" data-noscript="">
<noscript>
HTML Embed 2:
</noscript></div>
So it looks quite tidy in the Designer:
15 Likes
I can’t share client projects. I created a demo site and an article that demonstrates the LQIP method using lazySizes.
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! 
4 Likes
Thank you!
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 Andrea Verlicchi).
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 !
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