什么是 Webp ？
Webp 是由谷歌在 2010 年 9 月发布的一种用于 web 端支持有损和无损压缩的图片格式（同时也支持动态图片和透明度），设计这种图片格式的目的主要是为了创建出相对于 jpg, png 和 gif 更小或画质更好的图片，到 2021 年 3 月份，支持 webp 图片格式的浏览器已经占全球份额的 93 %。
为什么要使用 Webp ？
在回答这个问题之前，需要限定一下问题的场景。webp 如其名，设计的初衷就是为了在 web 场景下对现有图片资源进行大小优化的图片格式，对于其他的场景，比如专业的设计领域，甚至可能只是壁纸的使用场景都不太适合（毕竟现在 windows 默认都是不支持预览 webp 格式的，mac 刚才试了一下是可以预览的）。
为什么在 web 场景下要使用 webp？因为相对于 png 或 gif 来说，webp 的体积更小，在 web 场景下能够节约用户网络流量，也能加速网页的打开，提升用户体验。下图是在实际项目中使用 webp 图片前后整体图片资源大小的对比（左图为优化前，右图为优化后）
👆 使用 webp 之后图片资源整体的传输大小从 2.6M 减少到了 1.0M。并且压缩后的图片与原图差异也很小，可以通过下图来看一下压缩前后图片的效果。
具体压缩前后的大小及质量对比可以参考下面两个链接：Webp 示例（PNG 转 Webp） / Webp 示例（Animated Webp）。
浏览器对 Webp 的支持程度
根据维基百科的介绍，到 2021 年 3 月份，全球 93% 的浏览器份额已经支持 webp 图片格式，但如果你想要更详细的支持度信息，可以查看：Can I use webp?
可以看到国内支持 webp 的浏览器占了 78.12% 的份额。所有浏览器版本中 IE 是完全不支持 webp 格式的，Safari 从 macOS 11 及之后版本才开始支持。移动端安卓对 webp 的支持程度倒是很好，加上移动端用系统自带浏览器的感觉不太多（特别是各手机厂商魔改之后的系统），所以基本上是没有任何问题的。而 IOS 端，IOS 14 之后才开始支持，值得注意的是，IOS 的第三方浏览器都是基于 自带的 Safari 浏览器的渲染引擎，所以基本 IOS 14 之前的版本任何浏览器都应该都是不支持 webp 的。参考
如何判断当前用户浏览器是否支持 webp 格式？
判断浏览器是否支持 webp 格式的方法有几种：
1. HTTP request header
浏览器在请求图片资源的时候，会在请求头 accept 字段表明自身支持的图片格式：
可以看到，在 accept 字段，如果当前使用的浏览器支持 webp 格式的话，就会带有 image/webp 字样，这时服务器就可以根据这个请求头来决定是否返回 webp 格式的图片。
2. 使用 js 加载一张 webp 图片
在某些场景，如后端不具备动态的 webp 压缩能力，或使用 oss 的情况下，我们需要事先确定浏览器是否支持 webp 再请求对应的图片资源，就需要前端自己去判断浏览器的支持能力了。
其中最简单的方法就是使用浏览器加载欲判断格式的资源（比如用 Audio 标签加载 flac 无损音频），如果浏览器能够加载成功，那么就会触发标签对应的 onload 事件，反之则会触发 onerror。在此基础上，便可以在用户无感知的情况下，使用js动态加载一个 1px * 1px 的 webp 图片并通过其加载情况来确定浏览器是否支持，代码如下：
/**
* @function
* @return {Promise<boolean>}
* @description 检测当前设备是否支持 `webp`。
*/
export function checkIfWebpSupported (): Promise<boolean> {
if (!window) {
throw new Error('非浏览器环境');
}
const { Image } = window;
if (!Image) return Promise.resolve(false); // 无法判断是否支持 webp
return new Promise<boolean>(resolve => {
const image = new Image();
image.onload = () => {
if (image.width === 1 && image.height === 1) {
// 能够获取到图片大小则当前浏览器支持 webp
resolve(true);
} else {
resolve(false);
}
};
image.onerror = () => {
resolve(false);
};
image.src = "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
});
}
上面的代码返回一个 Promise，直接调用 checkIfWebpSupported ().then (isSupported => {}); 即可在 then 中得到判断结果。
3. 使用 canvas 生成 webp
Canvas 可以使用 toDataURL() 方法将画布内容转换成 base64 编码的图片资源字符串，该方法接受两个参数，第一个参数是图片资源的类型（默认为 image/png），第二个参数为图片资源的质量。
支持 webp 格式的在调用这个方法时类型指定为 image/webp，则会返回带有 image/webp 字样的资源地址，而不支持 webp 的浏览器则会返回 image/png。我们可以利用这个特性来判断浏览器是否支持 webp：
/**
* @function
* @return {boolean}
* @description 检测当前设备是否支持 `webp`。
*/
export function checkIfWebpSupported (): boolean {
if (!document) {
throw new Error('非浏览器环境');
}
if (!document.createElement) return false;
return document.createElement('canvas').toDataURL('image/webp').indexOf('image/webp') > -1;
}
总结
Webp 压缩率高，图片质量与原图在视觉上没有太大差异的特点，让其很适合用在 web 网页这样的对图片多但对图片质量要求不是很高的场景。在实际使用中，我们可以在使用上述几种方法对浏览器 webp 的支持程度进行判断之后，替换网站图片资源为 webp 格式，对于不支持的浏览器，我们则请求原始图片作为 fallback，保证页面的正常显示。当然，针对 webp 支持的判断只需要一次，我们可以在首次获得判断结果之后将其缓存，在之后需要确保支持 webp 的地方取缓存中的结果即可。
