移动端OSS图片体积优化

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

背景

作为一枚合格的前端开发攻城狮，在平常的开发过程中，不仅要保质保量地完成需求开发，还要思考如何最大化地优化前端性能，提升用户体验。

在现代前端应用中，我们一般会选择将图片等静态资源上传到第三方的 OSS 服务器，如阿里云 OSS。对于一些用户可自定义的字段，如一个评论列表，它的每一条数据中都有一个头像，这里的图片是由用户上传的，很多时候我们会在上传时对它做一些限制，比如超过 2M 就提示图片过大等，但还可以从另外一个角度去做优化，它就是阿里云 OSS 提供的图片处理能力。

示例

我们来看一个阿里云官方提供的示例：

看看它的 URL：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg ，这是一张存储在阿里云 OSS 普普通通的 ? 图，我们在浏览器中打开看看：

通过 Response Header 中的 Content-Length 字段可知，它的体积是 21.839KB，还是很小的，我们来对它加一些参数：

resize

resize 用于图片缩放处理。我们将图片的宽度设为 200，URL 变成这样：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_200

来看看它的体积发生了什么变化？

体积由 21839B 变成了 6725 B，已经达到了个位数，来计算一下压缩比吧， (21839-6725) / 21839 = 69.2%，如果它是一个列表中的头像字段，我们仅仅通过缩放，就可以节省将近 70% 的流量，这对于图片占了页面请求的大头的移动端 2C 内容型应用来说，已经是巨大的性能提升了。

quality

quality 用于质量转换，也就是可以用于图片压缩。我们将示例图片的质量设置为70%，URL 变成这样 https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/quality,q_70

可以看到体积变为了 11640B，压缩比 = (21839-11640) / 21839 = 46.7%，体积优化效果也是很明显的。

format

format 用于高级压缩，我们可以把它压缩成 webp 或 heic 等高压缩比的图片格式。由于 heic 的兼容性很差，不在考虑范围内，而 webp 在非 iOS 设备中支持都是很好的，我们将它转换为 webp 格式试试，URL 变成这样：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/format,webp

体积变为了 15374B，压缩比 = (21839-15374) / 21839 = 29.6%，压缩比仍然是可观的。

叠加处理

以上三种方式是 OSS 图片体积优化的主要方式，我们来将它们融合到一起，看看究竟能对图片体积有多大的优化，URL 添加参数后变成：https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_200/quality,q_70/format_webp

憨憨震惊！！！，通过以上三种方式进行叠加处理后，图片体积竟然减小到了 3480B，压缩比高达 (21839-15374) / 21839 = 84.05% ！！！

项目实战

在实际项目中，找了一个页面来进行优化，一个消息列表页，页面布局类似如下：

在优化之前，第一页的10条数据中，头像图片占用了 3.991MB 的请求资源，由于头像图片是用户自定义，所以大部分为 jpg 格式，使用以上的三种处理能力做了叠加处理，：${url}?x-oss-process=image/resize,w_200/quality,q_80/format,webp, 前后体积对比如下：

需要注意的

• png 格式图片由于其本身的特性，经过处理后部分部分情况下无法得到理想的效果，如压缩后图片体积反而可能变大，原因详见：developer.aliyun.com/article/746… ，需要进一步探究（经验是小图片不做处理，50KB 以上的 PNG 图片处理之后会有明显的效果）；
• 由谷歌出品的 WEBP 图片格式在同样的画质下相比 JPG 等格式有着更小的体积，但 iOS 不支持 webp 格式，需要做兼容判断，所以类似分辨率的机型，处理之后 Android 会比 iOS 图片体积更小；
• 对于 JPG/JPEG 格式，转为 WEBP 格式/通过合适比例的质量压缩，在保留图片质量的同时，压缩比例普遍可以达到 50% 以上
• OSS 图片请求处理是通过 URL query 参数的形式，所以任何参数问题都会导致图片访问失败，需要做很多的边界处理，如 resize,w 参数如果是小数会直接访问失败，需要处理成整数。