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 Pa…


This content originally appeared on DEV Community and was authored by iskurbanov

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.


This content originally appeared on DEV Community and was authored by iskurbanov


Print Share Comment Cite Upload Translate Updates
APA

iskurbanov | Sciencx (2023-03-16T23:33:08+00:00) Next.js 13 Image Cheatsheet. Retrieved from https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/

MLA
" » Next.js 13 Image Cheatsheet." iskurbanov | Sciencx - Thursday March 16, 2023, https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/
HARVARD
iskurbanov | Sciencx Thursday March 16, 2023 » Next.js 13 Image Cheatsheet., viewed ,<https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/>
VANCOUVER
iskurbanov | Sciencx - » Next.js 13 Image Cheatsheet. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/
CHICAGO
" » Next.js 13 Image Cheatsheet." iskurbanov | Sciencx - Accessed . https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/
IEEE
" » Next.js 13 Image Cheatsheet." iskurbanov | Sciencx [Online]. Available: https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/. [Accessed: ]
rf:citation
» Next.js 13 Image Cheatsheet | iskurbanov | Sciencx | https://www.scien.cx/2023/03/16/next-js-13-image-cheatsheet/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts