判断浏览器是否支持webp格式

4,007 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

webp简介

webp格式是由谷歌于2010年发布的图片文件格式,它同时支持有损压缩无损压缩。使用webp格式可以达到JPEG的同等画质,但是大小比JPEG格式的图片小,这可以减少图片传输的大小,极大的提高了用户的体验。

JPEG只支持有损压缩

问题

安卓是支持webp格式的,ios是从ios14macOS Big Sur才开始支持webp格式,之前的版本是不支持的。

image.png

针对ios的这种情况,我们的图片就得区分,如果支持webp就是使用webp格式的图片,如果不支持则使用其它格式(比如jpeg,jpg,png等)的图片。

那怎么来判断浏览器是否支持webp格式的图片?

方法

通过canvas来判断(这个比较常用)

  /**
   * 判断浏览器是否支持webp格式
   * @return {[Boolean]}
   */
  function isSupportWebp () {
    try {
      return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
    } catch (err) {
      return false
    }
  }

创建一个canvas元素,然后把它转成image/webp格式的data_url,如果这个data_url里面包含webp,则代表当前浏览器支持webp格式, 反之则不支持。

chorme:

image.png

safari(不是ios14,也不是macOS Big Sur):

image.png

官方推荐的方法

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]
}

// 使用
check_webp_feature('lossy', function (feature, isSupported) {
    if (isSupported) {
      // todo
    } else {
      // todo
    }
});

feature的值是lossy,lossless,alpha,animation中的一种,通过webp的这些特征 来加载一个WebP图片,如果能获取到图片的宽度和高度,就说明是支持WebP的,反之则不支持。