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.

Layout

The layout property tells the image to respond differently depending on the device size or the container size.

Select a layout below and try resizing the window or rotating your device to see how the image reacts.

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

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

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

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

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