前言
图片本身比文字更容易给人留下直观印象形成记忆，在信息量爆发的移动互联网时代更是如此，图片基本占据了用户们80%以上的注意力，所以人们对于图片质量的要求也就越来越高了。JPG、JPEG、PNG、GIF这些图片格式基本上已经达到了优化极限，是时候试试新的东西了。
关于WebP
WebP是谷歌在10年推出一种新型图片格式，最早也是应用在谷歌产品中，谷歌前不久发布的Android Studio 2.3正式版中就包括对WebP支持的更新。
与其他图片格式相比，在肉眼无法分辨图片质量差异的情况下，WebP的空间占用是最小的，目前国内外各大互联网公司都已经开始应用这一图片格式。
美团云实践：Webp 格式的识别与转换
在实测中，webp 格式比 jpg 格式减小约 20%。这对优化用户体验，减少CDN带宽消耗有很好的效果，但并不是所有浏览器都支持 webp ，所以为了使用 webp，需要做一点兼容性的工作。
首先是判断，即识别单次访问的来源浏览器是否支持 webp 格式，
其次是执行，如果该浏览器支持，则将原图替换为 webp 格式，并返回。如果不支持，则显示原格式图片。
在识别阶段，我们有两种方法：
- 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…
