webP是Google开发的最新图片格式.
webP图片具有很多优点,最重要的是压缩率极高.
webP图片的使用有利于减少网站流量,提升网页加载速度
CSS使用JS加载webP图片
使用Modernizr加载webP图片
.webp .BackgroundImage {
background-image: url("image.webp");
}
.no-webp .BackgroundImage {
background-image: url("image.jpg");
}
.no-js .BackgroundImage {
background-image: url("image.jpg");
}
使用webkit特性加载webP图片(未测试)
@supports (-webkit-appearance:none){
.BackgroundImage {
background-image: url(/img/bannerbg.webp);
}
}
网页加载webp图片
使用picture
使用JS加载webp图片
预先为src设置两个属性
使用JS替换src地址(依赖jquery和Modernizr)
if(Modernizr.webp){
/* support webp */
$("img").each(function(i,v){
var src = $(v).attr('webppic-src');
$(v).attr('src',src);
})
}
else{
/* not support webp */
$("img").each(function(i,v){
var src = $(v).attr('pic-src');
$(v).attr('src',src);
})
}
推荐下面这个,官方DEMO
Modernizr.on('webp', function(result) {
if (result) {
/* support webp */
$("img").each(function(i,v){
var src = $(v).attr('webppic-src');
$(v).attr('src',src);
})
} else {
/* not support webp */
$("img").each(function(i,v){
var src = $(v).attr('pic-src');
$(v).attr('src',src);
})
}
});
其他方法见参考文章
nginx服务端支持webp图片
目前可以使用第三方模块ngx_webp
自动转换jpg到webp. 由于比较耗CPU,没有测试
https://github.com/vladbondarenko/ngx_webp
LUA脚本也可以自动转换,比较麻烦,不折腾了
参考文章
https://css-tricks.com/using-webp-images/
https://bingyishow.top/Technical-article/71.html
https://stackoverflow.com/questions/5573096/detecting-webp-support
https://modernizr.com/docs