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 10 | Next.js 12.2 | |
|---|---|---|
| HTML Output | Renders <img /> with span and div wrapper | Renders <img /> without any wrappers |
| Sizing | Width/height represent rendered or original image size | Width/height always represent the rendered image size |
| Styling | Using layout and CSS properties | Using CSS properties |
| Fill Mode | Set layout=fill | Setting 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.
