怎樣幫應用圖片瘦身？這個方法很管用

雷鋒網按：本文由掘金翻譯計劃譯者circlelove譯自《Shaving Our Image Size》校對者：rockzhai，ldhlfzysys。本文首發稀土掘金，未經允許，禁止轉載。

圖片是我們給用戶展示產品的利器。老話說的好，「一圖勝千言！」圖像往往能表達出語言所不能及的含義。當然，由于移動設備帶寬和資源限制，圖片也帶來了一系列突出的技術挑戰。

我們在DSC上面臨的技術挑戰就是產品圖像對于透明alpha通道的需求。我們已經在app上采用了美麗的仿木背景，此外還需要采用帶有透明alpha通道的格式。最常見的iOS系統圖片格式是PNG格式。PNG格式看上去很不錯，加載也快，支持原生iOS。

一個主要的缺點是，我們的高保真度的產品圖片尺寸都很大。許多這些產品圖片是幾兆字節的大小，而我們的應用程序有數百幅的圖像。

我們為之開發了一個WebP視圖控件為iOS應用來查看圖片。 你可以在GitHub找到它。

一個小的背景

我們在提交APP到應用商店和在應用商店下載APP的時候都需要上傳或下載這些大量的PNG格式的大圖。這些顯示的是不同的方案。一個需要我們在展示之前解壓，另一個可能需要我們通過慢吞吞的網絡去下載幾百兆資源圖片。 我們最終決定為我們第一個發行版選擇壓縮的方式。當然，這省下了大量帶寬，卻依然讓這款APP安裝后的大小高達230MB。 幸運的是，這個故事并沒有結束，我們還能夠減小圖片的尺寸。

消減尺寸

我們需要一個支持透明alpha通道而且比PNG小的圖片格式。偶然發現了Google的WebP。經過我們的測試顯示WebP格式化的圖片僅有原來PNG參考版本的十分之一大小，他們也同樣支持透明alpha通道。這樣就在下載和緩存新圖片的時候省下來帶寬和磁盤空間。其主要的不足在于WebP圖片需要更長的解碼，而iOS原生系統并不支持這種格式。我們感覺圖片大小的減少值得花更長時間解碼，于是致力于為iOS構建一個WebP圖片查看器。

我們開始開發WebP的C程序源代碼作為框架（其實更像是Swift框架）。之后利用WebP C API耦合在一個Object-C的類當中（一個Swift的版本是在工作中！）來創建一個叫做WebPImage的類。之后用WebPImage更像是在利用標準UIImage類。主要的不同在于WebPImage是解決緩慢異步解碼WebP圖片數據的。它同時支持所有原生iOS格式，像PNG和JPEG，還有一些非標準的，例如動態GIF和WebP圖片數據，因為我們的app當中也有驚艷的動態圖像。

之后我們創建了WebPImageView，也就是功能升級了的UIImageView。它提供遠程緩存圖片和下載解碼進度條的URL。這樣我們就可以用我們的WebPImageView替換所有的UIImageView，充分利用WebP格式的優勢，進行“網絡可用”的圖片查看。

結論

截至文章寫作時，我們可以將首次發行的app從230MB減小到僅有30MB，里面還包含了更多的圖片。這樣的結果使得利用WebP格式壓縮了七倍以上的尺寸 。這需要我們復制和提交一些iOS已有的UI組件并創建PNG轉換為WebP展開的進程，但是我們相信結果說明了我們努力的一切。我們可以為iOS用戶提供良好的體驗，既滿足他們的數據計劃，又尊重了他們的存儲需求。Dollar Shave Club，減小圖片來減小世界。

雷峰網原創文章，未經授權禁止轉載。詳情見轉載須知。