WebP載入:SDImageWebPCoder和YYImage對比

語言: CN / TW / HK

什麼是WebP?

WebP,是一種同時提供了有失真壓縮與無失真壓縮的圖片檔案格式,是Google新推出的影像技術,它可讓網頁圖檔有效進行壓縮,同時又不影響圖片格式相容與實際清晰度,進而讓整體網頁下載速度加快。

  • WebP 無失真壓縮的圖片可以比同樣大小的 PNG 小 26%;
  • WebP 有失真壓縮的圖片可以比同樣大小的 JPEG 小 25-34%;
  • WebP 支援無損的透明圖層通道,代價只需增加 22% 的位元組儲存空間;
  • WebP 有損透明影象可以比同樣大小的 PNG 影象小3倍。

image.png

WebP對比GIF的優勢:

  • 支援有損和無失真壓縮,並且可以合併有損和無損圖片幀
  • 體積更小,GIF 轉成有損 WebP 後可以減小 64% 的體積,轉成無損可以節省 19% 的體積
  • 顏色更豐富,支援 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道(而 GIF 只支援 8-bit RGB 顏色以及 1-bit 的透明)
  • 添加了關鍵幀、metadata 等資料

WebP對比GIF的劣勢:

  • 消耗較多的 CPU 和解碼時間(多 1.5~2.2 倍)
  • UIWebView無法載入(需通過NSUrlProtocol來處理)
  • 壓縮時間長,大概是png的8倍左右(不過一般都是在服務端壓縮,客戶端解碼,所以服務端可以做個預壓縮)

SDImageWebPCoder連結\ YYImage連結

SDImageWebPCoder載入WebP:

```

import

NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
NSData *data = [NSData dataWithContentsOfFile:imagePath];
self.redImgView.image = [UIImage sd_imageWithWebPData:data];

```

YYImage載入WebP:

```

import "YYImage.h"

NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"bigGif" ofType:@"webp"];
NSData *data = [NSData dataWithContentsOfFile:imagePath];
self.redImgView.image = [YYImage imageWithData:data];

```

SDImageWebPCoder解析WebP原理:

image.png

YYImage解析WebP原理:

image.png YYImage解析原始碼.png

SDImageWebPCoder總結:

  • 先把WebP所有幀都解析完,才渲染,解析時間比較長(13M的WebP,解析需要28s)\ -解析的時候,會佔用較高的CPU和記憶體(注意解析放到子執行緒)
  • 解析完成後,會釋放CPU和記憶體
  • 通過CoreGraphics繪製,減少快取的記憶體(13M的WebP,快取到記憶體中才佔用2M)

YYImage總結:

  • 每一幀解析完後馬上顯示,若每幀渲染時間>每幀的播放時間則會卡頓
  • 長期佔用CPU和記憶體,需要手動釋放(因為WebP動圖播放的時候,會不斷的解析每一幀)
  • 解析時間比較快(因為是一幀一幀的解析)

//基於SDImageWebPCoder佔用記憶體少和YYImage解析速度快的優點,總結載入方案如下:

  1. //SDImageWebPCoder在子執行緒對WebP解碼
  2. //在SDImageWebPCoder未解碼成功之前,使用YYImage載入WebP
  3. //在SDImageWebPCoder解碼成功後,快取到記憶體,直接使用SDImageWebPCoder解析後的UIImage