How to Add Lazy Loading to Images in Webflow

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to optimize image loading in Webflow with native lazy loading.

1. Enable native lazy loading in Webflow

In the Webflow Designer, select your image. In the Settings panel, set the Loading field to Lazy. It’s the simplest and most efficient method: no JavaScript required.

2. Optimize above-the-fold images

Images that appear right away when the page loads, like the hero image or logo, should use Loading: Eager so they don’t slow down rendering. Lazy loading works against you here and can hurt your LCP score.

3. Add a fade-in animation on load

For a fade-in effect when lazy images load, add this CSS in an embed:

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

document.querySelectorAll('img[loading="lazy"]').forEach(function(img) {
  img.addEventListener('load', function() { img.classList.add('loaded'); });
  if (img.complete) img.classList.add('loaded');
});

Conclusion

Lazy loading reduces initial load time and improves Core Web Vitals. Use cases:

• Pages with lots of images (portfolio, gallery)
• Blog pages with images in the articles
• CMS collections with thumbnails