使用gulp将项目中的图片压缩为webp格式

在浏览器中使用webp

WebP是Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽，减少页面载入时间，节省用户的流量。

使用gulp将png,jpg文件压缩为webp格式。

const webp = require('gulp-webp');
gulp.task('image',function() {
    return gulp.src('./public-dev/img/*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img/'));
});

如果在我们的项目中使用，目前没有找到一种特别好的办法，使其可以自动化的将css,js,html中的图片url替换为webp格式的，但是在我们之后的项目开发中，可以直接使用webp格式的文件。

但目前来说(2018/3/22)，WebP的支持还不是很广泛，根据Can I Use的数据，目前只有Chrome、Opera浏览器，以及Android的WebView是支持WebP的。

webp