雷鋒網(wǎng)按：本文由掘金翻譯計劃譯者circlelove譯自《Shaving Our Image Size》校對者：rockzhai，ldhlfzysys。本文首發(fā)稀土掘金，未經(jīng)允許，禁止轉(zhuǎn)載。

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

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

一個主要的缺點是，我們的高保真度的產(chǎn)品圖片尺寸都很大。許多這些產(chǎn)品圖片是幾兆字節(jié)的大小，而我們的應(yīng)用程序有數(shù)百幅的圖像。

我們?yōu)橹_發(fā)了一個WebP視圖控件為iOS應(yīng)用來查看圖片。 你可以在GitHub找到它。

一個小的背景

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

消減尺寸

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

我們開始開發(fā)WebP的C程序源代碼作為框架（其實更像是Swift框架）。之后利用WebP C API耦合在一個Object-C的類當(dāng)中（一個Swift的版本是在工作中?。﹣韯?chuàng)建一個叫做WebPImage的類。之后用WebPImage更像是在利用標(biāo)準(zhǔn)UIImage類。主要的不同在于WebPImage是解決緩慢異步解碼WebP圖片數(shù)據(jù)的。它同時支持所有原生iOS格式，像PNG和JPEG，還有一些非標(biāo)準(zhǔn)的，例如動態(tài)GIF和WebP圖片數(shù)據(jù)，因為我們的app當(dāng)中也有驚艷的動態(tài)圖像。

之后我們創(chuàng)建了WebPImageView，也就是功能升級了的UIImageView。它提供遠(yuǎn)程緩存圖片和下載解碼進(jìn)度條的URL。這樣我們就可以用我們的WebPImageView替換所有的UIImageView，充分利用WebP格式的優(yōu)勢，進(jìn)行“網(wǎng)絡(luò)可用”的圖片查看。

結(jié)論

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

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。