下一代图片格式 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