Next.js Image Optimization in 2026: next/image v4, AVIF by Default, and the Config Changes Teams Miss
This article was written with the assistance of AI, under human supervision and review.
Most Next.js image performance problems in 2026 stem from teams upgrading to v4 without understanding the default format switch to AVIF and the breaking configuration changes that silently degrade production pipelines. The next/image component shipped automatic WebP conversion in v3, but v4 prioritizes AVIF by default—a format that delivers 20-30% smaller file sizes at equivalent quality but introduces browser compatibility gaps and configuration requirements that break existing deployments.
The failure mode here is subtle but expensive. Applications upgrade to Next.js 15 with next/image v4, AVIF encoding begins server-side, and teams observe slower image response times on older browsers that fall back to legacy formats. The configuration changes required to maintain v3 behavior—explicit formats arrays, updated remotePatterns replacing deprecated domains, and new cache control settings—are not surfaced during the upgrade process. Production incidents follow when CDN integration breaks, disk cache limits are exceeded, or images fail to load from third-party sources that require the new security model.
This matters because image optimization accounts for 40-60% of total page weight in modern web applications. When the optimization layer silently shifts format priorities without corresponding infrastructure updates, the performance wins teams expect from upgrading evaporate. The solution requires explicit configuration that maintains format flexibility while enabling AVIF where supported, paired with cache strategies that prevent redundant encoding work.
Key Takeaways AVIF becomes the default format in next/image v4, requiring explicit formats configuration to maintain WebP-first behavior or enable selective AVIF adoption based on browser support. The domains configuration is deprecated in favor of remotePatterns, which enforces stricter security through protocol, hostname, and pathname matching—breaking existing third-party image integrations. Cache control settings (maximumDiskCacheSize, contentDispositionType) prevent disk exhaustion and enable CDN caching, but teams miss these during upgrades, leading to storage failures and cache bypass. AVIF delivers 20-30% smaller file sizes than WebP at equivalent visual quality, but encoding time increases 3-5x and older browsers require fallback paths that must be explicitly configured. The priority prop and sizes attribute are commonly misconfigured—priority images require manual preload link injection in layouts, and incorrect sizes generate oversized variants that negate optimization gains.
Next.js 15 ships next/image v4 with AVIF as the first format in the default formats array, replacing the v3 behavior where WebP took priority.
The change reflects browser support evolution—AVIF support crossed 90% global coverage in late 2025, making it a viable default for modern applications. The format delivers superior compression ratios compared to WebP, particularly for photographic content with gradients and high-frequency detail. A typical product image that compresses to 80KB as WebP encodes to 55-60KB as AVIF at perceptually identical quality.
The breaking change surfaces when teams rely on the v3 implicit format priority. Applications serving images to users on Safari 15 or older Android browsers without explicit fallback configuration will trigger AVIF encoding attempts that fail silently. The image component detects lack of support via the Accept header and regenerates WebP variants on demand, but this introduces latency spikes on first request and doubles optimization work server-side.
The implication here is that teams must audit their user base browser distribution before enabling AVIF by default. If analytics show 5%+ traffic from pre-AVIF browsers, the cost of redundant encoding outweighs the compression benefit. The correct approach is explicit format configuration in next.config.js:
This configuration prioritizes WebP, serves AVIF only to browsers that explicitly request it via Accept: image/avif, and maintains backward compatibility with the v3 behavior. Teams can invert the array to ['image/avif', 'image/webp'] once their analytics confirm AVIF support exceeds 95%.
The additional v4 change that breaks production deployments is the removal of the unoptimized prop default behavior. In v3, setting unoptimized={true} bypassed the optimization pipeline and served the original image directly. v4 enforces optimization by default and requires explicit loader configuration to disable processing. Applications that relied on unoptimized for SVG files or assets served from external CDNs must migrate to custom loaders or update their remotePatterns configuration to mark specific domains as unoptimized sources.
The domains array in next.config.js is deprecated in Next.js 15, replaced by remotePatterns which enforces protocol and pathname matching for third-party image sources.
This approach allowed any path on the specified domain, creating a security surface where attackers could reference arbitrary URLs under approved domains. The v4 remotePatterns array requires explicit protocol, hostname, and optional pathname and port matching:
The glob pattern matches any nested path structure. Applications serving images from user-generated content platforms or third-party e-commerce APIs must explicitly enumerate each allowed pathname pattern. The failure mode teams encounter is production incidents where images load during local development (because remotePatterns validation only runs in production builds) but break after deployment when the Next.js optimizer rejects URLs that don't match the configured patterns.
The related configuration change that teams miss is the quality parameter array. In v3, a single quality integer applied to all formats. v4 allows per-format quality settings:
AVIF achieves perceptually lossless quality at quality settings 10-15 points lower than WebP. A WebP image at quality 80 is visually equivalent to AVIF at quality 65-70. The cost of not configuring per-format quality is oversized AVIF files that negate the format's compression advantage. Teams should benchmark quality settings with real content using tools like ImageMagick's compare or browser DevTools to establish the lowest acceptable quality per format.
The configuration surface expanded in v4 to include contentSecurityPolicy for SVG files (when dangerouslyAllowSVG: true) and contentDispositionType which controls whether browsers download or display images inline. The default inline value is correct for most cases, but applications serving user-uploaded PDFs or other document types through the image component must set attachment to trigger downloads.