网页及CSS使用JS脚本加载webP图片

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

<picture>
  <source srcset="img/WebPImage.webp" type="image/webp">
  <source srcset="img/OldJPEG.jpg" type="image/jpeg"> 
  <img src="img/OldJPEG.jpg" alt="Alt Text!">
</picture>

使用JS加载webp图片

预先为src设置两个属性

  <img src="" pic-src="./test.jpg" webppic-src="./test.webp">

使用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