MENU


Image Optimization

The Next.js Image component, next/image, is an extension of the HTML <img> element, evolved for the modern web. It includes a variety of built-in performance optimizations:

Improved Performance: Always serve correctly sized image for each device, using modern image formats.

Visual Stability: Prevent Cumulative Layout Shift automatically.

Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders.

Asset Flexibility: On-demand image resizing, even for images stored on remote servers.

Below, this component would live at 'app/page.js' in the App Router (mapping to the '/' route). It needs no 'use client' directive — rendering an <Image> doesn't require any client-side interactivity, so the component can stay a Server Component. next/image works the same way whether it's used in a Server Component or a Client Component.


// app/page.jsimport Image from 'next/image'import profilePic from '../public/me.png'export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"        // width={500} automatically provided        // height={500} automatically provided        // blurDataURL="data:..." automatically provided        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )}