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="">