CDN Image Optimization: Format, Size, and Delivery
Why Image Optimization Matters
Images account for 40-60% of total page weight. They're often the LCP element. Optimizing image delivery at the CDN edge is the highest-impact performance improvement for most websites.
Format Conversion
Modern image formats deliver the same visual quality at much smaller file sizes: For foundational context, read CDN Performance Metrics: What to Measure — FlyFish NWA.
| Format | Size vs JPEG | Browser Support | Best For |
|---|---|---|---|
| JPEG | Baseline | Universal | Photographs |
| WebP | 25-35% smaller | 97%+ (all modern browsers) | General purpose |
| AVIF | 40-50% smaller | 90%+ (Chrome, Firefox, Safari 16+) | Best compression |
| PNG | Larger | Universal | Transparency, screenshots |
CDN Auto-Format
CDNs can automatically convert images based on the browser's Accept header:
| Metric | Edge Processing | Origin Processing | Improvement |
|---|---|---|---|
| Latency (p50) | 8–15 ms | 120–300 ms | 15–20x faster |
| Cache Hit Ratio | 85–95% | N/A | Reduces origin load |
| TLS Handshake | 1–5 ms (nearby PoP) | 50–150 ms | 10–30x faster |
| Bandwidth Cost | $0.01–0.04/GB | $0.05–0.12/GB | 3–5x cheaper |
| Availability | 99.99% (multi-PoP) | 99.9% (single DC) | 10x fewer outages |
# Browser sends:
Accept: image/avif, image/webp, image/*, */*
# CDN serves:
AVIF if browser supports it
WebP if browser supports it but not AVIF
Original format as fallbackThis is transparent to your application — you serve /image.jpg and the CDN delivers the optimal format. Requires the CDN to process images, adding the format variant to the cache key.
Responsive Sizing
CDN image services can resize images on the fly:
# Original: 4000×3000 pixels
https://cdn.example.com/photo.jpg?w=800&h=600&fit=cover
https://cdn.example.com/photo.jpg?w=400&h=300&fit=cover
https://cdn.example.com/photo.jpg?w=200&dpr=2Combined with <picture> or srcset in HTML, the browser requests the size it actually needs instead of downloading a full-resolution image.
Quality Optimization
CDNs can adjust compression quality based on content type and connection speed:
- Perceptual quality — Algorithms like SSIM find the lowest file size where quality loss is invisible to humans
- Adaptive quality — Lower quality for slow connections (Save-Data header support)
- Lossless optimization — Strip metadata (EXIF, ICC profiles) without affecting visual quality
Lazy Loading
CDNs can inject loading="lazy" on images below the fold, preventing off-screen images from blocking page load:
<img src="/photo.jpg" width="800" height="600" loading="lazy">The LCP image must NOT be lazy-loaded — it should use loading="eager" (the default) and be preloaded.
CDN Image Services
- Cloudflare Images — Resize, convert, serve. Polish (auto-optimization) + Image Resizing.
- CloudFront + Lambda@Edge — Custom image processing at the edge via Lambda.
- Fastly Image Optimizer — Real-time image transformation at the edge.
- Dedicated services — Cloudinary, imgix, ImageKit integrate with any CDN.
Image Caching Strategy
Each image variant (format + size + quality) is a separate cache entry. With 5 sizes × 3 formats = 15 variants per image. Use origin shield to consolidate variant generation — transform once at the shield, serve from edge cache thereafter.
Performance Impact
Typical results from CDN image optimization:
- Page weight reduction: 40-70% (images converted to WebP/AVIF)
- LCP improvement: 30-50% faster
- Bandwidth savings: 40-60% reduction in image bandwidth