webp图片的优劣势及生成丨技术开发分享录

一、优劣势

优势

WebP相比于JPG拥有更小的文件尺寸、更高的质量（相比于相同大小不同格式的压缩图片），抽取100张商品图片采用80%压缩，大约能减少60%的文件大小。

劣势

根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计。解码方面，WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了。

二、在线生成

三、代码生成

1、canvas生成

var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d'),
  img = document.getElementById('img');

var loadImg = function(url, fn) {
  var image = new Image();
  image.src = url;
  image.onload = function() {
    fn(image);
  }
}

loadImg('<image-url>', function(image) {
  canvas.height = image.height;
  canvas.width = image.width;
  ctx.drawImage(image, 0, 0);
  img.setAttribute('src', canvas.toDataURL('image/webp'));
});

2、gulp-WebP生成

var gulp = require('gulp');
var webp = require('gulp-webp');

gulp.task('default', () => {
  gulp.src('./*.{png,jpg,jpeg}')
    .pipe(webp({ quality: 80 }))
    .pipe(gulp.dest('./dist'));
});

3、gulp-imageisux生成

var imageisux = require('gulp-imageisux');
gulp.task('default', () => {
  gulp.src('./*.{png,jpg,jpeg}')
    .pipe(imageisux('/dirpath/', enableWebp));
});

dirpath: 如果未定义，会自动生成两个目录：/dest/ 目录放压缩后图片，/webp/ 目录放对应的webp格式压缩图片。
enableWebp : 若为 true，则会同时输出webp图片；若为 false，则只会有压缩后原格式图片。

4、vue-webp-plugin生成

> npm install --save vue-webp-plugin

在 main.js 中引入

import WebpPlugun from 'vue-webp-plugin';
Vue.use(WebpPlugun);

远程图片

<img v-webp="'https://h5.u51.com/99fenqi/vue//static/home_top_bg.png'"/>

本地图片

<img v-webp="require('static/home_top_bg.png')"/>

变量引入

<img v-webp="url" />
<script>
export default {
  data() {
    return {
      url: require('static/home_top_bg.png')
    }
  }
}
</script>

数组遍历

<div class="foot2" v-for="(item,index) in imgList" :key="index">
  <img :src="item.src" alt />
</div>
<script>
data() { //此处省略了很多代码
    return {
      imgList: [] //存储图片路径
    }
  },
  mounted() { //通过mounted批量插入图片路径，这样就不用一个一个定义
    let arr = this.imgList;
    for (let i = 0; i < 9; i++) {
      arr[i].src = require('../../image/' + (i + 1) + '.jpg'); //插入items1 9张图片路径
    }
  }
</script>

背景图片

<div v-webp:bg="require('static/home_top_bg.png')"></div>

5、webp-loader生成

安装

> npm install webp-loader --save-dev

配置

{
  test: /\.(jpe?g|png)$/i,
  loaders: [
    'file-loader',
    'webp-loader'
  ]
}

6、webpack-react-webp生成

安装

> npm install webpack-react-webp --save

配置（webpack.config.js）

let webpackWebp = require('webpack-react-webp');

//不是开发环境必须要添加 webpackWebp.loader()，添加webp判断
let imgLoader = (env === 'dev' ? [] : [webpackWebp.loader()]).concat([
  'file-loader?' + JSON.stringify({ name: imagePath + imgName + '.[ext]' }) //或者url-loader
]);

module.exports = {
  module: {
    loaders: [{
      test: /\.(jpe?g|png|gif|svg)$/,
      loaders: imgLoader
    }]
  },
  plugins: [
    new webpackWebp({
      cssDomain: 'http://xxxxxxxxxxx', //支持 字符串与['http://11.xxxx','http://22.xxxx']
      jsDomain: 'http://xxxxxxxxxxx'
      imgPath: 'www/home/*', //*.{jpg,png,jpeg}
      imgReg: ['jpg', 'png', 'jpeg'],
      quality: 60
    })
  ]
}

参考链接：

webp图片的优劣势及生成