Prismic Meetup
Prismic's Best Quarter Yet! A Tsunami of ReleasesWatch the recording
Performance & UX
·6 min read

A Guide to Next.js Image Optimization Using next/image

Gone are the days when customers were satisfied with slow-loading websites that took five to ten seconds to load. These days, customers want lightning-fast load times and will not settle for less. Failure to meet this expectation can lead to churn, high bounce rates, poor SEO performance, and low search engine results page (SERP) ranking. We must ensure that customers always get the best experience.

There are different factors and aspects of a website that we must focus on to provide the best user experience and achieve optimum performance. One of these factors is the size of the images on our website. If not properly optimized, images can negatively affect website performance.

We can avoid this by ensuring that images are properly optimized. There are different manual and programmatic tools we can use to optimize images, such as online optimization tools and CDNs like Imgix and Cloudinary. Another tool we can use to optimize images is the custom image component Next.js provides.

In this article, we will explore the Next.js image component and how it helps with image optimization. We will learn how it works, its features, and how to integrate it into Next.js applications.

Importance of image optimization

Data from Web Almanac shows that images account for almost 75% of a webpage’s weight, and 75% is a lot! Images are a major culprit when it comes to a webpage’s size. This may not be an issue for websites that don’t have images. However, most of them do.

We cannot simply stop using images because of their large size. Not only will that lead to a poor browsing experience, but it will also affect industries that rely heavily on them, such as the e-commerce industry.

This is where image optimization comes in. The image optimization process involves compressing and reducing the size of image files, resizing images to the appropriate dimensions, and choosing next-gen image formats that provide optimal performance, such as WebP and AVIF.

We can eliminate the negative impact that images have on websites by properly optimizing them. That way, we can have as few or as many images on our website without affecting performance. Image optimization ensures that our websites have the best Core Web Vitals (CWV), enhances website loading speed, reduces bounce rates, improves SEO, and boosts overall user engagement.

What is the Next.js image component?

The Next.js image component, or next/image, is a custom component from Next.js. It is an extension of the standard HTML img element with additional features and optimizations. It’s basically a version of the regular img element on steroids. It allows us to easily and automatically optimize images in our Next.js applications.

While there are online tools that we can use to optimize images, they are not effective at scale. Neither are these manual methods efficient for websites with hundreds and thousands of images. This is where next/image comes in as a programmatic solution for optimizing images.

Benefits of next/image

There are different advantages and benefits of working with the image component.

Automatically compresses images

The component automatically compresses images for optimum performance, which improves the overall performance of a website. This helps save bandwidth by reducing image file sizes and the amount of data the browser needs to download during rendering.

Serves images in modern formats

The component automatically serves images in modern image formats that are supported by the user’s browser. This ensures that only the most optimized and lightweight version of images reaches the client. Next.js serves images in modern forms because these formats preserve fidelity and quality while remaining performant.

Supports image lazy loading

The component supports the lazy loading and priority loading of images. Lazy loading means the images are loaded only when they enter the viewport rather than all at once when the page loads. This loading strategy helps to improve the initial page load time. Priority loading lets us specify which images should be loaded first based on their importance to the user's current view.

Improves user experience

Optimized images lead to fast-loading websites, which in turn means that users get the best experience possible. Using next/image not only enhances website load times but also minimizes Cumulative Layout Shift (CLS) by ensuring that images are loaded with their appropriate width and height dimensions. This further improves the overall user experience.

Provides a richer developer experience and boosts productivity

The component abstracts the complexities of image optimization and makes it easier for us to work with images. This means we can focus on core activities, such as handling bugs and building propriety functionalities. We can rest easy knowing that we don’t have to worry about optimizing images because next/image has that taken care of for us.

How to import next/image

You can follow the simple steps below to import next/image into your Next.js application.

First you will want to install Next.js by running the following command:

npx create-next-app@latest

To complete the process, simply import the image component into the file where it's needed. That’s it!

import Image from 'next/image' //import the image component
export default function Page() {
  return (
      alt="Picture of the author"

Properties of next/image

As of this writing, the image component has sixteen properties. Here’s a brief overview of each property.

Required Props

  • src: Used to specify the source of an image. The source can be an external URL or a statically imported file. Its prop type is string.
  • width and height: Defines the dimensions of an image. Their prop type is number.
  • alt: Used to provide alternative text for an image. This text is displayed when the image fails to load. The alt text is also important for accessibility and SEO. Its prop type is string.

Optional props

  • loader: A custom function that generates the complete URL of an image source. For example, if the source is a partial URL such as profile.png, we can write a loader to resolve the full URL, say https://imigx.location-of-image/profile.png.
  • fill: Instead of setting the width and height of an image, we can use the fill prop instead. It will cause the image to fill any available space in its parent element. Its prop type is boolean and defaults to position: "absolute".
  • sizes: Used to set up responsive sizes for images at different breakpoints. The image component will use the sizes defined to generate the appropriate srcSet versions of the images. This property is only needed for images that use the fill layout. Its prop type is string, and its default value is 100vw (full-screen width).
  • quality: A range of numbers between 1 and 100 that determines the quality of the optimized image. Its prop type is number, and it defaults to 75.
  • priority: Next.js lazy loads all images by default. However, when an image’s priority is set to true, next/image preloads that image. Its prop type is boolean, and it defaults to false.
  • placeholder: Allows us to display a low-resolution version of an image as a placeholder while the actual image loads. Its prop type is string, and it defaults to empty. When set to empty no placeholder will be shown. However, when set to blur, an image blur placeholder will appear till the image finishes loading.

Advanced props

  • style: Allows us to pass an object of CSS styles directly to an image component. This gives us more control over the styling of images.
  • onLoadingComplete: A callback function that runs once the image has finished loading and the placeholder has been removed.
  • onLoad: A callback function that runs once the image has finished loading.
  • onError: A callback function that runs if the image does not load.
  • loading: Defines the loading strategy for an image. It is set to lazy by default. It can also be set to eager, which means the component will load the image immediately.
  • blurDataURL: Works together with the placeholder prop. It specifies a data URL for a blurred version of the image, which is displayed as the placeholder.

The code snippet below shows a practical application of the properties.

import Image from 'next/image'

const imageLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality || 75}`

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',

export default function Page() {
  return (
      alt="Picture of the author"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      onLoadingComplete={(img) => console.log("image loaded successfully")}

Build the most performant websites

Join other developers on the leading edge of development and subscribe to get monthly insights on creating websites that are performant and deliver maximum business value.

Improvements with Next.js 13

Data from a community survey performed by the Next.js team showed that 70% of respondents use the image component in production, and they saw improved Core Web Vitals. The image component received the following improvements with the launch of Next.js 13.

  • It provides enhanced image optimization, meaning images will load faster, even with poor internet connections.
  • The alt attribute is now required. This will enforce accessibility best practices for images.
  • It ships less client-side JavaScript, which helps reduce layout shifts and provides faster loading.
  • It supports native browser lazy loading. This means the component is much faster because native lazy loading doesn’t require hydration, leading to better performance.

Integrate next/image in your Next.js 13 project

Seeing code in action can often solidify concepts and help with practical application. If you’re ready to take your understanding of next/image a step further, this video walks through implementing the Next.js image component in a Next.js 13 project step-by-step.

Install the starter and see how to optimize images on your website with Next.js and how you can further simplify this using Prismic's image component!

Summing up next/image

Images are an integral part of the web experience. After all, a picture — or image — is worth a thousand words. Luckily, we don’t need to trade between performance and providing users with engaging content. We can use tools like next/image to ensure that all website images are properly optimized.

Frequently asked questions

What is the best image format for Next.js?

No image format works best for Next.js. Instead, Next.js helps with image optimization by ensuring browsers receive images in the most compatible and performant format. It automatically serves images in modern formats such as WebP and AVIF.

Article written by

Nefe Emadamerho-Atori

Nefe is an experienced front-end developer and technical writer who enjoys learning new things and sharing his knowledge with others.

More posts
Nefe Emadamerho-Atori

Join the discussion