webp的探索

谷歌总是在寻求快的路上越奔越远,比如推出新的网络协议quic,比如这篇文章说的webp的图片格式,谷歌的伟大就是自己登上了高峰,也会给地下的人分享一下经验。

一、前言

日常生活中已经习惯了.png.jpg.jpeg.gif这些图片格式,有损压缩无损压缩这些技巧也是经常用到的,目的就是在不影响用户感官的前提下更快的加载展示出来。这个webp的图片则是在不影响用户感官的前提下,将压缩比变得更大,图片更小,速度传输更快。

9bfba760f53916e6a8a8c2458e0b1c36_hd.jpg

这个格式如果你感到陌生,但是你已经接触到了,微信公众号里面的文章图片就是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一键安装:

DamonScreenShot 2018-01-02 10.51.04.png

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 element
  • 自己写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原图origin.jpg
jpg缩小一半的图片originhalf.jpg
jpg压缩75%的图片origin.jpg
jpg缩小一半压缩75%的图片origin.jpg
jpg转换为webp压缩75%的图片origin.jpg
jpg缩小一半转换为webp压缩75%的图片origin.jpg
Last modification:January 2nd, 2018 at 01:15 pm
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment