图片带宽革命：AVIF 与 WebP 的边缘协商，把大促页面带宽砍掉六成

一个被反复验证的残酷比例

大促页面的下行体积里，图片永远占 70%–80% 以上。运营往页面里塞高清海报、角标动效和 GIF 的冲动不会变，能变的是"每个像素怎么传"。

三格式代际差

• JPEG：十年老兵，渐变与羽化边缘容易出色带断层，体积最大；
• WebP：VP8 血统，同画质比 JPEG 省两三成，已是及格线；
• AVIF：AV1 血统，56 个方向的帧内预测抹平复杂渐变，支持高色深；SSIM 同画质基准下比 JPEG 小 50%–65%，比 WebP 还能再小 20%–35%。

但绝不能全站硬切 AVIF

老 Android、嵌入式 WebView 和低配智能手表终端解不了 AVIF，写死后缀等于给这部分用户一片白块。工业方案是三层保险：前端 picture 降级 + Accept 标头内容协商 + 边缘自适应。

边缘转码的正确姿势

1. 协商：边缘节点按请求 Accept 头决定返回 AVIF、WebP 还是 JPEG 变体；
2. 缓存一次、全网复用：同一张图转一次即服务全部用户——缓存键必须把格式变体算进去（参数与变体缓存原理见 缓存不生效、刷新不彻底？）；
3. 异步转码：首请求未命中变体时先降级返回 WebP，后台生成 AVIF 后自然升级，全程用户无感；
4. 监控三件套：命中率、变体分布、转码队列水位。

转码也是 CPU 与带宽的对冲

边缘转码的收益完全建立在命中率上：同一张图只转一次，成本被全网摊薄；可一旦缓存键算错——比如把宽度参数原样透传、格式变体没进键——每个请求都会重转一遍，算力账单反而超过省下的带宽。因此上线首周应当把"转码请求占比"单独拉出来做告警，从无缓存变体在源头控制数量；小图与已极限压缩的素材转 AVIF 收益有限，干脆白名单豁免。格式是成本武器，不是时尚单品，每一次转码都该换算成账单上的正数。

算一笔带宽账

同样大促流量规模，图片带宽砍 60% 意味着账单直接下一个量级；弱网商圈里 LCP 主视觉提前出现的那零点几秒，就是转化率——性能与成本第一次站在同一边。验证效果时别忘配合 多地拨测与命中率 的方法论；动静资源各走各路的思路见 动静分离。
更多优化文章在 资讯中心。