Key Features of Next.js Image Component
The Next.js Image component extends the HTML <img> element with automatic optimization:
Size Optimization: Automatically serves correctly sized images for each device using modern formats like WebP
Visual Stability: Prevents layout shift when images load
Faster Page Loads: Images only load when they enter the viewport (lazy loading)
Asset Flexibility: On-demand resizing works with remote images too
Using the Image Component
Basic Usage
import Image from "next/image";
Local Images
For local images, import the image file directly:
import Image from "next/image";
import profilePic from "./me.png";
export default function Page() {
return (
<Image
src={profilePic}
alt="Picture of the author"
// width and height are automatically provided
// blurDataURL is automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
);
}
Next.js automatically determines the width and height from the imported file, which helps prevent layout shift.
Remote Images
For remote images, provide the URL as a string and manually specify width and height:
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}
/>
);
}
For security, you must define allowed remote image sources in your Next.js config:
module.exports = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "s3.amazonaws.com",
pathname: "/my-bucket/**",
},
],
},
};
The Priority Property for LCP Images
This is important: You should add the priority property to the image that will be the Largest Contentful Paint (LCP) element on each page.
<Image src={heroImage} alt="Hero image" priority />
The priority property does two important things:
Disables lazy loading for the image
Preloads the image
Many developers overlook this and let their LCP image load lazily by default, which reduces performance. When you run next dev, you'll get a console warning if your LCP image lacks the priority attribute.
Without priority, the LCP image only begins loading when it appears on the screen, delaying this important performance metric. With priority, the image loads right away when the page loads.
Image Sizing
To prevent layout shift, images must be sized in one of three ways:
Automatically: Using a static import
Manually: Specifying width and height
Fill: Using the fill property to expand to parent element
If you don't know your image sizes:
Use fill and style the parent container
Normalize your images to standard sizes
Modify your API calls to return image dimensions
Styling the Image Component
Style the Image component using:
When using fill:
Common Usage Patterns
Responsive Images
<Image
src={mountains}
alt="Mountains"
sizes="100vw"
style={{ width: "100%", height: "auto" }}
/>
Fill Container (like a grid of images)
<div style={{ position: "relative", height: "400px" }}>
<Image
src={mountains}
alt="Mountains"
fill
sizes="(min-width: 808px) 50vw, 100vw"
style={{ objectFit: "cover" }}
/>
</div>
Background Image
<Image
src={mountains}
alt="Mountains"
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{ objectFit: "cover" }}
/>
Configuration
You can configure the Image component and optimization API in your next.config.js file to:
