谷歌总是在寻求快的路上越奔越远,比如推出新的网络协议quic,比如这篇文章说的webp的图片格式,谷歌的伟大就是自己登上了高峰,也会给地下的人分享一下经验。
一、前言
日常生活中已经习惯了.png
、.jpg
、.jpeg
、.gif
这些图片格式,有损压缩
、无损压缩
这些技巧也是经常用到的,目的就是在不影响用户感官的前提下更快的加载展示出来。这个webp
的图片则是在不影响用户感官的前提下,将压缩比变得更大,图片更小,速度传输更快。
这个格式如果你感到陌生,但是你已经接触到了,微信公众号里面的文章图片就是webp格式的,就是为了传输展现更快,当然也更加节省宽带。
比如你用电脑的谷歌浏览器看这个微信公众号的文章:https://mp.weixin.qq.com/s/TsEo19cjXpIhcMSbN13Cfw
使用右键打开文章中的图片地址是这样的
https://mmbiz.qpic.cn/mmbiz_jpg/9Zho2ib0IbnoZBCN9gz9no1KPyuEEQa5dibYgxC2e5tMm9teFFZ0nJycNyGjUJkDlic4F6olYR09PgoYCA2ibxeX2A/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1
但是你右键保存图片到本地的话,发现文件名虽然正确,但是图片在本地是打不开的,好像是损坏的,但是不是这样的哦。你现在把这个图片地址中的tp=webp
修改为tp=png
,然后再保存,是不是就正常打开了。
但是如果你是用的mac电脑的Safari浏览器,右键打开图片的地址是这样的
https://mmbiz.qpic.cn/mmbiz_jpg/9Zho2ib0IbnoZBCN9gz9no1KPyuEEQa5dibYgxC2e5tMm9teFFZ0nJycNyGjUJkDlic4F6olYR09PgoYCA2ibxeX2A/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1
发现返回的不是webp的格式了,是不是很神奇,这是因为并不是所有的浏览器都支持webp的图片格式。
二、支持webp的浏览器
支持webp的浏览器可以在谷歌的webp介绍里面看到,当然需要翻墙看:https://developers.google.com/speed/webp/faq
支持有损压缩 | 无损压缩和透明度 | 动画 | |
---|---|---|---|
浏览器 | Google Chrome (desktop) 17+ <br/> Google Chrome for Android version 25+ <br/> Opera 11.10+ <br/> Native web browser, Android 4.0+ (ICS) | Google Chrome (desktop) 23+ <br/> Google Chrome for Android version 25+ <br/> Opera 12.10+ <br/> Native web browser, <br/> Android 4.2+ (JB-MR1) <br/> Pale Moon 26+ | Google Chrome (desktop and Android) 32+ <br/> Opera 19+ |
现在谷歌浏览器的版本都已经63了,所以现在基本上市面上的谷歌浏览器和安卓手机都已经支持了,当然国内的使用谷歌内核的浏览器,比如360极速浏览器等都是支持的。
但是苹果系的Safari是不支持的,不管是iPhone还是iPad还是mac的Safari浏览器,都是不支持的,可以最后测试的图片就可以知道
三、图片格式转换
3.1、源文件安装编译库
谷歌官方提供了windows、linux、mac各个平台的编译库:https://developers.google.com/speed/webp/docs/precompiled
通过下载可执行文件和库,按照说明安装即可。
3.2、MacPorts安装编译库
如果是mac,可以通过更简便的使用MacPorts一键安装:
1、下载安装MacPorts,安装MacPorts需要先安装xcode
2、更新MacPorts
sudo port selfupdate
3、安装libwebp:
sudo port install webp
然后就等待着一键安装完成即可。
3.3、文件转换
安装完libwebp后,就可以通过命令行去转换了:https://developers.google.com/speed/webp/docs/using,其中cwebp
命令是将图片转换为webp格式,dwebp
命令是将webp图片转换其他图片格式。
3.3.1、将图片转换为压缩质量为80的webp图片
cwebp -q 80 image.png -o image.webp
3.3.2、将webp图片转换为png图片
dwebp image.webp -o image.png
四、网站策略
因为苹果的使用者不可忽视,尤其是iPhone用户,所以如果你是一个网站的话,要么就是继续采用jpg等这种大众的图片格式,要么就需要采取像微信公众平台那种,根据浏览器的不同,去返回不同的图片格式。
谷歌提供了三种方案去判断当前用户的浏览器是否支持:https://developers.google.com/speed/webp/faq
- Modernizr
- HTML5
- 自己写JavaScript去读取一个webp是否成功,然后回调
现在七牛云和又拍云都提供webp的转换,但是具体的转换规则和插件都要根据不同的建站程序去使用。期待有白衣骑士来开发这个
五、iOS的app开发策略
图片和视频的转换最难的就是编码和解码,对webp的解码和编码,谷歌也已经提供了文档:https://developers.google.com/speed/webp/docs/api,如果想自己动手也可以试试
更简单的是iOS已经有可以直接使用的库,比如SDWebimage
就提供了UIImage+WebP.h
这个可以自己选择添加的模块
使用cocoapod,添加
pod 'SDWebImage/WebP'
然后就会出现这个类别Categories,使用时导入头文件
#import "UIImage+WebP.h"
有一个sd_imageWithWebPData
的函数就是将webp的data转换为UIImage。
-(void)startShow{
NSLog(@"startShow");
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"3049242146" ofType:@"jpg"];
NSData *data = [NSData dataWithContentsOfFile:filePath];
UIImage *image = [UIImage sd_imageWithWebPData:data];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, 100, 100)];
[imageView setImage:image];
[self.view addSubview:imageView];
}
六、测试图片
下面的这些测试图片为同一张图片的不同处理,可以右键保存到本地,看压缩比,当然在Safari浏览器中webp格式的图片是显示不出来的
格式 | 图片 |
---|---|
jpg原图 | |
jpg缩小一半的图片 | |
jpg压缩75%的图片 | |
jpg缩小一半压缩75%的图片 | |
jpg转换为webp压缩75%的图片 | |
jpg缩小一半转换为webp压缩75%的图片 |
版权属于:东哥笔记 - DongGe.org
本文链接:http://dongge.org/blog/730.html
自2017年12月26日起,『转载以及大段采集进行后续编辑』须注明本文标题和链接!否则禁止所有转载和采集行为!