WebP是一种同时提供了「有损压缩」与「无损压缩（可逆压缩）」的图片文件格式，派生自视频编码格式 VP8，被认为是 WebM 多媒体格式的姊妹项目，是由 Google 在购买 On2 Technologies 后发展出来，以 BSD 授权条款发布。
为什么使用 WebP
WebP 主要优势是体积小。根据 Google Developers 上的测试数据，WebP 格式图片的体积比相同质量的 JPEG 格式图片小 25%-34%。
同时 WebP 还支持动态图像。在相同色块较多的情况下，动态 WebP 的体积甚至只有 gif 体积的 20%。
如这个 gif 原始大小 4.9M，使用阿里云 oss 提供的 Webp 转换 API 进行转换后得到的 WebP 格式图片大小仅 906K。
兼容性
Caniuse 上的数据显示大约有 80% 的国内用户的浏览器支持 WebP 格式，使用 WebP 格式将带来较明显的效果。
检测与使用
由于不是所有的浏览器都支持
WebP，所以要检测浏览器是否支持，然后在不支持的浏览器中使用其他更通用的格式。
服务器通过Accept headers的内容与浏览器协商
服务端根据客户端发送的 Accept headers 的内容是否包含 image/webp 来决定是否使用 WebP 格式的图片。
Modernizr
Modernizr是用于检测浏览器对 HTML5 和 CSS3 特性支持情况的 JavaScript 库，其中与 WebP 相关的属性有 Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha 和 Modernizr.webp.animation。
HTML5 元素
通过 HTML5 的 <picture> 元素可以很方便地使用 WebP 格式，并在不支持的情况下使用默认格式的图片。
<picture>
<source type="image/webp" srcset="images/butterfly.webp" />
<img src="images/butterfly.jpg" alt="a butterfly" />
</picture>
在 JavaScript 代码中
可以用几张极小的 WebP 图片来检测浏览器是否支持相应的特性。
// check_webp_feature:
// 'feature'可以是'lossy', 'lossless', 'alpha' or 'animation'中的一个.
// 'callback(feature, result)'会在得到检测结果后被异步调用，所以依赖检测结果的代码应该放在回调函数中。
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];
}
参考文章
https://developers.google.com/speed/webp/faq https://developers.google.com/speed/webp/docs/webp_study http://isux.tencent.com/introduction-of-webp.html