iOS SDWebImage加載webp圖片

占位圖.jpg

恭喜RNG獲得MSI冠軍??潜支,我們是冠軍~~~

webp介紹

當今互聯網甸赃,無論網頁還是APP,流量占用最大的冗酿,多數都是因為圖片埠对,越是良好的用戶體驗,對圖片的依賴度越高裁替。但是圖片是一把雙刃劍项玛,帶來了用戶體驗,吸引了用戶注意弱判,卻影響了性能襟沮,因為網絡請求時間會相對比較長。

圖片分很多種昌腰,比較主流的就是:位圖(BMP)开伏,jpg(JPEG,有損壓縮格式)遭商,png(無損壓縮格式)等固灵,這三種,按照圖片大小和清晰度來看劫流,依次是:BMP > png > jpg巫玻。因為jpg是有損壓縮格式,所以jpg圖片相對最小祠汇。iOS普遍選擇的是png來作為最優(yōu)先選擇的圖片(蘋果官方也是這樣建議的)仍秤。

不過,有一種圖片格式可很,在大小上比png小诗力,圖片質量上跟png差不多,就是WebP我抠。

簡單描述一下苇本,WebP是google創(chuàng)造出的一種圖片格式导坟,圖片的壓縮和解碼都由google提供的API完成(各種語言都有,不過目前好像沒看到js可以解碼WebP的)圈澈,在無損壓縮的情況下惫周,比png要小28%左右。

現在已經被各大瀏覽器廠商兼容(如:Chrome康栈,Firefox等)递递,不過蘋果的Safri還沒有兼容這種格式,所以如果UIWebView里面含有WebP的圖片的話啥么,就會顯示不出來(但是我們可以通過NSUrlProtocol來做處理)登舞。如果要在APP中使用得話,我們需要引入SDWebImage這個第三方庫悬荣。

開工

查資料菠秒,SDWebImage中可以處理webp圖片,在工程中pod 'SDWebImage'氯迂,但是不知道什么原因践叠,里面并沒有UIImage+WebP.h,所以下面的三方庫都是下載下來手動導入的嚼蚀。禁灼。。

  • 在github下載SDWebImage

  • 在github下載YYWebImage

  • 在github下載FLAnimatedImage

  • 將YYWebImage中的WebP.framework導入工程轿曙,將
    FLAnimatedImage中的FLAnimatedImage弄捕、FLAnimatedImageView添加到SDWebImage下的FLAnimatedImage文件夾下,最后將SDWebImage導入工程中导帝。


    說明圖1

    說明圖2
  • 在target->Build Settings中搜索Preprocessor Macros守谓,添加"SD_WEBP=1"


    說明圖3
  • 在需要加載圖片的地方添加SDWebImage的方法就可以了

[_iconImgView sd_setImageWithURL:[NSURL URLWithString:dataModel.icon] placeholderImage:nil];

最后

展示圖

最近閑來無事,抓了JD的接口您单,仿寫一下界面斋荞,webp就是接口返回的圖片。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末睹限,一起剝皮案震驚了整個濱河市譬猫,隨后出現的幾起案子讯檐,更是在濱河造成了極大的恐慌羡疗,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件别洪,死亡現場離奇詭異叨恨,居然都是意外死亡,警方通過查閱死者的電腦和手機挖垛,發(fā)現死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門痒钝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秉颗,“玉大人,你說我怎么就攤上這事送矩〔仙” “怎么了?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵栋荸,是天一觀的道長菇怀。 經常有香客問我,道長晌块,這世上最難降的妖魔是什么爱沟? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮匆背,結果婚禮上呼伸,老公的妹妹穿的比我還像新娘。我一直安慰自己钝尸,他們只是感情好括享,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著珍促,像睡著了一般奶浦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上踢星,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天澳叉,我揣著相機與錄音,去河邊找鬼沐悦。 笑死成洗,一個胖子當著我的面吹牛,可吹牛的內容都是我干的藏否。 我是一名探鬼主播瓶殃,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼副签!你這毒婦竟也來了遥椿?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤淆储,失蹤者是張志新(化名)和其女友劉穎冠场,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體本砰,經...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡碴裙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舔株。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡莺琳,死狀恐怖,靈堂內的尸體忽然破棺而出载慈,到底是詐尸還是另有隱情惭等,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布办铡,位于F島的核電站咕缎,受9級特大地震影響,放射性物質發(fā)生泄漏料扰。R本人自食惡果不足惜凭豪,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望晒杈。 院中可真熱鬧嫂伞,春花似錦、人聲如沸拯钻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粪般。三九已至拼余,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亩歹,已是汗流浹背匙监。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留小作,地道東北人亭姥。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像顾稀,于是被迫代替她去往敵國和親达罗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內容