description |
---|
Next.js supports built-in image optimization, as well as third party loaders for Imgix, Cloudinary, and more! Learn more here. |
Examples
Since version 10.0.0 Next.js has a built-in Image Component and Automatic Image Optimization.
The Next.js Image Component (next/image
) is an extension of the HTML <img>
element, evolved for the modern web.
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP. This avoids shipping large images to devices with a smaller viewport.
To add an image to your application, import the next/image
component:
import Image from 'next/image'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
export default Home
width
andheight
are required to prevent Cumulative Layout Shift, a Core Web Vital that Google is going to use in their search rankingwidth
andheight
are automatically responsive, unlike the HTML<img>
element- See
next/image
for list of available props.
You can configure Image Optimization by using the images
property in next.config.js
.
You can specify a list of image widths to allow using the sizes
property. Since images maintain their aspect ratio using the width
and height
attributes of the source image, there is no need to specify height in next.config.js
– only the width. You can think of these as breakpoints.
module.exports = {
images: {
sizes: [320, 420, 768, 1024, 1200],
},
}
To enable Image Optimization for images hosted on an external website, use an absolute url for the Image src
and specify which
domains
are allowed to be optimized. This is needed to ensure that external urls can't be abused.
module.exports = {
images: {
domains: ['example.com'],
},
}
If you want to use a cloud image provider to optimize images instead of using the Next.js' built-in image optimization, you can configure the loader and path prefix. This allows you to use relative urls for the Image src
and automatically generate the correct absolute url for your provider.
module.exports = {
images: {
loader: 'imgix',
path: 'https://example.com/myaccount/',
},
}
The following Image Optimization cloud providers are supported:
- When using
next start
or a custom server image optimization works automatically. - Vercel: Works automatically when you deploy on Vercel
- Imgix:
loader: 'imgix'
- Cloudinary:
loader: 'cloudinary'
- Akamai:
loader: 'akamai'
For more information on what to do next, we recommend the following sections: