png图片优化webp
页面背景等图片的尺寸都是很大的,png的尺寸一般是的100+kb,导致加载比较慢,需要优化;
实现方案 :
转换之前的png先使用tinypng link 做一次压缩,再去转换;(为了减少转换次数,因为转换网站要排队比较慢)
1.将png转换成webp,可以使用转换网站:https://cloudconvert.com/png-to-webp link
2.在项目中判断浏览器是否支持png,然后在全局添加class样式,再针对class样式我们替换对应的背景图片即可;
function check_support_webp {
try {
return (document.creatElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0)
}catch(err){
return false;
}
}
if (check_support_webp()) {
$('html').addClass('sup-webp');
}
3、css使用示例;
body {
background: #212643 url("../images/background.png") no-repeat center top;
}
.sup-webp body {
background-image: url("../images/background.webp");
}
4.webpack配置修改 scripts/webpack.common.js 中url-loader正则匹配修改成下面的内容,加上webp:
module.exports = {
test: /\.(png|jpe?g|gif|svg|ttf|woff2|eot|woff|mp3|mp4|swf|webp)(\?.*)?$/i,
loader: 'url-loader', // 小于3k, 转成base64
options: {
limit: 10000,
name: 'assets/media/[name].[hash:5].[ext]',
},
}
注意:有些图片转换以后比png大,请不要替换