当今网络性能面临的最大问题之一是，图像占据了大部分带宽使用，从而导致网页速度变慢。

WebP是谷歌开发的一种图像格式，占用的磁盘空间和网络带宽较少，Chrome、Opera等所有主要浏览器都能更好地支持它。

但是，除非您已经以这种格式提供图像，否则访问您网站的访问者将无法访问WebP图像。这个插件的诞生是为了帮助您使用一点JavaScript（jQuery Script）将所有现有的图像（PNG/JPG/GIF）替换为WebP图像。玩得高兴

值得注意的是，这个插件只适用于已经嵌入旧网页的图像。如果在新网页中嵌入新的webp图像，请使用以下HTML代码：

<picture id="picture">
  <source srcset="1.webp" type="image/webp">
  <source srcset="1.jpg" type="image/jpeg"> 
  <img loading="lazy" src="1.jpg" alt="Alt Text!">
</picture>

如何使用它:

1.只需在最新的jQuery库之后包含主脚本，插件就会负责重置。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="js/main.js"></script>

2.修改主JavaScript以添加更多的浏览器支持。

(function () {

  // Check if Browser is Chrome or Opera
  var isChromium = window.chrome;
  var isOpera = window.opera;

  if(isChromium || isOpera){

    // Get All Imgages and replace their extension - jpg/png/gif - to new img format WebP

    var getAnchors = $("img");

    for(var i=0; i < getAnchors.length; i++){
      getAnchors.attr("src",getAnchors[i].src.substr(0,getAnchors[i].src.lastIndexOf(".")) + ".webp");
    }

    if(isChromium){
      console.log("Your Browser is <b>Chrome</b>, script load WebP Images");    
    }
    else{
      console.log("Your Browser is <b>Opera</b>, script load WebP Images");
    }
  }
  else{
    console.log("Your Browser is not <b>Chrome/Opera</b>, script load default PNG Images");
  }

})();

 

预览截图

jQuery将JPG/PNG/GIF图像自动切换为WebP格式