mediumFrontend

How does next/image optimize images in Next.js?

Q: How does next/image optimize images in Next.js?

**TL;DR.** next/image serves **correctly-sized, modern-format** (WebP/AVIF) images **on demand**, **lazy-loads** by default, and **reserves space** (width/height) to prevent layout shift. It optimizes via a built-in loader/CDN, cutting bytes and improving **Core Web Vitals**. original large JPEG next/image resize + WebP/AVIF <path class='d-edge-accent' d='M354 75 H402' m

780 views

Understand the problem

Automatic resizing, formats, and lazy loading.

nextjsnext-imageoptimizationperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Responsive, priority LCP image

import Image from 'next/image';

<Image
  src="/hero.jpg" alt="Hero"
  width={1200} height={630}      // reserves space → no CLS
  priority                        // eager-load the LCP image
  sizes="(max-width: 768px) 100vw, 1200px"
  placeholder="blur"
/>;
// next.config.js: images: { remotePatterns: [{ hostname: 'cdn.example.com' }] }

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle redirects and rewrites in Next.js?

How do Server Actions differ from Route Handlers in Next.js?