Before moving forward, we recommend you to read Image Optimization first.

Image Optimization can be enabled via the Image component exported by next/image.

For an example, consider a project with the following files:

  • pages/index.js
  • public/me.png

We can serve an optimized image like so:

import Image from 'next/image'

function Home() {
  return (
      <h1>My Homepage</h1>
        alt="Picture of the author"
      <p>Welcome to my homepage!</p>

export default Home

Image accepts the following props:

  • src - The path or URL to the source image. This is required.
  • width - The intrinsic width of the source image in pixels. Must be an integer without a unit. Required unless unsized is true.
  • height - The intrinsic height of the source image, in pixels. Must be an integer without a unit. Required unless unsized is true.
  • sizes - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device. More info.
  • quality - The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Default 75.
  • loading - The loading behavior. When lazy, defer loading the image until it reaches a calculated distance from the viewport. When eager, load the image immediately. Default lazy. More info
  • priority - When true, the image will be considered high priority and preload.
  • unoptimized - When true, the source image will be served as-is instead of resizing and changing quality.
  • unsized - When true, the width and height requirement can by bypassed. Should not be used with above-the-fold images. Should not be used with priority.

All other properties on the <Image> component will be passed to the underlying <img> element.