前言
最近在公司做類似與朋友圈動態展示圖片的時候，無意間接觸到了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)拖入到工程，如下圖：
注意
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，如下圖：
二、通過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://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334"];
複製程式碼好了，通過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?
)
2、手動匯入方式
1、將SDWebImage(4.1.0)拖入到工程，如下圖：
注意
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，如下圖：
二、通過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://user-gold-cdn.xitu.io/2017/12/28/1609d17b5af17a56?w=534&h=300&f=webp&s=39334"];
複製程式碼好了，通過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?