How to optimize images
The Next.js <Image>
component extends the HTML <img>
element to provide:
- Size optimization: Automatically serving correctly sized images for each device, using modern image formats like WebP.
- Visual stability: Preventing layout shift automatically when images are loading.
- Faster page loads: Only loading images when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.
- Asset flexibility: Resizing images on-demand, even images stored on remote servers.
To start using <Image>
, import it from next/image
and render it within your component.
import Image from 'next/image'
export default function Page() {
return <Image src="" alt="" />
}
The src
property can be a local or remote image.
🎥 Watch: Learn more about how to use
next/image
→ YouTube (9 minutes).
Local images
You can store static files, like images and fonts, under a folder called public
in the root directory. Files inside public
can then be referenced by your code starting from the base URL (/
).

import Image from 'next/image'
export default function Page() {
return (
<Image
src="/profile.png"
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
)
}
When using local images, Next.js will automatically determine the intrinsic width
and height
of your image based on the imported file. These values are used to determine the image ratio and prevent Cumulative Layout Shift while your image is loading.
Remote images
To use a remote image, you can provide a URL string for the src
property.
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://s3.amazonaws.com/my-bucket/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
Since Next.js does not have access to remote files during the build process, you'll need to provide the width
, height
and optional blurDataURL
props manually. The width
and height
are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in.
To safely allow images from remote servers, you need to define a list of supported URL patterns in next.config.js
. Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
import { NextConfig } from 'next'
const config: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
port: '',
pathname: '/my-bucket/**',
search: '',
},
],
},
}
export default config
API Reference
Was this helpful?