Add option to 'lazy-load' images to improve load time, UX (and SEO)

On image-heavy sites, an option to 'lazy-load' images would help speed things up and create a better user experience.

Combined with the responsive images feature this would improve the UX and Speed/SEO of image-heavy sites.

  • Matthew Sanderson
  • Feb 1 2017
  • Shipped
  • Admin
    Webflow Admin commented
    May 28, 2021 22:50

    This functionality was shipped on Aug 27, 2020.

    Read the release notes.

  • Janne Parri commented
    April 11, 2020 04:46

    This would be awesome. Paired with next gen image formats the webflow sites would be blazing fast!

  • Tiada Guru commented
    February 15, 2020 21:52

    https://bugs.webkit.org/show_bug.cgi?id=196698

    This is now being actively developed again for Safari (iOS + macOS) as well. Webflow, save us the tedium!

  • Tiada Guru commented
    February 15, 2020 21:42

    Suddenly, in Chrome 76, now the *browser* can handle lazy-loading if the loading attribute has been set on the <img> element to "lazy". However, Chrome is not a standards body. This week, the HTML specification now includes lazy-load. Subsequently, Firefox has now indicated support will land in Firefox 75 in some way (perhaps by default)!

    Thus in a few short months, over 65% of global internet users will benefit from loading="lazy" attribute (source).

    Read more here: https://web.dev/native-lazy-loading/
    Firefox news: https://www.neowin.net/news/firefox-75-nightly-comes-with-lazy-loading-flag-for-images-and-iframes

    Wordpress has already added this to Wordpress Core 5.4: 

    https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/
    https://github.com/WordPress/wp-lazy-loading

    What Webflow should do:

    1. Add the loading="lazy" attribute to ALL images & iframes by default.

    2. Create a toggle to disable the attribute site-wide (in Project Settings) or disable lazy-loading on certain iframes & images (in the Designer). 

    Today, this is only possible through brute force (i.e., tedious & prone to errors) in Webflow on every image & iframe by selecting the image, going to Element Settings, and adding the custom attribute one at a time. 

  • Alexander Zaxarov commented
    January 30, 2020 11:29

    Waiting for that!

  • Alexander Zaxarov commented
    November 13, 2019 10:40

    I hope it will be done!

  • Kiran Kumar commented
    March 03, 2019 08:57

    Posted this elsewhere, but doing so here as it is relevant.

    The attached image is a recommendation from Google's Page Speed Insights for one of my pages. It says 


    " Serve images in next-gen formats

    Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption." 

    We choose Webflow because they will be ahead of the curve, or follow best practices (which they do a good job of minifying CSS and other stuff) but I am surprised there isn't enough noise about Images which are one of the important factors that affect page speed which in turn affects the SEO.

    Please prioritise this.

  • I-Net Plc commented
    January 10, 2019 21:23

    This really would be a great piece to add.

  • Dennis Winter commented
    September 14, 2017 13:31

    I'm with you, that would be great!

  • Chris Lobue commented
    April 21, 2017 02:38

    LOVE This!!!  

    Voting is closed... I get it.

    Tryin to show support for this :)

  • +210