Image Optimization at the Edge
Automatically resize, compress, and format-convert images at the edge.
EdgeIntermediate
Why
Edge image optimization reduces payload by 70%+ and serves WebP/AVIF to compatible browsers. Cloudflare's edge network spans 330+ cities with sub-50ms p95 latency globally.
Edge functions reduce TTFB by 60-80% compared to origin servers, and Akamai reports 40% of enterprises now use edge compute in 2024.
When
Sites with significant image content serving to diverse devices. Avoid edge functions for stateful logic requiring database writes — edge runtimes have no persistent connection pool.
Skip if you need long-running tasks (>30s) or heavy CPU computation.
How
# Next.js Image component (edge optimization)
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={630}
priority
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
/>
// next.config.js
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
minimumCacheTTL: 2592000,
},
};
4. Verify deployment — curl -I https://your-app.example.com
5. Monitor logs — check for errors in first 5 minutes
6. Rollback if needed — revert to previous version
Example
// config — deploy-image-optimization
const config = require("./config");
# Vercel image optimization API
GET https://example.com/_next/image?url=/photo.jpg&w=750&q=75
# Cloudflare Image Resizing
<img src="/cdn-cgi/image/width=750,quality=75/photo.jpg" />
Common Problems
- ⚠Optimization slow on first request — cache optimized variants
- ⚠External images blocked — configure remotePatterns in next.config
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use AVIF over WebP — 20% smaller at same quality
- ✓Set priority for above-the-fold — prevent LCP delay
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit