关于前端:webp图片的优劣势及生成

一、优劣势

劣势

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_…