What is lazy loading and how does it apply to images and components?

Lazy loading defers downloading a resource until it is needed (user scrolls to it, navigates to a route, or interacts with a feature).

Images — native lazy loading:

<img src="hero.jpg" loading="lazy" alt="Hero" />

The browser only fetches the image when it enters (or is near) the viewport. Supported in all modern browsers. Next.js <Image> adds this automatically.

React components — React.lazy:

const Modal = React.lazy(() => import('./Modal'));

function App() {
  const [open, setOpen] = useState(false);
  return open ? (
    <Suspense fallback={<Spinner />}>
      <Modal />
    </Suspense>
  ) : <button onClick={() => setOpen(true)}>Open</button>;
}

The Modal bundle is only downloaded when the user clicks "Open" — not on initial page load.

Impact: route-level lazy loading is typically the highest-ROI optimization — initial bundle can shrink 40–70% for content-rich apps.