@hopefrontEnd 2018-10-25T13:59:38.000000Z 字数 3401 阅读 2747

Vue项目中使用阿里OSS图片处理小结

图片 OSS 阿里云 懒加载

Vue项目中使用阿里OSS图片处理小结
导读

导读

图片是网站或应用中重要的静态资源，通常会占用我们网站总体带宽一半的流量。移动端中图片使用更加频繁，所以选择正确的图片优化方法和图片格式对于提升应用的体验来说至关重要。在工作中我司图片都使用阿里云OSS图片处理服务,本文从日常的工作中出发结合vue插件vue-lazyload总结出实践经历，欢迎大家一起交流探讨优化。

常用图片格式简介

格式	特性	优劣势
`jpg`	有损光栅图像格式	是有损压缩格式, 将像素信息用jpg保存成文件再读取出来，其中某些像素值会有少许变化。推荐使用60%~80%的压缩比
`png`	无损压缩格式	PNG对于线条图，LOGO，图标和颜色较少的图像非常适合。颜色复杂的照片和图像使用PNG格式将生成巨大的文件。PNG另一个优点是支持透明背景
`gif`	多帧图片	无损压缩、支持背景透明、支持动画、支持图形渐进
`webp`	google开发的一种有损、透明图片格式，相当于jpg和png的合体	Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。缺点是安卓4.4下和IOS的不支持(后面会给出相应的兼容性方案)

这里我们需要重点介绍下webp这个图片格式：WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。

某云webp图片处理对比示例
虽然webp的图片浏览器支持有限，也有接近一半的设备支持此种类型图片，

webp于各图片类型对比

阿里OSS图片服务功能

获取图片信息
图片格式转换
图片缩放、裁剪、旋转
图片添加图片、文字、图文混合水印
自定义图片处理样式
通过管道顺序调用多种图片处理功能
更多详细描述参考快速使用OSS图片服务

OSS图片处理

由于OSS上处理图片方法实在众多,下面我总结了一些常用的参数方便大家工作中使用。

缩放图片

我们日常的开发中，页面的图片有大有小，一般来说我们使用对应设计尺寸的图片皆可。使用原来会造成带宽的浪费和页面加载的缓慢,这里我们可以使用OSS的图片缩放功能。OSS提供了多种图片缩放方法OSS图片缩放

将图缩略成宽度为100px，高度为100px，按长边优先。

`${src}?x-oss-process=image/resize,m_lfit,h_100,m_lfit,h_100,w_100`

转换图片格式为jpg

我们有部分图片上传上去的是PNG的格式，为了加速图片打开速度，节省带宽我们的推荐所有的图片都转换为70%质量的JPG格式

`${src}?x-oss-process=image/format,jpg/quality,q_70`

转换图片格式为webp

在正常的图片后缀后加image/format,webp

`${src}?x-oss-process=image/format,webp`

压缩到70%质量的webp

`${src}?x-oss-process=image/resize,w_300,h_300,image/format,webp/quality,q_70`

长宽为300*300 压缩到70%质量的webp
压缩到70%质量的webp

`${src}?x-oss-process=image/resize,w_300,h_300,image/format,webp/quality,q_70`

图片增加水印

水印操作可以在图片上设置另外一张图片或者文字做为水印OSS图片水印处理。

https://yundada56prd.oss-cn-hangzhou.aliyuncs.com/yddfile/user-pri/8d933455-5e62-41c2-8ca1-80993ab5ec65?x-oss-process=image/watermark,image_d2F0ZXJtYXJrL21hcmsyLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzMw,t_90,g_center,x_10,y_10

OSS图片信息查询

在某些场景下我们需要提前拿到图片的信息，包括宽度、长度、文件大小、格式。如果文件有exif信息，则返回exif信息；如果文件没有exif信息，则只返回基本信息。返回结果是json格式。
获取图片信息

图片懒加载

在H5的项目中我们使用了VantUI,Vant中内置图片懒加载器vue-lazyload。这里我们应用vue-lazyload功能结合OSS图片处理，打造一个属于自己的图片加载体验。

优化步骤

先判断图片是否支持webp,若支持则将图片转换成webp,若不支持则使用jpg
对图片质量进行压缩70%即可
在图片加载阶段，先让用户感知到此处有图片。传统的方式是放一张统一的占位菊花图或者LOGO图千篇一律，这里为了增强用户体验，我们可以在加载的阶段先加载一个高斯模糊的小图（<1kb），让用户先看到一张图类似medium或者知乎那种加载图片的效果
图片加载失败设置一张占位图

目前我们APP中使用的图片都是不加域名的,如果是加域名的图片不走图片处理。
下面的示例代码通过vue-lazyload全局通过处理懒加载图片，关于lazyload具体使用方法不在做过多叙述具体参考vue-lazyload。

Vue.use(Lazyload, {
  // 设置默认loading图
  loading: 'https://ymm.oss-cn-hangzhou.aliyuncs.com/ymmfile/bbs-biz/4cd5fa86-160d-409e-ad67-faa1c591e4ba',
  // 设置默认error图
  error: 'https://ymm.oss-cn-hangzhou.aliyuncs.com/ymmfile/bbs-biz/2971def3-083d-48a4-ada5-f54070e9e857',
  filter: {
    progressive (listener, options) {
      // 第三方图片我们会填写全地址
      if (!listener.src.includes('http')) {
        listener.el.setAttribute('lazy-progressive', 'true')
        /**
         *  图片OSS处理
         *  1. process.env.VUE_APP_OSS根据环境拼接域名
         *  2. 是否有图片处理函数管道拼接
         *  3. 是否支持webp格式
         */
        listener.src = `${process.env.VUE_APP_OSS}${listener.src}${listener.src.includes('x-oss-process=image') ? ',' : '?x-oss-process='}image/format,${options.supportWebp ? 'webp' : 'jpg'}`
        // loading高斯模糊底图
        listener.loading = `${listener.src},image/blur,r_50,s_30/quality,q_70`
        // 图片质量处理
        listener.src = `${listener.src}/quality,q_70`
      }
    }
  }
})

来让我们来看看最后的实现效果吧
此处输入图片的描述

结果对比

格式	描述	图片大小
png	原图无压缩裁剪	447KB
jpg	缩放成100px*100px	5.0KB
webp	缩放成100px*100px	2.1KB
jpg	缩放成100px*100px 压缩质量70%	2.0KB
webp	缩放成100px*100px 压缩质量70%	1.8KB
webp	缩放成100px*100px 压缩质量70% 高斯模糊底图	468B

和原图相比，优化后的webp相对于原图缩小了近 99%

总结

在一些固定的场景上我们还可以添加Bucket快速使用OSS图片服务,在使用OSS图片上需要注意如果图片大于4MB、长或者宽>4096px OSS是不能处理的,工作中需要注意！