阅读 527

移动端OSS图片体积优化

背景

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

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

示例

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

🐶图

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

image.png

通过 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

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

image.png

体积由 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

image.png

可以看到体积变为了 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

image.png

体积变为了 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

image.png

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

项目实战

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

image.png

在优化之前,第一页的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 参数如果是小数会直接访问失败,需要处理成整数。
文章分类
前端
文章标签