如何生成WebP图片

什么是Webp图片

WebP是一种新的图片格式，目标是减少文件大小但达到和JPEG格式相同的图片质量，能够减少网络上的请求时间。

优势与劣势

WebP优势

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

WebP劣势

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

WebP兼容性

下图为兼容性情况（数据来源于caniuse.com/#search=Web…）

就目前而言，WebP支持Chrome和Opera浏览器以及部分手机浏览器

Webp生成方式

在线生成

• 智图 zhitu.isux.us/
• 又拍云 www.upyun.com/webp
• CloudConvert cloudconvert.com/webp-to-any…
• iSparta isparta.github.io/index.html

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'));
    });
复制代码

gulp-WebP或gulp-imageisux

通过使用gulp的两个插件来进行压缩

1. 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'));
});
复制代码

有损压缩图片设置webp插件的quality参数，无损压缩设置lossless参数为true即可

2. gulp-imageisux

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

API 两个参数，dirpath目标目录以及enableWebp是否同时导出对应WEBP格式图片

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