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

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

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

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

图片类型大小
http://qiniulab-public.qiniudn.com/colors.pngimage/png114639
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/jpgimage/jpeg33495
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/webpimage/webp14194

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

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

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

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

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

chrome_request_web_header

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值