What Are Offscreen Images? Lazy Loading Complete Guide (2026)

Why Offscreen Images Hurt Performance

An offscreen image isn't free just because the user can't see it. It costs bandwidth, network connections, decoding time, and — most damagingly — contention with the LCP image during the critical load window.

• LCP delay:The browser has limited parallel connections (typically 6 per origin). When 30 offscreen images are queued at the same priority as your hero, the hero's bytes arrive late — directly inflating LCP.
• Wasted bandwidth:If a visitor never scrolls past the first viewport, every offscreen image was a free gift to the bit bucket. On long pages, that's often 70%+ of the page's total image weight.
• Higher mobile data costs: On metered mobile plans, downloading invisible images is a real cost passed to the user. It feels like the site disrespects their data.
• Battery drain: Network radio activity is one of the largest battery drains on mobile. More image bytes = more radio time = faster battery depletion.
• Total byte weight:The audit's 50 KB threshold is usually an underestimate of real-world impact — many pages have 500 KB to several MB of deferrable image bytes.

How Lazy Loading Works (and the One Line That Fixes It)

Native lazy loading shipped in Chrome 76 and is now in 95%+ of browsers. It's a single HTML attribute. The browser uses its own viewport-proximity heuristics to defer the fetch until the image is close to scrolling into view.

<!-- BEFORE: every image fetched immediately, even offscreen ones -->
<img src="below-the-fold.jpg" alt="Product detail" />

<!-- AFTER: browser defers the fetch until the image nears the viewport -->
<img
  src="below-the-fold.jpg"
  alt="Product detail"
  width="800"
  height="600"
  loading="lazy"
/>

<!-- LCP / hero image: upgrade priority, do NOT lazy-load -->
<img
  src="hero.jpg"
  alt="Product hero"
  width="1600"
  height="900"
  loading="eager"
  fetchpriority="high"
/>

<!-- Everything below the fold: defer it -->
<img
  src="feature-1.jpg"
  alt="Feature 1"
  width="600"
  height="400"
  loading="lazy"
/>

How to Identify Offscreen Image Issues

Offscreen image waste is reported as a list of specific URLs and the bytes you'd save by deferring them. Pull the list, then mechanically apply loading="lazy"to everything that isn't above the fold.

• Greadme's deep scan — surfaces every offscreen image flagged by the audit, ranked by potential KB savings, and pairs each with an AI-generated fix or one-click GitHub PR.
• Greadme's crawler scan — runs the audit across every indexable page so you can see which templates (product, listing, article) ship the most deferrable bytes.
• Greadme's AI visibility analyzer — checks whether image-driven LCP is dragging your page out of the band that AI answer engines prefer to cite.
• web.dev performance audits — the "Defer offscreen images" opportunity lists every offending URL and its KB cost.
• Chrome DevTools → Performance panel — record a load with the viewport at the top of the page; any image that downloads but never paints in the first 2 seconds is a lazy-load candidate.

8 Proven Lazy-Loading Patterns

<img
  src="article-image.jpg"
  alt="Diagram of the system"
  width="1200"
  height="675"
  loading="lazy"
/>

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  width="560"
  height="315"
  title="Product walkthrough"
></iframe>

/* Reserve space proportionally for fluid images */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;
    img.classList.add('loaded');
    observer.unobserve(img);
  }
}, { rootMargin: '200px' });  // start 200px before visible

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

<div class="hero-bg" data-bg="/hero.jpg"></div>

<script>
const bgObserver = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const el = entry.target;
    el.style.backgroundImage = `url(${el.dataset.bg})`;
    bgObserver.unobserve(el);
  }
}, { rootMargin: '200px' });

document.querySelectorAll('[data-bg]').forEach((el) => bgObserver.observe(el));
</script>

Common Lazy-Loading Pitfalls and Fixes

Lazy Loading vs Eager Loading vs fetchpriority

FAQ

What is a good threshold for lazy-loading images?

The audit fires when more than ~50 KBof deferrable image bytes are loaded immediately. In practice, you should lazy-load every image that isn't in the initial viewport on the most common breakpoint — typically the second screen down and beyond.

Is loading="lazy" safe to use everywhere?

Almost — it's safe on every image below the fold, on iframes, and on embeds. It is notsafe on the LCP image or on any image that's already visible at first paint. Lazy-loading the hero is one of the most common LCP regressions in performance work.

Does loading="lazy" work without JavaScript?

Yes. Native lazy loading is a browser feature, not a JS feature. It works in 95%+ of browsers since 2020 with no script tag, no library, and no observer code. That's the main reason it should be your default — IntersectionObserver-based libraries are only worth the complexity for custom effects.

Will lazy loading hurt my image SEO?

Not when implemented correctly. Google explicitly supports native loading="lazy" and indexes the images normally. The risk only appears with custom JS implementations that strip srcand rely on JS to populate it later — and even then, Google will usually crawl the rendered HTML. Stick to native lazy loading and you're safe.

How do I lazy-load images in a single-page app or React component?

Use the framework's image component if available (Next.js <Image>, Nuxt <NuxtImg>, Astro <Image>) — they emit loading="lazy" by default and handle fetchpriority, responsive sizing, and modern formats in one go. Otherwise, render a plain <img loading="lazy"> with explicit width and height.

Does lazy loading affect AI search engines like ChatGPT and Perplexity?

Indirectly, yes. AI answer engines preferentially cite pages that already rank well in traditional search, and offscreen-image waste hurts LCP, which feeds Core Web Vitals, which feeds rankings. Pages that defer offscreen images correctly get faster LCP, better rankings, and better odds of being cited in Google AI Overviews and Perplexity answers.

Should I lazy-load images that are just below the fold?

Yes — the lazy-loading penalty is small (typically a few hundred milliseconds of fetch delay), and the upside is removing the image from the critical-path connection pool. The browser's native heuristic is generous enough that "just below the fold" images are usually fetched quickly enough to feel instant on scroll.