Lazyload for Webflow Images

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:

10

15 Likes

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 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 ! :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 > Lazy Sizes No Script with Webflow

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 Lazy Load lazyload powerfull lazyload script.

Here is my old srcset markup alternative (working but tedious to update all srcset attributes…)

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:

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