前言
由于业务需要, 我们的APP产品中存在大量的图片信息.
考虑带宽成本, 我们尝试过做过一些优化
使用CDN,使用jpg格式, 列表页使用小尺寸图, 详情页使用90%清晰度图,等
但是 图片的带宽 目前一直在3000M左右, 也是一笔不小的花费.
关于WebP
WebP 具体的说明可以看官网说明, 现在也不是一个新鲜的东西了
之前一直没尝试主要是担心兼容问题
目前已经有好多公司更换为这种格式, 所以我们这边也开始尝试更换
测试
- 体积
我们采样了业务中的1468张图片, (无损压缩模式)得出如下数据:
原图(png) 408M
目前使用jpg 130M
webp 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左右. 效果很明显