更小更快更强，新一代图片格式 WebP 的应用实践

前言
图片自己比文字更容易给人留下直观印象造成记忆，在信息量爆发的移动互联网时代更是如此，图片基本占据了用户们80%以上的注意力，因此人们对于图片质量的要求也就愈来愈高了。JPG、JPEG、PNG、GIF这些图片格式基本上已经达到了优化极限，是时候试试新的东西了。

关于WebP
WebP是谷歌在10年推出一种新型图片格式，最先也是应用在谷歌产品中，谷歌前不久发布的Android Studio 2.3正式版中就包括对WebP支持的更新。

与其余图片格式相比，在肉眼没法分辨图片质量差别的状况下，WebP的空间占用是最小的，目前国内外各大互联网公司都已经开始应用这一图片格式。

（美团首页）

美团云实践：Webp 格式的识别与转换

在实测中，webp 格式比 jpg 格式减少约 20%。这对优化用户体验，减小CDN带宽消耗有很好的效果，但并非全部浏览器都支持 webp ，因此为了使用 webp，须要作一点兼容性的工做。

首先是判断，即识别单次访问的来源浏览器是否支持 webp 格式，
其次是执行，若是该浏览器支持，则将原图替换为 webp 格式，并返回。若是不支持，则显示原格式图片。

在识别阶段，咱们有两种方法：

1. Server 处理
   1）经过 UAString 判断浏览器支持状况
   经过对浏览器进行分类，支持webp放在白名单里，不支持的则为黑名单。判断为白名单，则直接调用，返回webp格式图片；反之，则显示原图。
   这种方式的优势在于，只需按期维护白名单便可，逻辑简单；缺点则在于不可扩展、不可测试、UA判断会出现不许确的状况。

caniuse.mojijs.com/Home/Html/i…

2)读取 JavaScript 种下的 cookie 判断浏览器支持状况
Server处理中的另外一种方式是经过读取 JavaScript 种下的 cookie来实现判断。
这种方式的优势是表现稳定，访问速度更快，切换无压力。
但缺点是，页面静态化会致使用户切换浏览器时不能自主更新，图片服务失效。
好比用户用支持webp的浏览器A请求页面，这时缓存的静态页面均使用webp图片，但当该用户使用不支持webp的浏览器B时，访问网页则会出现请求不到图片的报错。

2.Client 处理
Client 处理，是美团云为美团主站提供的处理方式。在这种处理方式中，浏览器端发送的beacon webp 请求后，经过检测其加载状况来断定 webp 支持状况，而后浏览器写一个cookie。以后经过读取浏览器cookie判断是否支持webp，就能够进行下一步替换操做了。

替换图片过程当中也是有两种处理方式：

1.Server 处理
在 server 端处理的优势是对下游开发者透明，缺点是静态页面的缓存数量会翻倍。

替换方式以下：

• 生成 URL 的函数（ 好比 $deal->getImageUrl ) ，经过运行函数中直接实现替换
• 对 varnish 静态化的页面，首先识别浏览器请求头类型，而后将webp 和传统 jpg 的各缓存一份两份待处理。而后在生成 URL 的地方作替换。

2.Client 处理
在 client 端处理能够比较好地应对页面静态化的状况，主要针对懒加载（非首屏）的图片进行处理，直接经过修改懒加载器来实现。
对非懒加载的图片暂时没有特别好的办法。目前，可用替换路径的方式来处理。

Client 处理实际上效果也是不错的，美团页面里90%以上的图片都是懒加载的，基本上均可以知足需求。对于大多数用户来讲，采用Client 处理实现webp转换是个不错的选择。

美团云对象存储服务如今已经支持webp功能，感兴趣的朋友能够实测对比一下，看看差异。
mos.meituan.com/activity/we…