Optimize local assets
Product, article, or profile images stored in the application repository.
Next.js 16+ · Component
Image
Next.js Image is an optimized extension of HTML img for App Router applications. It supports local assets and configured remote URLs, with responsive optimization controlled by component props and next.config.js.
How it works
Import Image from next/image and render it instead of a plain img element. Next.js uses the source and declared dimensions to optimize delivery, support responsive sizing, and preserve layout stability; remote URLs must be permitted by image configuration.
Syntax
import Image from 'next/image'
<Image src={source} alt={text} width={number} height={number} />Parameters
| Name | Type | Description |
|---|---|---|
src | string | StaticImport | Image source: a local path, statically imported asset, or configured absolute external URL. |
alt | string | Accessible alternative text for the image. |
width | number | Rendered image width in pixels when required by the source and layout. |
height | number | Rendered image height in pixels when required by the source and layout. |
Returns
A React Image component that renders an optimized HTML image.
Key points
- Use Image as an optimized replacement for the native img element.
- The src prop identifies the asset that Next.js should optimize and render.
- deviceSizes defines the device-width breakpoints used when producing responsive image variants.
- Image optimization behavior is customized through next.config.js configuration.
Common mistakes
- Changing the image optimization path affects the endpoint used by the built-in optimization API.
Example: Remote optimized image
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://example.com/hero.jpg"
alt="A mountain landscape"
width={1200}
height={800}
/>
)
}Render the optimized image with its source, accessible alternative text, and intrinsic dimensions.
When to use it
Optimize remote assets
Images hosted by a CMS or another approved external service.
Tune responsive delivery
Responsive interfaces serving different image widths to different devices.
Interview questions
QWhat problem does next/image solve?
The Image component extends the HTML img element and adds automatic image optimization. It accepts a local or remote source, and its dimensions help the browser reserve space before the image loads.
Follow-up: How would you handle a remote image? Configure remotePatterns for the permitted host or URL pattern, then pass the absolute URL as src.
QHow do you render a remote image?
A remote source is supplied as a URL string. The host or URL pattern must be allowed through remotePatterns so Next.js can safely optimize it.
Follow-up: What configuration detail controls the optimization endpoint? The path option changes or prefixes the default /_next/image path.
QWhich configuration options influence image optimization?
The component exposes configuration options in next.config.js, including deviceSizes for device-width breakpoints and path for the optimization API route. These options customize how optimized images are generated and served.
Follow-up: What is the default optimization path? It is /_next/image unless path is configured otherwise.
Related
next/imageremotePatternsdeviceSizespathImage Optimization API