WebP

优势在于它具有更优的图像数据压缩算法，在拥有肉眼无法识别差异的图像质量前提下，带来更小的图片体积.同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性, 在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

WebP 并不是新技术，而是受限于兼容性而未全面普及。

应用场景

图片比重大 细节要求不高 视频首图 运营推广

实践方案

方式一：HTML5 Picture

<picture>
  <source type="image/webp" srcset="images/jartto.webp">
  <img src="images/jartto.jpg" alt="jartto’s demo">
</picture>

方式二：Webpack + Nginx 此方案在 Webpack 打包过程生成了 .webp 格式的图片，通过 Nginx 检测浏览器 Accept 是否包含 image/webp 而进行动态转发。

accept: image/webp,image/apng,image/,/*;q=0.8

const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin’);

plugins: [
  new ImageminWebpWebpackPlugin({
    config: [
      {
        test: /\.(jpe?g|png)$/,
        options: {
            quality: 60,
        }
      }
    ],
    overrideExtension: false,
    detailedLogs: true,
    strict: false
  })
],

2.Nginx 配置

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

本地嗅探

// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
  const kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  };

  let img = new Image();
  img.onload = function () {
      const result = (img.width > 0) && (img.height > 0);
      callback(feature, result);
  };
  img.onerror = function () {
      callback(feature, false);
  };
  img.src = `data:image/webp;base64${kTestImages[feature]}`;
}

// Jartto's Demo
check_webp_feature('lossy', function (feature, isSupported) {
  if (isSupported) {
      // webp is supported, you can cache the result here if you want
  }
});

参考

http://jartto.wang/2020/05/02/webp-practice/