AVIF
AVIF (AV1 Image File Format) is a modern, royalty-free image format based on the AV1 video codec that delivers significantly better compression than WebP and JPEG while maintaining high visual quality.
AVIF offers roughly 50% file size reduction compared to JPEG and 20% compared to WebP at equivalent quality. It supports lossy and lossless compression, transparency (alpha channel), HDR, and wide color gamut. Browser support reached all major browsers in 2023.
The tradeoff is encoding speed — AVIF is significantly slower to encode than WebP or JPEG. This matters for dynamic image optimization but is irrelevant for pre-built static assets. Next.js supports AVIF via its image optimization pipeline with `formats: ['image/avif', 'image/webp']` in `next.config.js`.
For maximum performance, serve AVIF to browsers that support it and fall back to WebP, then JPEG. Next.js handles this automatically through content negotiation (Accept header). Pre-generate AVIF versions of static images at build time to avoid on-the-fly encoding costs.
Related terms
WebP
WebP is an image format developed by Google that provides lossy and lossless compression, typically producing files 25-35% smaller than JPEG and PNG at equivalent visual quality.
Image Optimization
Image optimization is the process of reducing image file sizes and serving appropriately sized images to improve page load performance, using techniques like compression, modern formats, and responsive delivery.
Next.js Image Component
The Next.js `<Image>` component (`next/image`) is a built-in extension of the HTML `<img>` tag that provides automatic image optimization including lazy loading, responsive sizing, format conversion, and layout shift prevention.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.