七牛云存储图片流量优化方案

我们都知道不同的图片格式在同等图片质量的情况下，文件的大小差异很大。比如在同等图片质量的情况下，bmp格式比png要大得多，而png可能比jpg又大得多，而jpg又可能比google最新推出的webp格式大得多。

在互联网时代，无论是移动端还是web端都追求一个极致的客户体验，因此在同等图片质量的情况下，拥有较小的文件大小的图片格式才是最好的格式。

七牛云存储支持webp的格式。你可以指定imageView2指令的format参数为webp来获取一个图片转换为webp格式后的结果。我们任意取一张图片来做演示。

图片	类型	大小
http://qiniulab-public.qiniudn.com/colors.png	image/png	114639
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/jpg	image/jpeg	33495
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/webp	image/webp	14194

上面获取资源的大小，可以使用命令curl -I <资源链接>来获取资源头部信息，然后查看Content-Length的值。

虽然这种webp格式拥有如此的魅力，但是由于不是所有的浏览器都支持，另外iOS平台默认也不支持这种格式，所以看上去没有办法在所有的平台推广。但是本着最大优化的原则，我们还是可以采用一些措施来极大地降低图片的流量。

我们把图片的访问分为移动平台和web平台。

对于移动平台，Android是默认支持的，iOS的话，如果是App，可以通过这个项目(https://github.com/seanooi/iOS-WebP)来集成webp图片解码功能。

对于移动端，目前只有chrome是支持webp格式的，chrome在访问图片的时候会默认给Accept头部添加image/webp值，如下图所示：

所以业务服务器端可以根据这种头部来判断终端浏览器是否支持webp，如果支持的话，返回webp格式的图片链接，如果不支持那么返回jpg格式的图片。这种在动态页面里面是很容易实现的。首先利用imageView2和imageMogr2支持webp的特点来将获取不同图片格式的指令定义为不同的样式，然后在MVC的结构里面，Controller可以去判断Accept头部里面是否有image/web，如果有则返回目标格式为webp的图片样式，否则返回目标格式为jpeg的图片格式。

上面的方案让webp覆盖了Android和iOS的移动设备和以chrome为内核的所有浏览器。另外对于实在无法支持的浏览器，采用jpeg的格式也会大大减少用户的流量。