TutorialWeb Development

Using The New <next/image> Component

Next.js 12.2 includes a totally revised component for image optimization. Let’s see what has changed.

Konstantin Münster Avatar
Konstantin Münster
07 August 2022
4 min read
Read on Medium
Using The New <next/image> Component
Photo by Robert Shunev on Unsplash

Right now, the newer next/image component is still under development and only available using the experimental flag.

With Next.js 10 and the then introduced next/image component, serving images became a lot easier. Image compression, modern image formats, lazy loading - everything just by swapping out the browser default <img /> tag.

Though, it was not that simple after all. While the user experience improved a lot, the developer experience was not as simple as hoped. Properties that didn’t behave as expected, images that were wrapped several times like a good old present on Christmas.

Luckily, the feedback had been heard and Next.js introduced a revised, experimental version for the next/image component in Next.js 12.2.

Let’s look at the major changes.

Changes for next/image in Next.js 12.2

This table shows the biggest changes that have been introduced in Next.js 12.2 and how it compares to the old image component.

Next.js 10Next.js 12.2
HTML OutputRenders <img /> with span and div wrapperRenders <img /> without any wrappers
SizingWidth/height represent rendered or original image sizeWidth/height always represent the rendered image size
StylingUsing layout and CSS propertiesUsing CSS properties
Fill ModeSet layout=fillSetting fill=true and set styles on parent container

Let’s see how this would look like in an example. The API for using the image component hasn’t changed much but there are still some tweaks that are useful to know.

How to use next/image with fixed image size

If you want to preserve the aspect ratio of the image, you can use the fixed layout. Depending on whether you are importing your image locally or not, you can simply set a width and height image of the rendered image, that's it!

<Image
  src={image.srcUrl}
  alt="Image"
  width={600} // If you import the image locally, you can omit this
  height={600} // If you import the image locally, you can omit this
/>

Additionally, you could set properties like style or className to style the image.

Almost not worth explaining, right? I’m glad it is that simple! Coming from an approach that differed immensely from the browser built-in <img /> behavior, this “new” approach doesn’t let us think much about how to use it properly.

How to use next/image with fill mode

But what if you just want to let the image fill its parent container? For those cases, you can use the fill property. Set it to true, make sure the parent container has all the needed styling, and you are good to go!

<div style={{ position: 'relative', overflow: 'hidden', height: '600px' }}>
  <Image
    src={image.srcUrl}
    alt="Image"
    fill={true}
    style={{ objectFit: 'cover' }}
  />
</div>

As you see, this is fairly simple too! Of course, there are more advanced scenarios but these two should cover the most common use-cases.

Demo Project

I created a tiny project to showcase how both approaches would look like in an actual app. You find the project on Github if you want to take a closer look.

If you want to dive deeper, make sure to check out the official Next.js documentation. They also cover what has changed technically under the hood - would definitely recommend it.

next/future/image (experimental) | Next.js