摘要：圖像的格式豐富多彩，既有使用最多的JPEG、PNG、BMP、GIF，也有Google開(kāi)發(fā)的適用于Web的WebP，更有蘋(píng)果推出的Live Photo。不管是PC端還是移動(dòng)端，圖片一直是流量的大頭。在移動(dòng)互聯(lián)網(wǎng)爆發(fā)的讀圖時(shí)代，如何保證在圖片質(zhì)量不降低的前提下減少圖片開(kāi)發(fā)成本，成為一個(gè)值得探索的事兒。在此，七牛云全新策劃圖片處理系列實(shí)踐，探尋云服務(wù)之上的圖片之路。

眾所周知，GIF圖片是其在一個(gè)GIF文件中可以存多幅彩色圖像，把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就構(gòu)成了一種最簡(jiǎn)單的動(dòng)畫(huà)。這些閃爍的動(dòng)圖，總是讓人忍不住多看兩眼，最常見(jiàn)的如動(dòng)態(tài)表情，但GIF圖片最主要的還是被應(yīng)用于娛樂(lè)、圖片分享類(lèi)應(yīng)用中，在七牛的客戶(hù)中，堆糖、橘子娛樂(lè)經(jīng)常使用。此外，為了吸引用戶(hù)的注意力，醒目的GIF動(dòng)畫(huà)很好地補(bǔ)充了營(yíng)銷(xiāo)信息，使得各媒體、自媒體、企業(yè)營(yíng)銷(xiāo)在其上頻頻加碼創(chuàng)意，積極地做了很多在內(nèi)容中使用GIF的實(shí)踐及策略探索。

如日前科技媒體TECH2IPO(創(chuàng)見(jiàn))的一篇名為《15位機(jī)器人在完成任務(wù)時(shí)的有趣失誤》的文章火了，該文主要講述了一些機(jī)器人囿于技術(shù)與環(huán)境做出的種種憨態(tài)可掬的動(dòng)作。除文字外，為了讓內(nèi)容生動(dòng)有趣，還為每一位可愛(ài)的機(jī)器人配了動(dòng)圖(GIF動(dòng)圖)。

文中，15位機(jī)器人擁有15個(gè)錯(cuò)誤，也就使用了15張GIF進(jìn)行表現(xiàn)，但這些動(dòng)圖占用了高達(dá)139MB的流量，而這篇文章的最終點(diǎn)擊超過(guò)10萬(wàn)次，消耗了9TB以上的CDN流量，雖然訪(fǎng)問(wèn)速度杠桿的，但卻為此付出人民幣3500元。

GIF圖片大小相對(duì)于普通的JPEG、PNG圖片更大，訪(fǎng)問(wèn)時(shí)也更耗費(fèi)流量。在得知TECH2IPO/創(chuàng)見(jiàn)的處境后，小七迅速為其送出“七牛GIF縮略圖”解決方案，以解燃眉之急。

據(jù)TECH2IPO/創(chuàng)見(jiàn)統(tǒng)計(jì)，上述文章有60%的點(diǎn)擊來(lái)自移動(dòng)端，并且僅有10%是在無(wú)WiFi的環(huán)境下進(jìn)行閱讀的。事實(shí)上，移動(dòng)端主要以小屏幕為主，而受“移動(dòng)端”和“小屏幕”兩個(gè)因素的限制，圖片的縮略常使用于移動(dòng)端圖片的顯示。一方面，移動(dòng)端會(huì)消耗3G或4G流量，流量的節(jié)約非常重要，因此當(dāng)移動(dòng)端App中包含大量GIF圖片時(shí)就需要對(duì)其進(jìn)行縮略。另一方面，移動(dòng)端端會(huì)要求圖片迅速加載出來(lái)，如果GIF單張圖片比較大，就會(huì)影響加載的速度和看圖的效果，此時(shí)也需要對(duì)圖片進(jìn)行縮略處理。

為此，七牛在圖片縮略處理方面提供imageView2接口，由于移動(dòng)端屏幕眾多，該接口支持生成各種規(guī)格以適應(yīng)不同屏幕的縮略圖，在所支持的各種圖片格式中，便包含gif，此外還支持psd、jpeg、png、webp、tiff、bmp等多種格式。通過(guò)該接口，可大大減少圖片文件大小，節(jié)省流量的同時(shí)也省掉大半的流量費(fèi)用。

為了證明imageView2接口處理GIF圖片省流量省成本的可靠性，小七特意找來(lái)gif動(dòng)圖一張，并上傳到七牛存儲(chǔ)空間進(jìn)行驗(yàn)證。

以下為所找gif原圖，大小為4MB：

使用imageView2生成不同縮略圖，并得如下結(jié)果：

使用imageView2接口不同的操作模式可生成不同縮率的GIF動(dòng)圖，指定寬高和原圖寬高縮率的比例和流量、CDN費(fèi)用成正比，在不影響用戶(hù)體驗(yàn)的前提下對(duì)GIF動(dòng)圖進(jìn)行不同程度的縮略。經(jīng)過(guò)此次測(cè)試，小七所選擇的本張圖片縮率為75%時(shí)，在手機(jī)端、PC端顯示也比較清晰?？梢?jiàn)，TECH2IPO/創(chuàng)見(jiàn)使用imageView2進(jìn)行處理從而大大減少CDN流量費(fèi)用將不是問(wèn)題。

在此，小七詳細(xì)介紹一下imageView2的接口的使用方法。

imageView2接口規(guī)格如下：

imageView2//w//h//format/  /interlace//q/

如imageView2/0/w//h/，指限定縮略圖長(zhǎng)邊最多為，短邊最多為，進(jìn)行等比縮放，不裁剪。如果只指定w參數(shù)則表示限定長(zhǎng)邊(短邊自適應(yīng))，只指定h參數(shù)則表示限定短邊(長(zhǎng)邊自適應(yīng))。使用該imageView2接口是在訪(fǎng)問(wèn)圖片資源的時(shí)侯進(jìn)行同步壓縮，客戶(hù)端訪(fǎng)問(wèn)到的資源就是被壓縮后的資源。

使用者將GIF動(dòng)態(tài)圖片上傳至七牛對(duì)象存儲(chǔ)平臺(tái)后，只需在該圖片訪(fǎng)問(wèn)資源鏈接修改以上及參數(shù)即可獲得縮略結(jié)果。參數(shù)設(shè)置主要以客戶(hù)端設(shè)備的分辨率大小有關(guān)，一般設(shè)計(jì)頁(yè)面的前端開(kāi)發(fā)可以對(duì)此做出簡(jiǎn)單的規(guī)劃，譬如手機(jī)端以寬高300x300的大小，PC端是500x500，而通過(guò)不同的參數(shù)設(shè)置，是可獲得任意大小的縮略圖結(jié)果的。

更多使用詳情可參考“七牛API參考手冊(cè)”，除本文所提到的GIF縮略處理外，還包括圖文混排水印、自定義裁剪、旋轉(zhuǎn)、效果處理(高斯模糊)、格式轉(zhuǎn)換、原圖保護(hù)、防盜鏈等貼心的接口可供使用。對(duì)于GIF動(dòng)圖，同樣也能對(duì)其進(jìn)行以上其它的圖片處理操作。

七牛API參考手冊(cè)：

http://developer.qiniu.com/docs/v6/api/reference/fop/image/imageview2.htm