前言
今天中午在领完盒饭，吃饭的时候，正吃着深海鳕鱼片，蘸上番茄酱，那美味，简直无以言表。突然产品急匆匆的跑过来说：“咱们这个页面图片太多，浏览的时候感觉图片加载出来的时候还是有点慢？”我忽然虎躯一震，想到之前已经把图片根据设计稿的尺寸进行了CDN的剪裁，已经小了40%左右，产品经理竟然还不满意，没有办法，谁让人家是甲方，只能怯怯的回答道：“能...能吧...”，产品听到‘能’这个字便哼着小曲扬长而去,留下我独自一人，面对着已经变味的深海鳕鱼片...一遍又一遍的想着问题该如何解决...
webp简介
Webp 是 Google 在2010年发布的一种图片格式，在相同图片质量情况下，比png和jpg格式的体积要小得多。WebP支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。
判断浏览器是否支持webp
1. 使用 canvas 的 toDataURL 进行判断
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。
function isSupportWebp() {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).startsWith('data:image/webp')
} catch (err) {
return false
}
}
2. 与第一种方法类似
!![].map主要是判断是否是IE9+，以免toDataURL方法会挂掉。如果你直接对数组原型扩展了map方法，则需要使用!![].map以外的方法进行判断，例如!!window.addEventListener等。
var isSupportWebp = !![].map &&
0 == document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp")
webp优劣势
优势
WebP图片相比于JPG，拥有：
- 更小的文件尺寸;
- 更高的质量——与其他相同大小不同格式的压缩图像比较。 目标图像的质量和文件大小之间存在明显的折中关系。在很多情况下，可以很大程度降低图像的大小，而用户却几乎不会注意到其中的差别。
劣势
根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。
在编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计，主要问题在于1.5倍的解码速度是否会影响用户体验。
总结
WebP格式是提升用户体验的又一利器，虽然浏览器对WebP的支持仍有很多需要改进的地方，但是通过是使用一些工具和技术，能够体会到WebP的好处，使得页面加载速度更快，同时节省了带宽。
看到页面图片加载的速度有了肉眼可见的进步，产品终于竖起了大拇指，说：“明天给你加鸡腿🍗”，等等，明天？
