前言

最近在公司做类似与朋友圈动态展示图片的时候，无意间接触到了WebP格式图片。WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。下面开始介绍几种让工程支持WebP方法吧😀。

更新日志

2019-03-10：解决cocoapods不能安装webp库问题

一、通过SDWebImage三方图片加载库实现

1、通过CocoaPods方式

在工程的podfile中添加

pod 'SDWebImage'
pod 'SDWebImage/WebP'

注意：因为libwebp(0.5.1)是谷歌的库，下载需要翻墙。通常会报以下错误，如果确实下不下来，只能通过手动方式导入相关库了： ![屏幕快照 2017-12-25 下午9.28.51.png](### 前言

最近在公司做类似与朋友圈动态展示图片的时候，无意间接触到了WebP格式图片。WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。下面开始介绍几种让工程支持WebP方法吧😀。

更新日志

2019-03-10：解决cocoapods不能安装webp库问题

一、通过SDWebImage三方图片加载库实现

1、通过CocoaPods方式

在工程的podfile中添加

pod 'SDWebImage'
pod 'SDWebImage/WebP'

注意：因为libwebp(0.5.1)是谷歌的库，下载需要翻墙。通常会报以下错误，如果确实下不下来，只能通过手动方式导入相关库了：

2、手动导入方式

1、将SDWebImage(4.1.0)拖入到工程，如下图：

2、下载libwebp库（需要翻墙）我下的版本是0.5.1没有打包成framework，所以我把自己也尝试将库文件打包成静态framework，打包出来目录如下：

3、设置target－>build setting－>搜索preprocessor 添加SD_WEBP=1,如下图：

好了，配置已经完成，现在工程已经支持WebP显示了，我的项目里都是加载的网络WebP格式图片，我写了一个WebPDemo_Method1能够显示本地WebP图片。在我的电脑能翻墙的时候也把其他版本的libwebp库(libwebp_V0.5.1、ibwebp_V0.5.2、libwebp_V0.6.0)下了下来,0.5.1是我自己打的包，另外两个版本是官方打好的包，有需要的可以自行下载相应的版本。

注意
1、导入工程的libwebp库，不一定非要framework,也可以就把相应的库文件导入到工程，只需要注意头文件导入名称就可以了。
2、demo中，我并没有用SDWebImage(4.1.0)的原UIImage+WebP.h和UIImage+WebP.m文件，而是对头文件做了一定修改，如果工程用最新的SDWebImage报错，可以用我demo中UIImage+WebP文件下的两个文件。

报错解决

1、我自己打的静态库framework在工程运行时报错，因为framework用到了系统的库。

－－include of non-modular header inside XXXX

解决办法是：Allow Non-modular includes in Framework Modules 设置为YES，如下图：

重新运行工程，没有报错，可以正常显示WebP格式图片了。

二、通过YYWebImage(2017-12-28更新)

最近在看YYKit组件的时候，发现YYWebImage也支持webp格式片，集成使用也相当方便。

1、CocoaPods导入

pod 'YYWebImage'
pod 'YYImage/WebP`

2、手动导入

将YYWebImage和vendor文件夹拖入到工程。目录结构如下：

[图片上传失败...(image-20a4e3-1515331945147)]

具体使用

导入头文件

#import "YYWebImage.h"
或
#import <YYWebImage.h>

设置图片地址

    /** << 1、本地加载 > */
//    NSString *path = [[NSBundle mainBundle] pathForAuxiliaryExecutable:@"test.webp"];
//    _imageView.yy_imageURL = [NSURL fileURLWithPath:path];
    /** << 2、网络加载 > */
    _imageView.yy_imageURL = [NSURL URLWithString:@"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/12/28/1609d17b5af17a56~tplv-t2oaga2asx-image.image"];

好了，通过YYWebImage也实现了webp格式图片的显示，要查看更多YYWebImage的用法，可以到GitHub上查看使用文档。顺便也贴出测试WebPDemo_Method2。

问题解决

1、iOS使用cocoapods 安装libwebp 0.6.1遇到Error installing libwebp解决方法

- 查看mac中cocoapods 本地库路径
pod repo

在本地库中, 并找到对应的libwebp版本的文件

find /Users/swae/.cocoapods/repos/master -iname libwebp

切换到文件夹

cd /Users/swae/.cocoapods/repos/master/Specs/1/9/2/libwebp

编辑json文件

sudo vim libwebp.podspec.json

//找到这里
"source": {
"git": "https://chromium.googlesource.com/webm/libwebp",
"tag": "v0.6.0"
},

将其中的"git" 对应的url替换为https://github.com/webmproject/libwebp.git,并保存最后再执行pod install

总结

当然，支持WebP显示的方法也不止通过三方库的方式，也可以通过webView方式，还可以通过NSURLProtocol方式，如果需要用到以上两种方式，可以自行研究一下。如果大家有更好的方法或者建议，欢迎大家一起讨论。

参考文章

1、webP 格式图片在 iOS 中的应用
2、SDWebImage支持webp格式的图片
3、ios开发中报错处理－－include of non-modular header inside XXXX
4、How to support webp? )