WebP 是什么？
WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式。能够大大压缩图片的大小，并且图片的品质和 png、jpeg 等雷同。WebP 的无损压缩比 png 格局的文件均匀少了 45％ 的大小。

这里是应用了同一张图片转换为不同格局的图片后，对图片的大小进行比照的测试后果：

格局 webp jpeg png gif
大小 1.65MB 2.24MB 7.51MB 4.64MB
应用 webp 压缩后图片大小缩小百分比 ↓ 26% ↓ 78% ↓ 64%
兼容性
目前大概 95.77% 的浏览器都反对 WebP 格局的图片，其中 Safari 浏览器仅在 Big Sur 及以上的macOS 零碎才反对 WebP；针对不兼容的状况下，咱们须要进行相应的降级措施。

降级解决准则

判断浏览器是否反对 webp 格局的图片
反对，展现 webp 格局的图片
不反对，应用图片原始格局进行展现
降级解决形式

JS 解决

/**

  • 判断浏览器是否反对 webp
    */
    // 办法1: 通过尝试加载一张 webp 格局的图片来判断
    function isSupportWebp() {
    const imgUrl = 'https://img.alicdn.com/imgext...!!6000000002909-0-tps-520-280.jpg_q75_.webp';
    const image = new Image();
    image.src = imgUrl;
    image.onload = function() {

      // 加载胜利，阐明反对 webp  return true;

    }
    image.onerror = function() {

      // 加载失败，阐明不反对 webp  return false;

    }
    }

// 办法2: 通过判断 HTMLCanvasElement.toDataURL() 返回的 dataURI 来判断
function isSupportWebp() {

   const str = document.createElement('canvas').toDataURL('image/webp');   // 如果反对则会返回传入的类型 image/webp --> data:image/webp;base64,UklGRtgCAABXRUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgSAAAAAQcQEREQkCT+/x9F9D/tf0MAVlA4IIAAAABwDQCdASosAZYAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfasAAD+/9YAAAAAAAAAAA==   // 如果不反对则会返回默认值 image/png --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADGSURBVHhe7cExAQAAAMKg9U9tCF8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAONUAv9QAAcDhjokAAAAASUVORK5CYII   return str.indexOf('image/webp') > -1;

}

  • 抉择浏览器反对的图片格式

function getImg(compressedImg, originalImg) {

   const isSupport = isSupportWeb();   return isSupport ? compressedImg : originalImg;

}

复制代码
HTML 解决：<picture> 元素

利用浏览器会抉择 <picture> 元素中最匹配的子 <source> 元素，如果没有匹配的，就抉择 <img> 元素的 src 属性中的 URL 这一特点。如果浏览器反对 image/webp 类型的图片，则加载 <source> 元素中 srcset 属性指向的资源，如果不反对则跳过 <source> 元素，加载 <img> 元素。
<picture>

<source type="image/webp" srcset="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp" /><img src="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75.jpg">

</picture>
复制代码
降级解决示例

拿淘宝首页举个例子

图片 URL：img.alicdn.com/imgextra/i2…

在 chrome 中加载的是 webp 格局的图片：

在 IE 中加载的则是 jpg 格局的图片：

能够看出淘宝是对图片的 URL 进行了非凡解决，通过在原始图片后加上 _.webp 后缀来做降级解决，如果以后浏览器反对 webp 格局的图片，则加载 webp 格局的图片，若不反对则去掉 _.webp 的后缀加载 jpg 格局的图片。

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKe...不胜感激 ！