【新技术亮点AVIF助力vivo社区图片优化】本文分享vivo社区在WebP已全面落地的基础上引入下一代图片格式AVIF的实践经验。通过CDN边缘缓存 服务端异步转码的方案在保证画质的前提下图片体积相比WebP进一步降低20%有效提升了用户的浏览体验。【背景性能瓶颈与技术选型】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解码。代码展示了检测函数及缓存检测结果的操作。2. 图片URL组装根据检测结果动态组装请求图片的URL。代码展示了生成最优格式图片URL的函数。3. 自动降级如果图片加载失败无论是还未生成avif图片还是其他原因导致的异常都会自动降级到WebP格式。代码展示了图片加载失败时的降级逻辑。【效果验证数据驱动的优化迭代】1. 验证标准与实验设计采用客观数据与主观评测相结合的方式。客观指标体积压缩率、PSNR (≥35 dB为目标)、SSIM≥0.95为目标。对PSNR和SSIM进行了解释。有图展示相关内容。主观评测团队内部对转换后的图片进行盲测确保无肉眼可见的质量损失。实验条件测试设备为Mac Chrome浏览器无痕模式网络环境是同一网络条件下测试排除带宽波动影响对比基准是WebP使用质量参数Q 75%样本分层是分别测试1M以下、1 - 5M、5M以上的PNG和JPG图片。2. 数据对比展示了一期CRF 32与二期CRF 35调优后的部分数据对比图。对表注进行了说明包括负值表示体积增加、PNG画质指标说明、体积缩减率计算公式、PSNR/SSIM参考标准。3. 数据结果AVIF相比JPG实现了77% - 90%的体积优化相比WebP进一步减少30% - 40%在大图场景(5MB)收益最为显著绝对体积减少最多CRF35参数在体积优化上表现更好但PSNR略有下降。4. 渲染加载效果展示了人物风景图片和海报类图片的渲染效果原图、WebP图片、AVIF图片放到一起比较基本看不出差别海报类图片中文字清晰无损失。在加载速度方面于同一设备及网络条件下AVIF图片的加载速度明显快于WebP。有动图展示相关内容。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。因此放弃了实时转码方案转而采用异步任务模式。这将计算压力后置避免了对用户请求响应的直接影响解码性能在现代浏览器内置优化下其损耗远小于体积减小带来的加载性能收益整体体验为正优化。 vivo社区引入AVIF：图片体积降20%+，加载性能显著提升
【新技术亮点AVIF助力vivo社区图片优化】本文分享vivo社区在WebP已全面落地的基础上引入下一代图片格式AVIF的实践经验。通过CDN边缘缓存 服务端异步转码的方案在保证画质的前提下图片体积相比WebP进一步降低20%有效提升了用户的浏览体验。【背景性能瓶颈与技术选型】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解码。代码展示了检测函数及缓存检测结果的操作。2. 图片URL组装根据检测结果动态组装请求图片的URL。代码展示了生成最优格式图片URL的函数。3. 自动降级如果图片加载失败无论是还未生成avif图片还是其他原因导致的异常都会自动降级到WebP格式。代码展示了图片加载失败时的降级逻辑。【效果验证数据驱动的优化迭代】1. 验证标准与实验设计采用客观数据与主观评测相结合的方式。客观指标体积压缩率、PSNR (≥35 dB为目标)、SSIM≥0.95为目标。对PSNR和SSIM进行了解释。有图展示相关内容。主观评测团队内部对转换后的图片进行盲测确保无肉眼可见的质量损失。实验条件测试设备为Mac Chrome浏览器无痕模式网络环境是同一网络条件下测试排除带宽波动影响对比基准是WebP使用质量参数Q 75%样本分层是分别测试1M以下、1 - 5M、5M以上的PNG和JPG图片。2. 数据对比展示了一期CRF 32与二期CRF 35调优后的部分数据对比图。对表注进行了说明包括负值表示体积增加、PNG画质指标说明、体积缩减率计算公式、PSNR/SSIM参考标准。3. 数据结果AVIF相比JPG实现了77% - 90%的体积优化相比WebP进一步减少30% - 40%在大图场景(5MB)收益最为显著绝对体积减少最多CRF35参数在体积优化上表现更好但PSNR略有下降。4. 渲染加载效果展示了人物风景图片和海报类图片的渲染效果原图、WebP图片、AVIF图片放到一起比较基本看不出差别海报类图片中文字清晰无损失。在加载速度方面于同一设备及网络条件下AVIF图片的加载速度明显快于WebP。有动图展示相关内容。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。因此放弃了实时转码方案转而采用异步任务模式。这将计算压力后置避免了对用户请求响应的直接影响解码性能在现代浏览器内置优化下其损耗远小于体积减小带来的加载性能收益整体体验为正优化。