allenGKC
给图片减减肥——webp
背景
一直以来，我主要的业务线都是活动相关，因此活动页做的相对比较多，大家都知道活动页的特点是以图为主，按钮文字为辅，由于都是在移动端H5页面，而我经常碰到的问题就是整个页面都是图片，几乎没有文字，因此如何将图片压缩到最小，提升页面速度，节省带宽是至关重要的。带着这个疑问，无意中搜到一篇关于图片压缩的文章，其中提到之前没有接触过的一种图片格式——webP。这让我提起了兴趣，该文章讲到这是google提出的一种新的图片格式，能大幅度降低图片的大小，抱着试一试的态度，我决定研究一下这个神秘的webP究竟为何方神圣。
what is webP？
webP（发音weppy），根据维基百科的结果，是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自视频编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。
以上是官方对webP的介绍，详情可以参考webP官方主页。但这样的介绍未免枯燥乏味，根据我自己的理解，简单概括webP：一个体积小，但是还不损失精度的图片文件格式，和它的兄弟png，jpg相比，体积小很多哦~并且还能支持无损压缩和有损压缩，在这样的情况下，还能保持原先高精度，实乃绝佳的图片压缩解决方案。 So, why shall we use it？
why webP？
通过以上对webP的简单介绍，我们发现了原来除了jpg，png还有一个如此有优势叫webP的小婊砸，那我们为什么要使用webP?
webP的优势
这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果。更多测试查看这里（请用 Chrome 浏览器打开）
关于几种图片格式的特点可以参见《web前端图片极限优化策略》，里面对于各个图片格式的优势与劣势介绍的较为详细，这里就不一一列举了。
由上面的介绍，我们可以得出几个结论：
- PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
- 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
- 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题
webP的劣势
根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。
在编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计，主要问题在于1.5倍的解码速度是否会影响用户体验。 下面通过同样质量的WebP与JPG图片加载的速度进行测试 。测试的JPG和WebP图片大小如下：
测试数据折线图如下：
从折线图可以看到，WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了。所以，使用WebP基本没有技术阻碍，还能带来性能提升以及带宽节省。
看到这里大家肯定有疑问了，既然这种图片格式这么好，那么现在普及型如何？有没有公司在用呢？兼容性如何？下面就一一为大家解答这些疑惑。
webP使用情况
有没有公司在使用webP呢？答案是 YES！2010 年 WebP 发布，在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。Youtube上有介绍关于webP的视频，感兴趣的朋友可以看看。
webP的兼容性
根据can I use中对webP兼容性最新的搜索结果，国内至少有50%的用户可以使用webP这种图片格式。
可以发现除了chrome浏览器和还有基于 Chromium 内核的浏览器，其他浏览器和IOS平台支持性还是一般。
How to use webP?
使用webP，首先需要区别的是在什么场景下使用：
1.在线转换工具：
官方介绍可以使用命令行工具cwebp，生成webP文件。
在Mac下，可以使用homebrew安装webp工具：
brew install webp
Linux采用源码包来安装（CentOS下）：
yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel# 安装编译器以及依赖包 wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.5.0.tar.gz tar -zxvf libwebp-0.5.0.tar.gz cd libwebp-0.5.0 ./configure make make install
运行cwebp -h，成功显示帮助信息就表示安装好了。
安装完命令行工具后，就可以使用cwebp将JPG或PNG图片转换成WebP格式。
cwebp [-preset <...>] [options] in_file [-o out_file]
options参数列表中包含质量参数q，q为0～100之间的数字，比较典型的质量值大约为80。
更多细节详见使用文档
4.浏览器： 由于webP在浏览器中的兼容性的问题，在浏览器端使用webP，首先需要检测浏览器是否支持webP的格式。 JavaScript检测是否支持WebP代码如下：（出自Google官方文档）
// 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图片的浏览器，会在请求头Accept中带上image/webp的信息，服务器便能识别到浏览器是否支持WebP，在服务器中处理图片。
最直接和简单的方法是直接在支持webP的浏览器中直接使用webP，具体方法可以参见JEREMY WAGNER在Using WebP Images中的使用方法。
但是除了这个方法，还有其他方式使用webP吗？当然有！
Matt Shull 在他的《WebP Images & Performance》中使用了四种方法：
结论：根据实验结果，可以发现使用Picturefill的方法相对最优。
总结
本文主要介绍了webP的相关知识，由于篇幅的原因，对webP的介绍不全，欢迎大家补充。总的来说，webP作为Google推荐的图片格式，在支持的浏览器中表现的还是优于jpg和png的，因此鼓励大家在部分场景下可以使用webP，不仅可以压缩图片的大小，还可以节省带宽。
参考文献
- webP(维基百科)
- webP官网
- WebP 探寻之路
- WebP相对于PNG、JPG有什么优势？
- 探究 WebP 一些事儿
- 浅谈 WebP 图片格式
- WebP Images & Performance
- Using WebP Images
