Webflow & Images

A Resource Guide

Tips and tricks when working with images in Webflow. Explore the magic. Have fun. Do crazy stuff. Make a pizza.

Note: Webflow has enabled the "lazy" attribute for assets. You can choose default, eager, or lazy and since this is now also supported on A grade browsers there should no longer be the need to leverage JavaScript solutions for like these for most use cases.

Tutorials

Lazy Loading with lazySizes LQIP

low quality initial picture technique replacement

The low quality image placeholder pattern uses a low quality image for the first impression. Then magically is replaced with a high quality image after the page is loaded. This reduces the initial page load headed to the browser.

LQIP Article / Demo

Lazy Loading with just two embed symbols

lazysizes noscript progressive enhancement extension

This technique is using an html embed before and another html embed after any element or group of elements on a page. This method uses plugin from lazysizes called "lazysizes noscript/progressive enhancement extension". Whatever is inside will be lazy loaded.

Noscript Progressive Enhancement / Demo

Lazy Loading Responsive Images

With Webflow created responsive images

Published a high quality image uploaded to webflow, copied source, created a custom code block formatted for responsive lazy loading.

Responsive Webflow Images / Demo