iOS - 让你的工程支持 WebP 格式图片

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

1、通过 CocoaPods 方式

在工程的 podfile 中添加

Object-C

1 2	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 用到了系统的库。

1	－－include of non-modular header inside XXXX

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

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

二、通过YYWebImage

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

1、CocoaPods导入

Object-C

1 2	pod 'YYWebImage' pod 'YYImage/WebP`

2、手动导入

将YYWebImage和vendor文件夹拖入到工程。

具体使用

导入头文件

Object-C

1
2
3

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

设置图片地址

Object-C

    /** << 1、本地加载 > */
//    NSString *path = [[NSBundle mainBundle] pathForAuxiliaryExecutable:@"test.webp"];
//    _imageView.yy_imageURL = [NSURL fileURLWithPath:path];
    /** << 2、网络加载 > */
    _imageView.yy_imageURL = [NSURL URLWithString:@"https://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334"];

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

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