谷歌总是在寻求快的路上越奔越远，比如推出新的网络协议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

现在谷歌浏览器的版本都已经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 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原图
jpg缩小一半的图片
jpg压缩75%的图片
jpg缩小一半压缩75%的图片
jpg转换为webp压缩75%的图片
jpg缩小一半转换为webp压缩75%的图片

版权属于：东哥笔记

本文链接：https://ddceo.com/blog/730.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！