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

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

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

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

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

一個(gè)小的背景

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

消減尺寸

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

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

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

結(jié)論

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

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