一、优劣势
劣势
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_…