1. webp

WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目。

目的：减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间

2. webp优势

WebP 在支持有损、无损、透明图片压缩的同时，大大减少了图片的体积。据统计，WebP 无损压缩后比 PNG 图片体积减少了 26%，有损图片比同类 JPEG 图像体积减少了 25%~34%

3. webp不支持动图

兼容性

全球 WebP 的支持程度已经达到 95.56%

4. h5 来检测是否支持webp

• 详情请看
  • HTMLCanvasElement.toDataURL()
  • Detect WEBP Support with JavaScript

// 检测是否支持webp
const detectWebpSupport = function () {
    const elem = document.createElement('canvas');
    if (elem.getContext && elem.getContext('2d')) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    }
    // very old browser like IE 8, canvas not supported
    return false;
};

5. 小程序检测是否支持webp

• 小程序内无法通过 DOM 进行能力检测，直接根据系统区分

function detectWebp() {
  var support = false;

  try {
    var _wx$getSystemInfoSync = wx.getSystemInfoSync(),
        platform = _wx$getSystemInfoSync.platform,
        system = _wx$getSystemInfoSync.system;

    var versionResult = /[0-9.]*$/.exec(system);
    var systemVersion = versionResult ? versionResult[0] : '';
    var iosSystemSupport = 
        platform === 'ios' &&
        !!systemVersion && 
        compareVersion(systemVersion, '14.0') >= 0;
        
    support = 
        platform === 'devtools' || 
        platform === 'android' || 
        iosSystemSupport;
  } catch (e) {
    console.log(e);
  }

  return support;
}

6. webp 转换工具

（1）命令行

官方提供转换工具

（2）可视化

WebP 格式图片转换 isparta.github.io/

7. React、Vue中组件的使用

可以对img 进行封装

• 做一个 image 替换组件，支持格式(原图|大|中|小)传入

    <image src={url} size={'large'} />

8. 七牛图片基本处理(格式转换、缩略、质量变换)

imageView2 提供简单快捷的图片格式转换、缩略、质量变换功能。只需要填写几个参数，即可对图片进行缩略操作，生成各种缩略图。图片处理为收费项，详细的计费说明请参见 计费与定价**。

链接：图片基本处理（imageView2）

功能	说明
缩略	等比缩放、设定目标宽高缩放等多种方式
格式转换	格式转换、GIF 颜色控制
渐进显示	图片渐进显示
质量变换	对图片质量进行调节

9. 总结

WebP 作为一种新型图片格式，不但能够节省流量，减少图片体积，一定程度上也可以优化用户体验。 但是也要注意兼容性的处理·～～

参考文章：

• juejin.cn/post/684490…