Image optimization with next/image

The next/image component optimizes images: it serves modern formats (WebP by default, AVIF when configured in next.config), and lazy-loads by default. Local static imports of jpg, png, webp, or avif files receive dimensions and a blurDataURL automatically unless the image is animated. Remote images need explicit width and height or the fill property, and their hosts must be allowed through remotePatterns in next.config. For the largest above-the-fold image, preload it: Next.js 16 deprecates the priority property in favor of the preload property, and loading="eager" or fetchPriority="high" are the alternatives. Scope: Next.js 16. Reviewed October 4, 2026.