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.


RESETRUNFULL
import Image from 'next/image'import profilePic from '../public/me.png'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>
    </>
  )}