下一代图片格式 AVIF 在 vivo 社区的落地实践

作者：vivo 互联网前端团队- Liu Daqiang
本文分享 vivo 社区在 WebP 已全面落地的基础上，引入下一代图片格式 AVIF 的实践经验。通过 CDN 边缘缓存 + 服务端异步转码的方案，在保证画质的前提下，图片体积相比 WebP 进一步降低 20%+，有效提升了用户的浏览体验。

1分钟看图掌握核心要点👇

图 1 VS 图 2，您更倾向于哪张图来辅助理解全文呢？欢迎在评论区留言。

一、背景：性能瓶颈与技术选型

vivo 社区作为内容聚合平台，图片与视频流量占比较高。在弱网等复杂环境下，首屏图片加载缓慢会直接导致 LCP（最大内容绘制）、FCP（首次内容绘制）等核心性能指标不佳，进而影响用户的浏览深度与留存。

尽管我们已经通过 WebP 格式将图片体积优化了约 50%，但对极致用户体验的追求是持续不断的。随着 AVIF 格式的成熟与浏览器支持率的提升，我们决定对其进行调研与落地，旨在WebP 的基础上进行"二次瘦身"。

二、技术调研：为什么是 AVIF？

卓越的压缩效率：

AVIF 基于先进的 AV1 视频编码标准。在同等主观画质下，其体积相比 JPEG 可减小 60% 以上；即使在相同码率下，其 PSNR（峰值信噪比）和 SSIM（结构相似性）指标也优于 WebP，能保留更多图像细节。

强大的生态支持：

Chrome、Firefox、Edge 及 Safari 16+ 已全面支持，移动端覆盖率达 90% 以上。主流 CDN 与服务商（如 Cloudflare、阿里云）均已提供转码支持，开源工具链也趋于完善。

可行的收益目标：

我们设定的技术目标是，在 PSNR ≥ 35 dB 的前提下，AVIF 体积相比 WebP 能有 20% 以上的缩减。调研数据表明，这一目标具备可行性。

三、方案设计：平滑、可控的降级策略

我们的核心设计原则是：为支持 AVIF 的客户端提供最优体验，对不支持的客户端实现无缝降级，并确保服务端稳定性。

整体流程如下图所示：

方案核心点解析：

1. **智能请求：**前端判断客户端对 AVIF 的支持，向服务端请求 AVIF 格式图片。
2. **CDN 缓存优先：**充分利用 CDN 边缘节点缓存，同一图片只需转换一次，即可服务全网用户。
3. 服务端异步转码： 为避免实时转码带来的延迟，我们采用 异步转码 策略。首次请求 AVIF 时，若未生成，则返回 404 并触发异步转码任务，同时前端降级显示 WebP 版本。当转码完成后，后续所有请求都将命中缓存，用户体验无损。
4. **完备的降级方案：**在任何环节出现失败时，系统都将自动降级至 WebP 格式，确保页面功能的正常可用。

四、前端实现：智能格式选择与降级策略

我们的核心思路是：

在前端首先检测浏览器是否支持 AVIF 格式，如果支持，则在图片请求的 URL 中附加参数（或修改 URL 路径）以请求 AVIF 格式；否则回退至 WebP 格式。

1.能力检测

我们使用 Image 对象进行异步检测，以判断浏览器是否支持 AVIF 解码。

/**

* 检测浏览器是否支持 AVIF 图片格式

* @returns {Promise<boolean>}

*/

async function checkAvifSupport(){
  // 创建一个 Image 对象，并设置 src 为一个最小的、有效的 AVIF 图片数据

  returnnew Promise((resolve) => {
    const image = new Image();

    image.onload = image.onerror = () => {
      resolve(image.height === 2);
    };

    image.src =
      "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
  });
}

// 由于检测是异步操作，我们通常会在应用初始化时执行一次检测，并将结果缓存起来以供后续使用。

let isAvifSupported = false;

(async () => {
  isAvifSupported = await checkAvifSupport();
})();

2.图片 URL 组装

根据检测结果，动态组装请求图片的 URL。

/**

* 根据浏览器支持情况，生成最优格式的图片 URL

* @param {string} imageId 图片的唯一标识符

* @param {string} defaultFormat 默认格式，如 'webp'

* @returns {string}

*/

function getOptimizedImageUrl(imageId, defaultFormat = "webp"){
  const format = isAvifSupported ? "avif" : defaultFormat;

  return `https://cdn.example.com/images/${imageId}.${format}`;
}

3.自动降级

如果图片加载失败，无论是还未生成 avif 图片，还是其他原因导致的异常，都会自动降级到 WebP 格式。

<img :src="getOptimizedImageUrl(imageId)">
<script>

const img = document.querySelector('img');

// 设置降级逻辑
img.onerror = function() {
  const currentSrc = this.src;
  const baseUrl = currentSrc.substring(0, currentSrc.lastIndexOf('.'));

  if (currentSrc.endsWith('.avif')) {
    this.src = baseUrl + '.webp';
  } elseif (currentSrc.endsWith('.webp')) {
    this.src = baseUrl + '.jpg';
  }
};

</script>

五、效果验证：数据驱动的优化迭代

1.验证标准与实验设计

我们采用客观数据与主观评测相结合的方式：

**客观指标：**体积压缩率、PSNR (≥35 dB 为目标)、SSIM（≥0.95 为目标）。

• **PSNR（峰值信噪比）：**衡量重建图像与原始图像之间的误差，值越高代表图像质量越好
• **SSIM（结构相似性）：**从亮度、对比度和结构三个维度评估图像相似度，越接近 1 表示与原图越相似

**主观评测：**团队内部对转换后的图片进行盲测，确保无肉眼可见的质量损失

实验条件：

• **测试设备：**Mac + Chrome 浏览器无痕模式
• **网络环境：**同一网络条件下测试，排除带宽波动影响
• **对比基准：**WebP 使用质量参数 Q=75%
• **样本分层：**分别测试 1M 以下、1-5M、5M 以上的 PNG 和 JPG 图片

2.数据对比

以下为一期（CRF=32）与二期（CRF=35）调优后的部分数据对比：

表注：

• **负值表示体积增加：**当 AVIF 相比 WebP 的体积缩减率为负值时，表示 AVIF 文件体积反而比 WebP更大
• **PNG 画质指标说明：**由于 PNG 为无损格式，转换为有损格式（AVIF）的 PSNR/SSIM 指标对比意义有限，故未纳入测量
• 体积缩减率计算公式：(1 - 目标格式体积/基准格式体积) × 100%
• **PSNR/SSIM 参考标准：**PSNR ≥ 35 dB，SSIM ≥ 0.95 为优质画质标准

3.数据结果

• AVIF 相比 JPG 实现了 77%-90% 的体积优化，相比 WebP 进一步减少30%-40%
• 在大图场景(>5MB)收益最为显著，绝对体积减少最多
• CRF35 参数在体积优化上表现更好，但 PSNR 略有下降

4.渲染&加载效果

下图为人物风景图片和海报类图片的渲染效果，这是我们使用到的主要图片类型，原图，WebP 图片，AVIF 图片放到一起比较基本看不出差别，海报类图片中文字清晰无损失。

▼【人物风景图】

▼【海报类图】

在加载速度方面，于同一设备及网络条件下，AVIF 图片的加载速度明显快于 WebP 要快（原图较大，考虑到带宽影响，验证视频未加载原图，左边为原图，中间为 WebP，右边为 AVIF）

5.上线效果

通过线上 A/B 测试验证，采用 AVIF 格式后：

• **LCP 时间优化 15-25%：**核心用户体验指标获得有效提升。
• **首屏图片加载效率提升 30%+：**页面内容渲染速度大幅加快。
• **页面总带宽消耗下降超过 30%：**在提升体验的同时，有效降低了流量成本。

6.结论

通过引入 AVIF 并采用稳健的降级方案，vivo 社区在未牺牲兼容性与用户体验的前提下，显著降低了带宽成本，并提升了核心页面的加载性能，验证了 AVIF 在大型内容平台落地的价值。

六、实践中遇到的挑战与思考

1. PNG 转 AVIF 对比 Webp 似乎收益不明显？

• AVIF 和 WebP 对 PNG（通常为无损）的压缩率均达到了 90% 以上，使其体积下降了 1-2 个数量级，导致二者压缩后的绝对体积差异很小。
• 在相同码率下，AVIF 可以保留更多的图片纹理和细节，对用户更友好。
• AVIF 相比其前身 VP9，在相同解码视频质量下实现了超过 30% 的码率降低。

2.转码速度与性能开销怎么样？

• AVIF 编码耗时确实高于 WebP。因此，我们放弃了实时转码方案，转而采用异步任务模式。这将计算压力后置，避免了对用户请求响应的直接影响。
• 解码性能在现代浏览器内置优化下，其损耗远小于体积减小带来的加载性能收益，整体体验为正优化。

参考资料

• AVIF has landed
• Comparing AVIF vs WebP file sizes at the same DSSIM
• How to Use AVIF: The New Next-Gen Image Compression Format
• AVIF for Next-Generation Image Coding
• A Technical Overview of AV1