为什么80%的码农都做不了架构师？>>> 
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
--百度百科
图片格式的选择
笔者在做H5制作平台，90%以上的流量来自于微信，日PV1亿-2.5亿之间，H5动画有大量JPG/ PNG/GIF图片，如果能将图片进行压缩，将节省很大一部分CDN费用。
笔者的图片资源主要集中在JPEG，PNG， GIF。经过测试，部分Android版本微信版本已经开始支持WebP,难道X5内核是基于Chrome？而IOS版本微信不支持WebP。85%的流量来自于Android 微信。节省图片流量大有可行！！！
经过研究发现微信公众号文章的图片也是自动转为webp格式，看来图片流量也是微信的大头。
兼容性网站可以参考： https://caniuse.com/#search=webp
判断浏览器是否支持WebP有以下方法
- 通过User-Agent来判断UA是否包含Chrome特定版本（Chrome 23开始支持WebP），来判断是否支持WebP，不严谨。
- 基于Http内容协商机制判断， 可以判断request header的Accept字段是否包含image/webp，进行相应的内容返回，例如返回webp格式的图片地址，这样可以大大节省cdn流量，但是这样需要CDN服务器或图片源服务器支持。
- 如果服务器端不允许，可以在js里做文章进行webp的判断。
function checkWebp() {
try{
return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
这种方法无法兼容动态webp（gif 可以转为动态webp）。对比下图参见
来源于： https://isparta.github.io/compare-webp/index_a.html
gif/webp对比
Gif Webp对比
 |
|
|---|---|
| GIF 原图 大小：869k |
Animated WebP 大小：371k |
 |
|
| GIF 原图大小：89.4k |
Animated WebP 大小：4.65k |
从（谷歌网站）找到了判断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(有损，无损，alpha通道，动态)生成一个很小像素的图片，在浏览器中渲染，如果没有问题，就代表支持webp。
CDN厂商的支持
笔者所在公司使用的是七牛云存储，本身支持到webp的转换，七牛云存储文档(https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2）中说webp不支持动图，不过经过笔者测试，七牛是支持webp动图的。
在图片资源后面添加参数： ?imageMogr2/format/webp，如果已经有参数可以使用管道符号（|），例如
?imageMogr2/thumbnail/200x200>/strip|imageMogr2/format/webp 来支持webp有损格式。
如果使用又拍云，可以参考https://www.upyun.com/webp，又拍云可以开启基于协商机制自动图片转为webp。例如： https://p.upyun.com/demo/tmp/D9rVpVLq.webp，
当然阿里云也是支持WebP直接转换的。
上线后经过流量对比，平均带宽节省36%，效果非常好，基本每天节省1万块。
自建图片服务器的WebP化
一般做法是在接入层（nginx）进行一次转换，缓存到服务器，可以使用nginx+lua+ imagemagick进行，可以参考
https://gitee.com/yanue/nginx-lua-GraphicsMagick，不过这种方式是调用gm的命令，可以考虑lua ffi版本的GraphicsMagick
本地测试可以使用imagemagic 或者google 官方cwebp（https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html）
WebP优缺点
相对于gif
- 支持有损和无损压缩，并且可以合并有损和无损图片帧
- 体积更小，GIF 转成有损 Animated WebP 后可以减小 64% 的体积，转成无损可以节省 19% 的体积
- 颜色更丰富，支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明）
- 添加了关键帧、metadata 等数据
缺点：
- 有损WebP 转码比GIF多2.2倍时间，无损WebP比GIF大1.5倍时间
- WebP没有GIF使用广泛。
腾讯可能会在qq浏览器中使用TPG格式，那时候可以使用TPG了，第三方cdn不知道能否跟进
转载请注明出处：https://my.oschina.net/osgit/blog/1647510
请作者喝咖啡：
