Streaming live at 10am (PST)

Lazyload for Webflow Images


#1

Hi there :slight_smile:

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 ?

https://web.dev/fast/use-lazysizes-to-lazyload-images


#2

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.


#3

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 :gear: icon, then click the :anchor: : 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
  • Access you Pages > Edit Pages Settings :gear: > 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


#4

@gilson that is awesome !!
Thank you so much for having taken the time to try it out, much appreciated :wink:
I will start with this technique ! Having it work on collection images would be the icing on the cake though ! :blush:


#5

Yeah, if we could make the attributes get content from the CMS that you be phenomenal.


#6

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