Why Image Optimization Matters
Images typically account for 40-60% of a web page's total weight. Unoptimized images are the number one cause of slow-loading websites, directly impacting user experience, conversion rates, and search rankings.
Google's Core Web Vitals metrics — particularly Largest Contentful Paint (LCP) — are heavily influenced by image loading performance.
Choosing the Right Format
Format selection is your first optimization decision:
- WebP — Default choice for most web images (photos and graphics)
- AVIF — Best compression for supported browsers
- JPEG — Fallback for photographs
- PNG — Only when lossless transparency is required
- SVG — For icons, logos, and simple graphics
Responsive Images
Serving the same large image to all devices wastes bandwidth on mobile. Use responsive images to serve appropriately-sized versions:
The srcset attribute lets browsers choose the most appropriate image size based on the user's device and viewport. Combined with the sizes attribute, this can reduce mobile image payloads by 50-70%.
Lazy Loading
Images below the initial viewport don't need to load immediately. Native lazy loading with loading="lazy" defers off-screen images until the user scrolls near them.
Important: Never lazy-load your LCP image (usually the hero or first visible image). This should load eagerly with high fetch priority.
Optimal Compression Settings
Finding the right quality setting balances file size against visual fidelity:
- Hero images and featured photos: 80-85% quality
- Thumbnails and gallery images: 70-75% quality
- Background images: 60-70% quality
- Decorative images: 50-60% quality
CDN and Image Delivery
A Content Delivery Network serves images from servers geographically close to your users. Modern image CDNs also offer on-the-fly optimization including format conversion, resizing, and quality adjustment.
Measuring Performance
Use these tools to measure and monitor image performance:
- Google PageSpeed Insights for overall page performance
- Chrome DevTools Network tab for individual image sizes
- Lighthouse for automated auditing
- Web Vitals extension for real-time CWV monitoring