检测浏览器是否支持webp

最近在做产品的性能优化，其中一个大块是图片的优化，使用webp替代png，jpg等格式是常用的手段。由于用户手机浏览器版本不一，所以需要先检测用户浏览器是否支持webp格式。

使用canvas API

代码语言：javascript复制

function isSupportWebp(){
  const ele = window.document.createElement('canvas')
  if (!!(ele.getContext && ele.getContext('2d'))) {
    return ele.toDataURL('image/webp').indexOf('webp')>-1
  }
  //不支持canvas,那么一定不支持webp
  return false
  }

谷歌官方推荐的方法

代码语言：javascript复制

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64,"   kTestImages[feature];
}

代码语言：javascript复制

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

这种方法先加载一个webp格式的图片(base64字符串)，如果能获取到width和height，那么是支持webp的，否则是不支持的。

3.服务端通过http请求中的 Request Headers中的 accept值来判断，如果有 'image/webp'的话，返回webp格式的图片，否则返回png等格式。

html5的 picture标签，会自动选择最匹配的资源加载。如果支持webp，那么会优先加载webp，否则加载img标签内src路径的资源。

代码语言：javascript复制

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="insert alt text here">
</picture>

canvas

0 人点赞