Optimizing images with the Next.js Image component

This article has been updated for .

The release of Next.js 10.0.0 introduces the long awaited component. Optimizing images in Next.js now works completely out of the box and requires minimal effort to implement.

Getting started

Using the component is very straightforward, as the properties are compatible with the native tag. If you want to update images in your Next.js app to make use of optimization, we can simply replace our existing tag with the new component and leave the same properties.

Responsive images

Don't worry about handling responsive images with the and properties, Next.js's component is responsive by default. Setting the size on the component helps Next.js determine the initial size of it's internal responsive container.

We can change the responsive behaviour of the component by providing a property. The default is set to , which will resize the images down if the viewport is smaller than the defined image dimensions. Passing the value for the prop will both scale the image up and down depending on the viewport.

If you don't want to set the image dimensions, you can use the behaviour using the prop. The component will now automatically resize to the dimensions of its container.

You can disable the responsive behaviour on the component by providing a value on it's prop.

Next.js will automatically generate a set of images optimized for different screen sizes. Instead of having one huge hero background image served to every device, the component will load the resized version based on the visitors screen size.

Customizing loading strategies

By default the component will use lazy loading. This means that the image will only be loaded once the viewport reaches a certain calculated distance from the image. You can change the prop to , to make sure the image loads immediately.

You can prioritize specific images to load when they're considered high priority by passing a to the prop. Use priority sparingly and only on images that are above the fold. The default and strategies suit most implementations.

Using the Image component with external images

The component works out of the box with external images. If you're hosting images on a different domain than your Next.js application, you'll have to configure Next.js to handle these.

Updating the Image component

After configuring our Next.js app we can start using the component with the external domains.

Customizing image quality and generated sizes

You can update the quality of the generated images by passing a prop on the component with a value between to .

By passing an array of integers into the prop, you can override the breakpoints on which Next.js generates images.

If you want to change the default breakpoints which Next.js uses for all images, you can add add a array inside your key of the .

The new component simplifies handling image optimization for images with both a relative and an absolute path. Thanks to Next.js' sane defaults, it's easy to convert your current tags to the new component.

To get the best use out of the new component, make sure you read the docs about Image Component and Image Optimization over at the Next.js website.