为什么要从 WebP 再“二次瘦身”

说实话，WebP Yi经帮我们省了不少流量。

可是啊，用户体验这块儿永远在追求极致。

AVIF 出来了压缩率geng高，画质也geng细腻。

咱们 vivo 社区决定再试一次“二次瘦身”。

核心目标与指标

先说目标：体积压缩率要比 WebP 高出至少 20%。

PSNR 要保持在 42dB 以上。

SSIM 则要不低于 0.98。

这些数据是我们内部评测的硬指标。

海报类图片实验数据

我们挑了几张典型的海报图Zuo对比。

CRF=30 时WebP 大小是 120KB，AVIF 只剩下 85KB。

CRF=35 时两者差距geng明显——WebP 100KB 对比 AVIF 68KB。

哈哈，这数字kan着就爽啊！

人物风景图的表现

人物风景图对细节要求高，压缩后不Neng出现肉眼可见的失真。

我们把同一张原图分别转成 WebP 与 AVIF，再让团队盲测。

结果是：大家基本分不清两者差别。

也就是说画质基本持平，但体积却轻了不少。

技术实现路线

得判断浏览器Neng不Neng解码 AVIF。

这一步我们用 Image 对象异步检测，代码hen短：

/** 检测浏览器是否支持 AVIF */
async function checkAvifSupport {
  return new Promise(resolve => {
    const img = new Image;
    img.onload = img.onerror =  => resolve;
    img.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A==";
  });
}
let isAvifSupported = false;
 => { isAvifSupported = await checkAvifSupport; });

检测完毕后我们把结果缓存起来后续每次渲染douNeng直接使用。

URL 动态组装与降级策略

根据检测结果，我们生成Zui优的图片 URL：

function getOptimizedImageUrl {
  const fmt = isAvifSupported ? "avif" : defaultFormat;
  return `/cdn/images/${imageId}.${fmt}`;
}

Ru果请求的 avif 因为转码未完成或加载错误，会自动回退到 webp：

const imgEl = document.querySelector;
imgEl.onerror = function {
  const src = this.src;
  if ) {
    this.src = src.replace;
  } else if ) {
    this.src = src.replace;
  }
};

A/B 测试与效果验证

A/B 实验里我们把同一批用户随机分成两组，一组继续走 WebP，一组切到 AVIF。

测试结果让人惊喜——平均页面加载时间下降了约 18%。

LCP提升了近半秒，FCP也快了大约 12%。

带宽消耗则下降了约 22%。哈哈，这数字足够让运营笑到合不拢嘴啦！

主观评测小结

团队内部Zuo了盲测，大家普遍觉得两种格式肉眼难辨别差别。

唯一的抱怨是极少数老旧 Android 系统会出现卡顿，但我们Yi经Zuo好降级到 JPEG 的预案。

运维与成本考量

A/V 解码在现代浏览器里Yi经高度优化，CPU 占用基本Ke以忽略不计。

转码成本我们放到了离线批处理环节，用 CDN 边缘节点的异步任务来完成，不会影响前端响应时间。

而且啊，因为图片体积geng小，我们的 CDN 缓存命中率提升了约 15%。这直接省下不少费用呢！

异常处理与监控

A/V 转码失败时会自动回滚到Yi有的 WebP 或 JPEG 文件，不会出现白屏。

监控上，我们在 Grafana kan到了 avif 成功率保持在 98%+ 的高水平。

AVIF 在 vivo 社区的落地经验

#1 兼容性先行： 先检测再切换，不破坏老设备体验；

#2 离线转码： 把 heavy 工作搬到后台；

#3 降级兜底： 错误回调里自动回退；

#4 数据驱动： A/B 实验验证收益；

#5 持续迭代： 监控反馈随时调参。

C…呃，其实就是这样啦！咱们把 WebP 的成果再升级了一层，让用户在弱网环境下也Neng感受到geng快、geng清晰的图片展示。

P.S.

Ru果你还有啥疑问或者想聊聊具体实现细节，直接留言哈~ 咱们一起掰掰掰~ 哈哈！

---