WebP图片在业务中的实际应用

前言

由于业务需要, 我们的APP产品中存在大量的图片信息.

考虑带宽成本, 我们尝试过做过一些优化

使用CDN，使用jpg格式, 列表页使用小尺寸图, 详情页使用90%清晰度图，等

但是 图片的带宽 目前一直在3000M左右, 也是一笔不小的花费.

关于WebP

WebP 具体的说明可以看官网说明, 现在也不是一个新鲜的东西了

之前一直没尝试主要是担心兼容问题

目前已经有好多公司更换为这种格式, 所以我们这边也开始尝试更换

测试

• 体积

我们采样了业务中的1468张图片, (无损压缩模式)得出如下数据：

原图(png)      408M目前使用jpg    130Mwebp          65M

测试过程中 虽然采用了无损压缩模式 体积都减少了50%

• 清晰度

图片清晰度 要求2K屏幕 肉眼看几乎没有差别

经过图片内容及清晰度的反复测试, 我们业务上最终采用如下参数:

cwebp -q 88 -m 6 -z 9 

• 处理耗时

WebP图片在编码和解码的时候 耗时都有增加, 10倍左右(0.001 - 0.01 ms)

但是由于图片变小带来的加载速度变快, 总体感觉比之前还要快一些呢

手机APP使用

兼容问题是首先要测试的

由于我们的APP在之前已经不再支持安卓4.0以下版本

WebP图片又是采用有损压缩的

所以一轮测试下来 基本没有异常情况

然后进行了云测, 公测 到上线。

遇到的问题是安卓之前的图片缓存逻辑 没有支持缓存这个类型的图片, 做了修改。但是改动并不多

结果

APP上线后 没有兼容问题, 所有用户图片显示正常

目前新版本的APP覆盖了80%以上的用户, 图片带宽降低到了 1000M左右. 效果很明显