Using Images in Next.js

The component addresses layout shift, images that are too large for the visitor’s screen or device, and the difficulty of getting images to display as intended. Importing a local image supplies its dimensions automatically, which helps prevent layout shift.

For a local PNG that is 30.3 KB, the Next.js image route serves an optimized 7.2 KB version in AVIF or WebP in the demo. Remote images also work, but the config must allowlist their domains and URL patterns. Remote images need explicit width and height to prevent layout shift.

The `fill` prop makes an image occupy its parent instead of using explicit dimensions, and its parent needs positioning and a defined size. With `fill`, the `sizes` prop helps Next.js choose suitable image variations for the viewport. The examples also cover quality, imported-image blur placeholders, and CSS such as `object-fit: cover`.

A CSS Grid with relatively positioned, 400-pixel-tall parents, `fill`, and `object-fit: cover` creates a responsive layout for multiple images. The component also responds as the viewport changes. Developers can configure a loader function to build image URLs for another optimization service, using values such as source, width, and quality.