我们都知道不同的图片格式在同等图片质量的情况下,文件的大小差异很大。比如在同等图片质量的情况下,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
的格式也会大大减少用户的流量。