Image Lazy Loading

Last Update: May 11, 2026

Image lazy loading is a technique that delays the loading of images until they’re actually needed. Instead of downloading every image on a page the moment a visitor arrives, the browser only loads images as they’re about to scroll into view.

Without Image lazy loading, the browser tries to load every image at once, even those you haven’t asked for yet, further down the page or post, or that aren’t yet in view. With lazy loading enabled, images only load as they come into view.

With Avada, Image Lazy Loading can be enabled under the Performance tab at Avada > Global Options > Performance. This loads only the images that are visible in the viewport. As the user scrolls and more images come into view, they are then loaded as well. This provides an instant benefit to page load times, as only the initial images in the viewport are loaded.

How Image Lazy Loading Works

When a visitor lands on a page, the browser:

1
Loads the HTML, CSS, and any images that are immediately visible (above the fold).
2
Skips the images further down the page for now.
3
Watches the visitor’s scroll position.
4
Loads each image just before it scrolls into view.

Why Image Lazy Loading Is Useful

Lazy loading is genuinely helpful for performance because:

Faster initial page load — The browser doesn’t waste time downloading images the visitor may never see.
Less bandwidth used — Especially important for mobile users on data plans.
Lower server load — Fewer simultaneous requests when a page first loads.
Better Core Web Vitals — Particularly your initial load metrics.

For a long blog post with 20 images, for example, lazy loading might mean only 2 or 3 load initially instead of all 20. That’s a significant performance saving.

Where Is Lazy Load Enabled in Avada?

Image Lazy Loading in Avada is enabled in the following Design and Layout Elements:

Blog Element
Blog Archive Pages
Single Blog Post Featured Image, first and slides
Blog Grid with multiple images
Portfolio Element – grid and masonry
Portfolio Archive
Single Portfolio Post Featured Image, first and slides
Gallery Element
Image Element
Image Before/After Element

Person Element
Testimonial Element
Content Box Element
Flip Box Element
Slider Element
Post Slider Element
Recent Posts Element
Lightbox Element
Container background
Column background

For more information on How Avada Controls Responsive Images, please see the linked doc.

The Skip Image Lazy Loading Option

In the Avada Design and Layout Elements, there is also an option to Skip Lazy Loading, which lets you enable it universally and then control individual Elements to turn it “On” or “Off”. For example, if you add a logo image to the header or an image at the top of the page, you would want to skip lazy loading for those resources, since they are in the initial viewport.