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.
Images are typically the largest resources on a web page, often accounting for 50-70% of total page weight. Unoptimized images are the number one cause of poor LCP scores. Key techniques: use modern formats (WebP for broad support, AVIF for best compression), serve responsive sizes via `srcset`, compress with quality settings (80-85% is usually indistinguishable from 100%), and set explicit dimensions to prevent CLS.
Next.js `<Image>` component handles most optimization automatically: it generates responsive `srcset`, lazy-loads by default, prevents CLS with required dimensions, and can serve WebP/AVIF via the built-in image optimization API.
For hero images that impact LCP: use the `priority` prop (preloads the image), ensure the image is served from a CDN, and consider using a smaller placeholder (blur) while the full image loads. Indxel flags images missing alt text, explicit dimensions, and modern format usage.
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.
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.
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.