Image Component with Next.js

This page demonstrates the usage of the next/image component with live examples.

This component is designed to automatically optimize images on-demand as the browser requests them.

Examples

Try it the examples below (you may need to disable cache in dev tools to see the effect if you already visited):

• Responsive to viewport
• Fill dimensions of parent element
• Blur-up placeholder
• Shimmer placeholder
• Color placeholder
• Light/Dark mode theme detection
• Text on background image

Internal Image

The following is an example of a reference to an internal image from the public directory.

This image is intentionally large so you have to scroll down to the next image.

External Image

The following is an example of a reference to an external image at assets.vercel.com.

External images must be configured in next.config.js using the remotePatterns property.

Learn More

You can optionally configure a cloud provider, device sizes, and more!

Checkout the Image Optimization documentation to learn more.