Next.js 13 Image Cheatsheet

This cheat sheet is meant to provide an overview of the important features and usage of the Next.js Image Component, which helps to optimize and enhance your images.

Basic Usage

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  );
}

Required Props

• src: The image source, can be an internal path or an external URL.
• width: The rendered width in pixels.
• height: The rendered height in pixels.
• alt: Description of the image for screen readers and search engines.

Optional Props

• loader: A custom function used to resolve image URLs.
• fill: Boolean that causes the image to fill the parent element.
• sizes: A string that provides information about how wide the image will be at different breakpoints.
• quality: The quality of the optimized image, an integer between 1 and 100.
• priority: When true, the image will be considered high priority and preload.
• placeholder: A placeholder to use while the image is loading.
• style: Allows passing CSS styles to the underlying image element.
• onLoadingComplete: A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
• onLoad: A callback function that is invoked when the image is loaded.
• onError: A callback function that is invoked if the image fails to load.
• loading: The loading behavior of the image. Defaults to lazy.
• blurDataURL: A Data URL to be used as a placeholder image before the src image successfully loads.
• unoptimized: When true, the source image will be served as-is instead of changing quality, size, or format.

Configuration Options

Configure the Image Component in next.config.js. The following options are available:

• remotePatterns: Configuration required for using external images.
• domains: A list of allowed hostnames for external images.

Recommended way

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
}

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

Example usages of the Image component can be found at this repo:

Image Examples

Comments

[Josep Viciana]

I don't understand what's the meaning of this kind of articles. Isn't basically the same as the official docs but with less context? 🤔

[iskurbanov]

Yes that’s why it’s a cheat sheet :) I just personally find it useful to be able to quickly glance at the properties needed without digging through all the docs.