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
    28 May, 2021 10:50pm

    This functionality was shipped on Aug 27, 2020.

    Read the release notes.

  • Janne Parri commented
    11 Apr, 2020 04:46am

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

  • Tiada Guru commented
    15 Feb, 2020 09:52pm

    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
    15 Feb, 2020 09:42pm

    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
    30 Jan, 2020 11:29am

    Waiting for that!

  • Alexander Zaxarov commented
    13 Nov, 2019 10:40am

    I hope it will be done!

  • Kiran Kumar commented
    3 Mar, 2019 08:57am

    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
    10 Jan, 2019 09:23pm

    This really would be a great piece to add.

  • Dennis Winter commented
    14 Sep, 2017 01:31pm

    I'm with you, that would be great!

  • Chris Lobue commented
    21 Apr, 2017 02:38am

    LOVE This!!!  

    Voting is closed... I get it.

    Tryin to show support for this :)

  • +210