Tips and tricks when working with images in Webflow. Explore the magic. Have fun. Do crazy stuff. Make a pizza.
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.
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.
Published a high quality image uploaded to webflow, copied source, created a custom code block formatted for responsive lazy loading.