easyPerformanceNext.js

The image tax

A developer asked an AI assistant to add a hero banner image to a Next.js landing page. The suggested code renders the image correctly, but the Lighthouse performance score drops sharply and the Largest Contentful Paint time nearly triples.

Hero.tsx

export default function Hero() {
  return (
    <section>
      <img src="/hero-banner.png" alt="Product hero banner" />
      <h1>Ship faster with ReviewLabs</h1>
    </section>
  );
}

Why does this hero image tank the page's Largest Contentful Paint score?

A plain <img> ships the full-resolution source file with no responsive sizing, lazy-loading, or modern format conversion. next/image handles all of that automatically and this code opts out of it.

Next.js blocks all <img> tags from rendering above the fold by default.

<section> elements can't contain images without an explicit width and height in Next.js.

Long alt text forces the browser to delay paint until it's been read.