next/image

~22 min · next/image, optimization, CLS

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

What the component buys you

<Image> wraps <img> with: format conversion (WebP/AVIF), responsive sizes, lazy loading, blur-up placeholders, and reserved space (no Cumulative Layout Shift). The optimizer runs at the edge on Vercel; sharp takes over self-hosted.

Local vs remote images

Local images (import) get their dimensions auto-detected. Remote images need explicit width and height so the layout reserves space; the host has to be in images.remotePatterns.

v16: `preload`, not `priority`

The above-the-fold hint was renamed from priority to preload. Old code still works but logs a deprecation warning.

Fill mode for unknown sizes

fill stretches to the parent container; pair with object-fit via Tailwind/CSS and a sizes hint for responsive serving.

Code

Local image, auto-sized·tsx

import Image from 'next/image';
import hero from '@/public/hero.jpg';

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Hero"
      placeholder="blur"
      preload  // v16 — replaces 'priority'
    />
  );
}

Remote image with explicit dimensions·tsx

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com', pathname: '/**' },
    ],
    formats: ['image/avif', 'image/webp'],
  },
};
export default config;

// In a component:
<Image src={user.avatarUrl} alt={user.name} width={48} height={48} className="rounded-full" />

Fill + object-fit for responsive backgrounds·tsx

<div className="relative h-64 w-full">
  <Image
    src="/background.jpg"
    alt=""
    fill
    sizes="100vw"
    className="object-cover"
  />
</div>

External links

next/image

Exercise

Replace every plain <img> in your project with <Image>. For remote images, register the host in remotePatterns. Confirm Lighthouse's CLS score drops to 0.

next/image

What the component buys you

Local vs remote images

v16: `preload`, not `priority`

Fill mode for unknown sizes

Code

External links

Exercise

Progress

Comments 0

What the component buys you

Local vs remote images

v16: preload, not priority

Fill mode for unknown sizes

Code

External links

Exercise

Progress

v16: `preload`, not `priority`