Optimize images for device sizes
You need responsive delivery without manually generating multiple image files.
Next.js 16+ · Module
next/image
next/image extends HTML img with automatic optimization. It supports local and configured remote sources, responsive sizing, modern formats, layout stability, and lazy loading.
How it works
Import Image from next/image and render it instead of a plain img element. Next.js uses the source, dimensions, and configuration to generate optimized image responses while preserving layout space and loading images efficiently.
Syntax
<Image src={src} width={width} height={height} alt={alt} />Parameters
| Name | Type | Description |
|---|---|---|
src | string | StaticImport | Image source: a statically imported image, internal path, or configured external URL. |
width | number | Rendered image width used for sizing and layout. |
height | number | Rendered image height used for sizing and layout. |
alt | string | Alternative text for the image. |
Returns
An optimized Image component rendering an HTML img element.
Key points
- Use Image as the optimized replacement for a native img element.
- The src prop identifies the image resource and accepts a local or remote source.
- localPatterns can restrict which local paths the optimizer may process.
- The optimizer endpoint defaults to /_next/image, and the path option can change or prefix it.
Common mistakes
- Remote URLs are not accepted automatically; configure the host and permitted URL pattern with remotePatterns.
Example: Optimized remote image
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://example.com/photo.jpg"
alt="A landscape"
width={1200}
height={800}
/>
)
}Render an optimized remote image with explicit dimensions; the host must be allowed by remotePatterns.
When to use it
Defer offscreen image loading
A page contains images below the initial viewport.
Optimize configured remote assets
Images come from a trusted CDN or media service.
Preserve layout stability
You need to avoid content moving as images load.
Interview questions
QWhat does next/image provide beyond img?
Image extends the HTML img element and adds automatic optimization. It can serve correctly sized images and modern formats, while native lazy loading defers offscreen images.
Follow-up: How would you use an image hosted elsewhere? Configure remotePatterns for the permitted external URL, then pass that URL as src.
QHow do local and remote src values differ?
A local image may be supplied through a static import or path string. A remote image uses a URL string and requires matching image configuration before optimization is allowed.
Follow-up: Why restrict remote sources? The configuration limits which external images the optimization API can fetch and serve.
QWhich props are required for basic Image usage?
The component needs src, width, height, and alt in its basic form. Width and height let Next.js reserve layout space and determine an appropriate optimized image size.
Follow-up: What can be changed when the default optimization endpoint is unsuitable? Configure the Image Component's path option in next.config.js.
Related
getImagePropsremotePatternslocalPatternsdeviceSizespathloader