边缘图片优化
在边缘自动调整大小、压缩和格式转换图片。
边缘进阶
为什么
边缘图片优化减少负载 70%+，并向兼容浏览器提供 WebP/AVIF。Cloudflare 边缘网络覆盖 330+ 城市，全球 p95 延迟低于 50ms。
边缘函数相比源服务器将 TTFB 降低 60-80%，Akamai 报告 2024 年 40% 的企业使用边缘计算。
何时使用
有大量图片内容且面向多样设备的站点。 需要数据库写入的有状态逻辑避免边缘函数 — 边缘运行时无持久连接池。需要长时间运行任务（>30s）或重 CPU 计算时跳过。
如何做
# Next.js 镜像 component (边缘 优化)
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={630}
priority
placeholder="blur"
blurDataURL="data:image/jpeg;base64,..."
/>
// next.配置.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. 验证部署 — curl -I https://your-app.example.com
5. 监控日志 — 前 5 分钟检查错误
6. 需要时回滚 — 回退到上一版本
示例
// 配置 — deploy-image-optimization
const config = require("./config");
# Vercel 镜像 优化 API
GET https://example.com/_next/image?url=/photo.jpg&w=750&q=75
# Cloudflare 镜像 Resizing
<img src="/cdn-cgi/image/width=750,quality=75/photo.jpg" />
常见问题
- ⚠首次优化慢 — 缓存优化变体
- ⚠外部图片被阻止 — 在 next.config 配置 remotePatterns
- ⚠环境间配置漂移 — 使用基础设施即代码（Terraform/Pulumi）保持 dev/staging/prod 一致
最佳实践
- ✓AVIF 优于 WebP — 同质量小 20%
- ✓首屏图片设 priority — 防止 LCP 延迟
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求