一、优劣势
优势
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
})
]
}
欢迎关注：技术开发分享录
image
参考链接：
网友评论