Image Optimization: The Biggest Quick Win
Images account for 50-70% of total page weight on most websites. Optimizing them is the fastest way to improve load times.
Key Optimization Techniques
1. Use WebP Format
- 30-50% smaller than JPEG at same quality
- Supported by all modern browsers
- Next.js Image component converts automatically
2. Lazy Loading
- Load images only when they enter viewport
- Built into HTML with loading="lazy"
- Next.js Image component does this by default
3. Responsive Images
- Serve different sizes for different screens
- Mobile gets smaller images, desktop gets larger
- Use srcset and sizes attributes
4. Compression
- Use tools like Sharp, Squoosh, or TinyPNG
- Target 80% quality for photos (visually identical)
- Use lossless compression for graphics/logos
5. Proper Dimensions
- Never upload 4000px images for 400px display
- Set explicit width and height to prevent layout shift
Before vs After
| Metric | Before | After |
|---|---|---|
| Average image size | 500KB | 80KB |
| Page load time | 6s | 2s |
| Total page weight | 5MB | 1.2MB |
Test your site speed with our free tool.