WebP技术及其应用

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.

参考资料

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