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

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

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

文中，15位機器人擁有15個錯誤，也就使用了15張GIF進行表現，但這些動圖占用了高達139MB的流量，而這篇文章的最終點擊超過10萬次，消耗了9TB以上的CDN流量，雖然訪問速度杠桿的，但卻為此付出人民幣3500元。

GIF圖片大小相對于普通的JPEG、PNG圖片更大，訪問時也更耗費流量。在得知TECH2IPO/創見的處境后，小七迅速為其送出“七牛GIF縮略圖”解決方案，以解燃眉之急。

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

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

為了證明imageView2接口處理GIF圖片省流量省成本的可靠性，小七特意找來gif動圖一張，并上傳到七牛存儲空間進行驗證。

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

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

使用imageView2接口不同的操作模式可生成不同縮率的GIF動圖，指定寬高和原圖寬高縮率的比例和流量、CDN費用成正比，在不影響用戶體驗的前提下對GIF動圖進行不同程度的縮略。經過此次測試，小七所選擇的本張圖片縮率為75%時，在手機端、PC端顯示也比較清晰。可見，TECH2IPO/創見使用imageView2進行處理從而大大減少CDN流量費用將不是問題。

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

imageView2接口規格如下：

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

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

使用者將GIF動態圖片上傳至七牛對象存儲平臺后，只需在該圖片訪問資源鏈接修改以上及參數即可獲得縮略結果。參數設置主要以客戶端設備的分辨率大小有關，一般設計頁面的前端開發可以對此做出簡單的規劃，譬如手機端以寬高300x300的大小，PC端是500x500，而通過不同的參數設置，是可獲得任意大小的縮略圖結果的。

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

七牛API參考手冊：

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