检查浏览器支持Webp

什么是Webp？

Webp 是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小，支持透明，及动画，对提高页面的加载速度有很大的帮助。

检查浏览器对Webp的支持

使用canvas

function checkWebpSupport() {
  const canvas = document.createElement(‘canvas‘);
  if (Boolean(canvas.getContext && canvas.getContext(‘2d‘))) {
    return canvas.toDataURL(‘image/webp‘).indexOf(‘data:image/webp‘) === 0;
  }
  return false;
}

使用Image

/**
 * lossy 有损 lossless 无损 alpha透明 animation 动画
 */
function checkWebpFeature(feature, callback) {
  const images = {
    lossy: ‘UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA‘,
    lossless: ‘UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==‘,
    alpha: ‘UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==‘,
    animation: ‘UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA‘
    };
  const 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,‘ + images[feature];
}