To help your sites load faster, we’ve made all new images “lazy load” by default, meaning they load when they appear on the screen — as opposed to all images on a page loading when the site is first opened. 

Some context: image-heavy sites can dramatically slow down page loads. Aside from resizing and optimizing individual assets (or relying on our responsive images optimization), one trick you can use to address this problem is adding a custom “loading = lazy” attribute to images, which instructs the browser not to load that image until the user scrolls it into view. 

This has always been possible with custom code, but that can be a pain — and so, to make your sites run faster and your life a bit easier, we’ve set all new images to lazy load by default. 

This update does not affect existing images on sites, although you can easily enable this setting per image from the image’s settings panel. You can also override this default per-image if you want to have your images load as the page loads initially.

It’s also important to note that lazy loading only applies for inline images (i.e. <img> elements), and does not cover background images, which can be a major source of page bloat if not properly optimized. Aside from compressing and optimizing the background images you do use, you can also use image object-fit as an alternative, which lets you achieve the same designs while taking advantage of lazy loading and Webflow’s built-in responsive image feature.