LazySizes Webflow Demo

Image with Responsive Lazy Loading

published: 04/20/2019

Integrating lazy loading into webflow requires different methods depending on what you want to accomplish. I am choosing to use http://afarkas.github.io/lazysizes/. This technique is using a single image for replacement and responsive sizing has been turned off for the LQIP since there is no point.

Note: Google Chrome, Mozilla Firefox, and MS Edge current releases support native lazy loading by adding a custom attribute to image tags. The attribute is: loading="lazy", best used on images where dimensions re defined. Coming soon to Safari as well.

Installing the Library

Webflow does not allow the uploading of JavaScript to the projects assets panel. So you need to find a CDN that hosts the file for you or you need to upload the script to a resource you can reference via a URL. For ease and performance reasons, this demo will leverage JSDeliver as the CDN. The project is located at https://www.jsdelivr.com/package/npm/lazysizes

The current version (at the time of this writing is 5.1.0) is available at https://cdn.jsdelivr.net/npm/lazysizes@5.1.0/lazysizes.min.js

I added the script tag to this page's settings => Custom Code before body text area using the SRI version. You could paste it in the head since there are no dependencies.

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.1.0/lazysizes.min.js" integrity="sha256-BoISUaKecfj9T2A0lmfFTRY7Fte8ix1HFEx/UEJoPu8=" crossorigin="anonymous"></script>

Methods

Combine data-srcset with data-src technique

Using that code (published then copied source), I created a lazysizes code block for demonstration, which is in a custom code embed at the bottom of the page.  The embed has no parent so it should take up the full size of the viewport if yours is less that 3883 pixels wide (original dimensions).

Webflow Responsive Image Reference

The image was uploaded to WF and placed on the page from the media library. Webflow created create responsive versions.

Below is a visual reference to the smallest version Webflow created after I embedded it on a page, and copied the source URL from the published website source.

Below is the HTML code Webflow created once it generated the responsive images; for reference.

<img src="https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash.jpg" srcset="https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-500.jpeg 500w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-800.jpeg 800w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-1080.jpeg 1080w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-1600.jpeg 1600w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-2000.jpeg 2000w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-2600.jpeg 2600w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-3200.jpeg 3200w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash.jpg 3883w" sizes="(max-width: 479px) 91vw, (max-width: 767px) 95vw, 96vw" alt="">

Using that code, I created a lazysizes code block for demonstration, which is in a custom code embed. The image paths came from the block above. The embed has a 100% width parent so it should take up the full size of the viewport, if yours is less than 3883 pixels wide (original dimensions on upload).

<img class="lazyload" data-src="https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-500.jpeg" data-srcset="https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-500.jpeg 500w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-800.jpeg 800w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-1080.jpeg 1080w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-1600.jpeg 1600w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-2000.jpeg 2000w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-2600.jpeg 2600w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash-p-3200.jpeg 3200w, https://assets.website-files.com/5c703768da141671a5c85e37/5cc857b5862837b04877fe5f_clayton-cardinalli-1546798-unsplash.jpg 3883w" data-sizes="auto" alt="">

Demo Image (Lazyloaded responsive)