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.
Try it the examples below (you may need to disable cache in dev tools to see the effect if you already visited):
The following is an example of a reference to an internal 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 images 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.