Image Optimization Best Practices for Web Performance
A comprehensive guide to optimizing images for web performance, covering format selection, compression settings, responsive delivery, lazy loading, and CDN strategies to achieve fast Core Web Vitals scores.
Key Takeaways
Image optimization balances visual quality against file size and loading speed.
Use a format cascade: serve AVIF to browsers that support it, WebP as the primary fallback, and JPEG or PNG as the universal baseline.
Photographs**: JPEG 80-85, WebP 75-82, AVIF 60-70
Generate multiple sizes and use `srcset` to serve the right one:
Image optimization balances visual quality against file size and loading speed. The goal is to deliver the smallest file that is visually indistinguishable from the original at the display size.
Format Selection
Use a format cascade: serve AVIF to browsers that support it, WebP as the primary fallback, and JPEG or PNG as the universal baseline. Implement this with the element.
Compression Guidelines
Photographs: JPEG 80-85, WebP 75-82, AVIF 60-70
Graphics with text: PNG (lossless) or WebP lossless
Icons/logos: SVG (vector) or PNG
Thumbnails: Aggressive compression (JPEG 60-70) is acceptable
Responsive Images
Generate multiple sizes and use srcset to serve the right one:
400w for mobile
800w for tablet
1200w for desktop
1600w for high-DPI desktop
Lazy Loading
Add loading="lazy" to images below the fold. Keep hero images and LCP elements as eager.
