自建 CDN 与图片优化：WebP、AVIF 不是一键换格式就完事
图片优化最常见的误区，是把它理解成“把 JPG 批量转 WebP”。本文从格式选择、响应式尺寸、首屏优先级、CDN 变换与缓存治理切入，给你一套真正能拉动 LCP 和带宽成本的图片方案。
自建 CDN 与图片优化：WebP、AVIF 不是一键换格式就完事
图片优化这件事，特别容易被做成流水线手工活：
- 原图太大，压缩一下
- 再转成 WebP
- 如果还不满意，就试试 AVIF
然后团队很快就会遇到第二层问题：
- 为什么转了格式，LCP 还是一般
- 为什么移动端还在下载超大图
- 为什么缓存命中率不高，CDN 成本还上去了
- 为什么部分设备兼容奇怪，客服又开始收截图
这说明图片优化不是“文件格式问题”，而是一个完整的分发系统问题。
真正要回答的是：
什么图片、在什么设备、以什么尺寸、在什么时机、通过哪一层缓存送到用户手里？
1. 图片为什么总是性能黑洞
因为图片占的不是“一个资源请求”，而是用户带宽预算里最贵的那一部分。
它的典型特点是：
- 字节大
- 数量多
- 容易影响 LCP
- 对设备、网络、屏幕尺寸高度敏感
因此只做单点优化，比如只换格式，效果有限。图片问题要从“供应链”治理。
2. 格式选择：别再拿 AVIF 当通用圣杯
2.1 JPEG、PNG、WebP、AVIF 各自擅长什么
一个足够实用的判断是：
| 格式 | 适合场景 | 主要特点 |
|---|---|---|
| JPEG | 照片类内容 | 兼容稳定，压缩成熟 |
| PNG | 透明图、简单图形 | 透明支持好，但体积常偏大 |
| WebP | 通用 Web 图片 | 在体积与兼容性上很均衡 |
| AVIF | 高压缩要求、高质量图片 | 更省字节，但编码/解码成本更复杂 |
所以现实建议通常是：
- 默认优先 WebP
- 对高价值大图尝试 AVIF
- 对透明需求保留 PNG 或 WebP alpha
- 对老旧兼容场景保底 JPEG/PNG
2.2 真正的关键不是“最小”，而是“总体最划算”
如果 AVIF 省下 20% 体积，却带来了更复杂的处理链和更高的解码代价，那是否值得要看页面场景。
技术选型不是比谁更先进，而是比谁的总成本更低。
3. 响应式尺寸，比格式更能决定体验上限
最常见的浪费不是“格式老”，而是“尺寸错”。
移动端展示宽度 360px，却下载了一张 1600px 的大图，这种浪费比格式选择的影响更直接。
<img
src="/images/cover-800.webp"
srcset="/images/cover-400.webp 400w, /images/cover-800.webp 800w, /images/cover-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
width="800"
height="500"
alt="文章封面"
/>
这段代码真正解决的问题是：让浏览器按当前显示环境拿合适尺寸，而不是总拿最大尺寸。
4. 首屏图和非首屏图，策略必须完全不同
4.1 首屏关键图要被当成 VIP
如果某张图是 LCP 候选，比如文章首图、商品主图、首页 hero 图，它应该得到：
- 明确尺寸
- 更高加载优先级
- 更合理的压缩平衡
- 更靠前的 CDN 命中保障
4.2 非首屏图才适合积极懒加载
很多页面把所有图片都懒加载，结果首屏图也跟着排队，LCP 直接变差。
优化的核心从来不是“全部延后”，而是“别把关键资源一起延后”。
5. CDN 的价值：不是替你做格式转换，而是替你做分发决策
一套成熟的图片 CDN 方案至少会做四件事：
- 根据设备与请求头返回合适格式
- 根据尺寸参数生成衍生图
- 缓存常用变体，避免反复处理
- 在边缘节点就近返回结果
也就是说，CDN 不只是缓存层，它还是一个“图片调度中心”。
6. 一个可落地的图片 URL 设计
如果你自建图片处理链，URL 设计要足够稳定，便于缓存：
/cdn-cgi/image/width=800,format=webp,quality=75/images/hero.jpg
或者你自己的签名风格：
/img/hero.jpg?w=800&fmt=webp&q=75
关键原则：
- 参数语义明确
- 同一请求能稳定映射到同一缓存 key
- 避免随手加无意义参数导致缓存碎片化
7. 图片优化最常见的三类失误
7.1 只盯压缩率，不看视觉收益
把质量压得太狠，字节少了，品牌质感也没了。尤其电商和内容站，这种“省流量式毁图”代价很高。
7.2 所有页面共用一套图片策略
详情页主图、列表缩略图、头像、插画，它们的价值完全不同，不该用一把尺子。
7.3 缓存策略和图片处理策略脱节
你可以把图压得很漂亮，但如果缓存命中率差，处理链每次都重新跑，成本一样爆炸。
8. 一个成熟团队会怎么做
一个更靠谱的图片治理路径是：
- 先识别哪些图片直接影响 LCP
- 为不同图片类型建立格式和质量策略
- 强制所有图片声明尺寸和响应式信息
- 通过 CDN 统一处理变体与缓存
- 持续监控首屏图耗时、带宽成本和命中率
这样做的好处是，图片优化不再是“每个开发各显神通”，而是平台能力。
总结
- 图片优化不是单纯换格式，而是完整的分发与缓存策略。
- WebP 适合作为多数场景默认选项，AVIF 更适合高价值大图精细优化。
- 响应式尺寸和首屏优先级，往往比格式本身更重要。
- CDN 的价值在于格式协商、尺寸生成、缓存复用和边缘分发。
小明收尾一句：
图片优化真正厉害的地方，不是把每一张图都压到最小，而是让每一个用户都刚好拿到自己需要的那一张。