成本优化：新一代图片编码AVIF在手Q应用实践

1. 背景

面临的问题

图片瀑布流是我们 手Q个性化业务 最主要的表现形式，很多页面的图片资源都十分庞大。虽然 之前 已经做了一些优化，将除首屏模块外的所有图片进行懒加载，但是页面所需加载的资源仍然不小。

由此带来的是巨大的流量成本，仅tianquan.gtimg.cn一个域名，峰值流量就超过50G，每年需要上百万的流量带宽费用。因此 我们考虑 将业务使用的图片改为比较新的压缩格式 ，在不影响用户使用体验的前提下，理论上可以极大的节约业务流量成本。

主流的压缩格式

2. 压缩格式如何选择

兼容性

图片质量

计算结果如下：

一般SSIM在0.95以上，就可以认为图片质量损失很低， 肉眼几乎难以分辨 。由上图可以看到，不管是AVIF还是WEBP，平均SSIM都在0.98左右。所以在图片质量角度，两种压缩格式都是满足我们需求的。

压缩效率

压缩耗时

小结

3. 功能如何落地？

WebView场景的功能落地基本分为三步：

1. 确认作为源站的COS桶，是否开启数据万象的图片压缩功能。

2. 图片的cdn后缀加上COS图片压缩参数，如

安卓可以变为：

iOS可以变为：

3. 配置cdn回源规则，根据accept请求头来判断该图片请求环境是否支持该压缩格式。

具体逻辑如下：

如果请求后缀带有imageMogr2/format/avif，则判断accept中是否包含image/avif字段，如果没带，则直接去掉imageMogr2/format/avif后缀。webp也类似。参考cdn回源规则配置如下：

$uri ~ \?imageMogr2/format/avif{    $accept !~ image/avif    {        fwd_uri $url        cache_key $host$uri_noavif    }}$uri ~ \?imageMogr2/format/webp{    $accept !~ image/webp    {        fwd_uri $url        cache_key $host$uri_nowebp    }}

以上方式的好处是可以使用代码按页面和图片种 类来控制压缩格式灰度范围，控制风险。

4. 数据统计和效果分析

虽然前面对新编码格式做了一些简单的测试。但是在会员个性化商城中，各个子商城页面上图片特征的差异是比较大的。为了证明AVIF编码对不同图片特征的压缩效果都是正向的，我们需要收集外网用户的实际资源加载大小和速度。在现代浏览器中已经内置了 PerformanceResourceTiming API ^[5] ，配置响应头 Timing-Allow-Origin ^[6] 后，可以非常灵活地统计出资源的加载情况。

以效果最好的名片商城为例，将AVIF（compress）和原图（common）进行对比：

图片平均加载时间由3755ms左右下降到了 2034ms ，图片平均体积由458KB下降到了 95KB 。

结论：经过对各个页面的数据分析，发现对高清晰度、大体积的图片压缩效果较好，对小体积图片压缩效果较差。值得一提的是，群昵称的图片由于业务原因，图片的颜色细节不需要非常丰富，因此选择了PNG-8的形式进行存储。PNG-8相比常规的PNG-24尺寸非常小，再使用AVIF效果并不明显，反而可能因为存储方式变化导致图片体积变大了。 关于PNG-8的一些简单介绍见 PNG-8、24、32区别介绍 ^[7] 。

5. 最终效果