configuring-image-optimization

Image optimization in Next.js 16 requires migrating from the legacy domains array to remotePatterns, which provides granular control over allowed image sources. Set remotePatterns in next.config.js to specify protocol, hostname, and pathname rules for external images, ensuring only trusted domains can be optimized.

SVG security in Next.js involves three controls: set dangerouslyAllowSVG to true to permit SVG optimization, configure contentDispositionType to attachment for download safety, and define contentSecurityPolicy headers to restrict SVG execution. These prevent XSS attacks while allowing SVG delivery.

Replace the domains array with remotePatterns, converting each domain into an object specifying protocol (http or https), hostname (with optional wildcards), and pathname patterns. This migration enforces explicit security parameters and supports multi-environment deployment across development and production.

Yes, customize deviceSizes and imageSizes arrays in next.config.js to match your target devices and breakpoints. You can also set default formats (including AVIF) and configure minimumCacheTTL to control optimization caching behavior across environments.

remotePatterns govern external image URLs from specified domains using protocol and hostname matching, while localPatterns control local image imports and public directory images. Both use pattern-based rules to enforce source validation and security policies.

AVIF is now a default format in Next.js 16 for better compression, but explicit format configuration lets you control fallback chains, device-specific formats, and browser compatibility. Configure formats in next.config.js to optimize delivery based on client capabilities and performance requirements.