苹果Iphone-IOS系统14版本以下不支持webp格式的图片

webp支持的范围

截止到2021年7月27日，webp格式支持的范围如下图（最新webp格式支持的设备）：

如果项目是基于ios14.x以上的系统版本，那么可以放心的使用。

由于我手机IOS版本过低（13.3.1），打开嵌入有webp的页面，效果如下：

在安卓上的支持性，就非常的好了，我的一款华为畅享系列的手机都支持。所以在安卓上可以放心使用。

IOS不支持的原因

检测浏览器是否支持webp

使用 canvas 的 toDataURL 进行判断

document.createElement('canvas').toDataURL('image/webp', 0.5)

在ios手机上会打印data:image/png;base64,..（无论是否是14.x之上或者之下的版本），只有在PC和安卓上才会打印data:image/webp;base64,所以这个方法仅仅作为参考，或者快速筛选出ios机型。

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

• 如果画布的高度或宽度是0，那么会返回字符串“data:,”。
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
• Chrome支持“image/webp”类型。

toDataURL方法将图片转化为包含dataURI的DOMString，通过 base64 编码前面的图片类型值是image/webp进行判断。比如在谷歌浏览器使用toDataURL方法转成image/webp：

在 Safari 浏览器使用toDataURL方法转成image/webp：

可以发现在不支持 webp 的浏览器进行toDataURL，得到的图片类型并不是 webp，因此我们可以通过这个进行判断。

以下方法在IOS上判断会有错误，在IOS14.x支持webp的设备上也会得到false.试用时要特别注意，一定要进行真机测试，再决定是否使用。

var isSupportWebp = function () {
  try {
    return document.createElement('canvas')
               .toDataURL('image/webp', 0.5)
                .indexOf('data:image/webp') === 0;
  } catch(err) {
    return false;
  }
}(); // 自执行

通过加载一张 webp 图片进行判断

const supportsWebp = ({ createImageBitmap, Image }) => {
  if (!createImageBitmap || !Image) return Promise.resolve(false);

  return new Promise(resolve => {
      const image = new Image();
      image.onload = () => {
          createImageBitmap(image)
              .then(() => {
                  resolve(true);
              })
              .catch(() => {
                  resolve(false);
              });
      };
      image.onerror = () => {
          resolve(false);
      };
      image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  });
};

const webpIsSupported = () => {
  let memo = null;
  return () => {
      if (!memo) {
          memo = supportsWebp(window);
      }
      return memo;
  };
};

webpIsSupported()().then(res => {
    console.log("是否支持 webp", res)
}).catch(err => {
    console.log(err)
})

此方法会加载一张 1x1 的白色的正方形背景图，用来测试浏览器是否支持 webp。

Google官方处理（推荐，无论什么机型都会得到正确结果）

先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持

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('lossless', function(fea, res) {
  alert(res); // IOS-14之前的会显示false
});

PHP判断浏览器是否支持

# 判断浏览器是否支持webp解析 1支持  0不支持
$webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
define('IS_WEBP', $webp === false ? 0 : 1);
echo IS_WEBP;

相关资料