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 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
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
External domains must be configured in
next.config.js using the
You can optionally configure a cloud provider, device sizes, and more!
Checkout the Image Optimization documentation to learn more.