1.下载该静态库并导入

https://github.com/YouZhiZheShiJingCheng/YZwebp

2.配置工程

TARGETS->Build Settings->Other Linker Flags 添加一个 -ObjC

3.开始应用

    UIImageView* webp=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    //后缀为小写的时候可以省略
    webp.image=[UIImage imageWithWebP:@"a"];
    webp.backgroundColor=[UIColor redColor];
    webp.center=CGPointMake(self.view.center.x, self.view.center.y*0.5);
    [self.view addSubview:webp];

    UIImageView* webp1=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    webp1.image=[UIImage imageWithWebP:@"a.webp"];
    webp1.backgroundColor=[UIColor greenColor];
    webp1.center=self.view.center;
    [self.view addSubview:webp1];

    //名字大小写不对识别不了
    UIImageView* webp2=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    webp2.image=[UIImage imageWithWebP:@"a.WEBP"];
    webp2.center=CGPointMake(self.view.center.x, self.view.center.y*1.5);
    webp2.backgroundColor=[UIColor blueColor];
    [self.view addSubview:webp2];

Demo地址：

https://github.com/YouZhiZheShiJingCheng/WebpDemo

WebP是google推行的新的图片格式, 可以使用更小的空间,保存更清晰的图片, 但由于格式较新, Adobe Photoshop CC 2019 20.0.2版本都无法打开查看, 所以我们需要保存网页中的WebP图片为通用性较强png格式

我们可以使用一款扩展程序图片另存为JPG/PNG/WebP, 将WebP格式图片转换为png格式

我们以 谷歌艺术和文化 https://artsandculture.google.com/ 网站内的图片为例做一个示范

• 上图超清gif原图: https://user-images.githubusercontent.com/15868458/63221239-cdb01600-c1c8-11e9-9fef-7add6b98a213.gif

• 上图抖音短视频链接: http://v.douyin.com/yd1P5L/

除了能将浏览器图片保存为png, 还可以保存为jpg和WebP格式

Chrome扩展图片另存为JPG/PNG/WebP 下载链接:

https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd

Chrome扩展图片另存为JPG/PNG/WebP并不能自动批量转换大量图片的格式, 如果你有大量转换图片格式的需求, 可以尝试使用XnConvert这款软件, 官网下载地址: https://www.xnview.com/en/xnconvert/#downloads

XnConvert使用示例: 使用XnConvert将png格式图片批量转换为WebP格式

• 上图超清gif原图: https://user-images.githubusercontent.com/15868458/63221909-9ba3b180-c1d2-11e9-873d-2b1723b34e90.gif

小结:

WebP是非常先进的格式, 但由于Photoshop这类元老级图像编辑软件不支持, 我们只能将图片为png格式,再进行编辑, 先进技术改变世界, 需要一个过程, 而在过程中提供一个折中的方案(把WebP装换为png, 再将png图片装换为WebP), 也是一件有价值的事~

webp介绍

WebP，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，能节省大量的服务器带宽资源和数据空间。

webp转换

1. 右键点击图片，点击【在新标签页中打开图片】。
2. 若是看到地址栏的后缀是webp，把webp改为jpg/png，回车。然后再点击图片，选择【另存为】，图片存储为jpg/png。
3. 若看到地址栏的后缀不是webp，点击图片，选择【另存为】，图片存储为wenp格式的。然后再次打开存在本地webp格式图片，看到地址栏的后缀是webp，按照步骤二继续操作。
   
   踩坑：直接修改图片的后缀名不可取，没有改变原图片的属性，其实还是webp的格式。也可以通过转换工具或者命令行进行转换。

webp兼容性

目前网页浏览器当中，Google Chrome和Opera原生支持静态与动态的WebP格式。Firefox浏览器亦在65.0版本支持WebP图像。
苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10 和 macOS Sierra GM种子版本中却移除了WebP的支持。

总结，webp 在 ios5/6 的 chrome、safari 浏览器不支持，在 Android 常用的浏览器都支持。

兼容解决方案

前端js的方案还未实践，想实践的可参考原文[3]。
简单方案，把webp格式转为png，在项目中使用，保正图片在各设备正常显示。

原文：

[1] https://developers.google.com/speed/webp
[2] https://zh.wikipedia.org/wiki/WebP
[3] https://segmentfault.com/a/1190000004948757