WebP是什么
WebP是一种适用于Web的图片格式，由Google在2010年发布。
WebP的优势
总体上WebP图片更小，能显著提升图片加载速度，减少流量消耗。与现有图片格式相比，虽然WebP图片大小变小了，但是图片质量凭肉眼难以看出差异。
- 无损压缩：与PNG相比，文件大小减少26%
- 有损压缩：与JPEG相比，文件大小减少25～34%
- 动画：与GIF相比，文件大小减少19～64%
WebP使用的图像编码技术
- Fancy采样算法
- 区域智能压缩
- 预测编码技术
WebP的兼容性与可用性
兼容性
- 浏览器兼容性。看看您的浏览器是否支持WebP，请戳这里，或者这里体验。
- 其它软件或平台对WebP的支持。
从浏览器的市场占有率来看，兼容性达50%，能够覆盖现有一半用户。
至于移动端，安卓4+提供原生支持，其它版本以及iOS平台可以使用官方提供的解析库（安卓，iOS）。
可用性
- 如果使用WebP，大约有50%用户受益，其余用户需要兼顾处理。
- 如果页面中图片较多或较大，建议使用
- 内嵌Chromium的webview的客户端软件，建议使用
- 使用node-webkit开发的客户端软件，建议使用
WebP的性能
WebP的编解码速度比PNG和JPEG慢：
- 与JPEG相比，编码慢约10倍，解码慢约1.4倍
解码慢，对页面加载有影响么？实际测试发现，WebP加载更快。
对比测试：
WebP的应用现状
- 在Google的产品比如Youtube、Gmail、Google Play、Google maps、Picasa等等都可以看到WebP的身影。Chrome网上商店甚至已完全使用WebP，每天节省几TB带宽。
- Facebook、ebay、腾讯、淘宝、美团等早已尝试使用
- 腾讯新闻客户端、腾讯网、QQ空间的大背景和动态里面的照片
- 淘宝天猫的商品列表页
WebP的部署
WebP图片格式转换工具
除了Google提供的命令行工具外，还有腾讯ISUX前端团队开发的智图、iSparta等。
客户端检测
检查浏览器是否支持WebP
一种方法是用js尝试解码一小段WebP图片数据。
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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];
}
如何兼顾不支持WebP的浏览器
在img元素中同时包含WebP格式和其它格式图片，使用js判断浏览器是否支持WebP，然后选择相应的图片格式。
服务器端检测
主要思想是通过检查请求头中的User-Agent或Accept信息来判断客户端是否支持WebP，可以参考WebP with Accept negotiation.
相关开发库或例子
- Android：webp-android-backport
- iOS：WebP-iOS-example
- Python：Pillow
参考资料
- A new image format for the Web
- WebP 探寻之路
- http://caniuse.com/#search=webp
- http://faso.me/slides/2014/webp/
- http://www.tuicool.com/articles/FFZ73y
- https://docs.google.com/presentation/d/1NidHQ-HAWpgQiYJ44gOfgcp_FQ2u59WE4eHuSvwddXY/present?slide=id.p19
- https://www.igvita.com/2013/05/01/deploying-webp-via-accept-content-negotiation/
- http://www.jonathanklein.net/2013/02/a-comprehensive-guide-to-webp.html
网友评论