Offscreen Images

Overview

Offscreen images are images that appear below the fold. Since users can't see offscreen images when they load a page, there's no reason to download the offscreen images as part of the initial page load. In other words, deferring the load of offscreen images can speed up page load time and time to interactive.

Recommendations

To pass this audit, refactor your pages to only download above-the-fold images during the initial request. Applying this strategy to your JS, HTML, CSS, and other resources can also speed up page load time. See Critical Rendering Path to learn more.

Consider using an IntersectionObserver to intelligently determine when to lazy-load offscreen images. For example, suppose you have some images at the bottom of a very long page. With an IntersectionObserver, you can load the images only when the user has scrolled halfway down the page. See Intersect all the things! for more on this approach.

If you do use an IntersectionObserver, make sure to include the polyfill, because native browser support is limited.

More information

Lighthouse flags offscreen images that were requested before the Time To Interactive (TTI) event.

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)