一、优劣势

劣势

WebP相比于JPG领有更小的文件尺寸、更高的品质（相比于雷同大小不同格局的压缩图片），抽取100张商品图片采纳80%压缩，大概能缩小60%的文件大小。

劣势

依据Google的测试，目前WebP与JPG相比拟，编码速度慢10倍，解码速度慢1.5倍。 编码方面，一般来说，咱们能够在图片上传时生成一份WebP图片或者在第一次拜访JPG图片时生成WebP图片，对用户体验的影响根本忽略不计。 解码方面，WebP尽管会减少额定的解码工夫，但因为缩小了文件体积，缩短了加载的工夫，页面的渲染速度放慢了。同时，随着图片数量的增多，WebP页面加载的速度绝对JPG页面增快了。

二、在线生成

  • 智图
  • 又拍云
  • CloudConvert
  • iSparta

三、代码生成

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官网
  • vue-webp-plugin
  • node-glob
  • webpack-react-webp
  • https://blog.csdn.net/weixin_...