Streaming live at 10am (PST)

Lazyload for Webflow Images


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 ?


I read this post on and was asking me the same question. I’ll give it a try, if I find something useful I’ll tag you.


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="" async></script>

And there you go. Publish and see it live.

Look at this rough example:

The image Gear Icon

The image Anchor Icon


@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:


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


Hey @anthonysalamin

If you want this idea to be able to be used with CMS, upvote this on Wishlist:


This is awesome! thanks for the example. How can we lazyload BG images?