一. 本地webp图片+网络webp图片加载

安卓原生就已经支持webp图片了，毕竟是亲儿子啊，iOS可能因为是竞争对手的原因，原生支持的不太好，所以我们要自己想办法。

首先要知道iOS14以上是支持webp图片的，不信可以自己去尝试。

由于我的项目没使用cocoapods，SDWebImage和YYImge都是本地导入的，所以下面只讲本地导入的方式如何支持webp，其实原理都是一样的。

由于SDWebImage和YYImge都支持webp图片加载，所以如果使用SDWebImage或者YYImge加载本地webp图片或者网络webp图片就会很简单，我们需要先导入WebP.framework（WebP.framework是我从YYKit里面找的），然后对于SDWebImage还要在BuildSetting - preprocessorMacros 里面添加SD_WEBP=1，如下：

至于为什么要这么操作，直接看一下SDWebImage和YYImge源码就行了。

这样之后使用SDWebImage和YYImge就可以加载本地webp图片和网络webp图片了。Demo在文末。

二. WKWebview支持webp图片

iOS14以下WKWebview是不支持webp图片的，如果想要WKWebview支持webp图片，我们的思路是：拦截网页的请求，如果请求是webp图片，就使用我们自己的请求去处理，拿到webp图片数据后，再使用SDWebimage转成png图片数据，然后再调用原来的请求，将png图片数据传递回去。

拦截网页的请求你肯定会想到NSURLProtocol，但是NSURLProtocol只支持NSURLSession、NSURLConnection、UIWebview，不支持WKWebview，但是网上有大神找到了可以通过注册Scheme的方式，强行让NSURLProtocol支持WKWebview。

[NSURLProtocol wk_registerScheme:@"http"];
[NSURLProtocol wk_registerScheme:@"https"];

通过这样的方式我们可以做到让WKWebview支持webp图片，但是有一个很大的弊端：Ajax的请求body为空。

如何解决Ajax的请求body为空的问题？

上面注册Scheme，我们不注册http、https了，我们注册一个自定义的Scheme，如下：

[NSURLProtocol wk_registerScheme:@"webphttp"]; //相当于http
[NSURLProtocol wk_registerScheme:@"webphttps"]; //相当于https

然后需要服务端配合，将webp图片地址的Scheme改成webphttp、webphttps，如下：

webphttps://pavo.elongstatic.com/i/mobile750_448/KhelRY5S80.webp

然后客户端拦截的时候，如果发现有webp前缀，就截取并删除webp前缀，其他的就和上面一样了。

详细代码地址：webp的Demo