你一定要经历的 web 页面性能优化之旅 · 08

WebP 相对于 PNG、JPG 有什么优势？---https://www.zhihu.com/question/27201061

webp 的兼容写法

安卓支持 webp，ios 不支持 webp ---https://caniuse.com/#search=webp

ios 下要使用 webp 可以导入下面的库

webpjs---https://github.com/obartra/webpjs/blob/master/webpjs.min.js

<!-- 可以按需引入 -->
<script src="./webp.js"></script>
<img src="./1.webp" />

// 判断是否支持webp
var image = new Image();
image.onload = function() {
  if (image.width == 1) {
    alert("support webp");
  }
};
image.onerror = function() {
  alert("not support webp");
};
image.src = "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==";

我导入的 1.webp 转之前的.png 大小是 600 多 kb，转之后是 23kb

安卓

ios

其他

关于 webp 在安卓 4.3 及以下兼容性，还得在实际业务中看
webp 的图片懒加载，webp 在 css 中的使用，也需要进一步看