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

咱们都知道不一样的图片格式在同等图片质量的状况下，文件的大小差别很大。好比在同等图片质量的状况下，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的格式也会大大减小用户的流量。