七牛云圖片處理實踐之GIF｜如何解決GIF流量爆炸問題？
摘要：圖像的格式豐富多彩，既有使用最多的JPEG、PNG、BMP、GIF，也有Google開發(fā)的適用于Web的WebP，更有蘋果推出的Live Photo。不管是PC端還是移動端，圖片一直是流量的大頭。在移動互聯(lián)網(wǎng)爆發(fā)的讀圖時代，如何保證在圖片質(zhì)量不降低的前提下減少圖片開發(fā)成本，成為一個值得探索的事兒。在此，七牛云全新策劃圖片處理系列實踐，探尋云服務(wù)之上的圖片之路。
眾所周知，GIF圖片是其在一個GIF文件中可以存多幅彩色圖像，把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就構(gòu)成了一種最簡單的動畫。這些閃爍的動圖，總是讓人忍不住多看兩眼，最常見的如動態(tài)表情，但GIF圖片最主要的還是被應(yīng)用于娛樂、圖片分享類應(yīng)用中，在七牛的客戶中，堆糖、橘子娛樂經(jīng)常使用。此外，為了吸引用戶的注意力，醒目的GIF動畫很好地補充了營銷信息，使得各媒體、自媒體、企業(yè)營銷在其上頻頻加碼創(chuàng)意，積極地做了很多在內(nèi)容中使用GIF的實踐及策略探索。
如日前科技媒體TECH2IPO(創(chuàng)見)的一篇名為《15位機器人在完成任務(wù)時的有趣失誤》的文章火了，該文主要講述了一些機器人囿于技術(shù)與環(huán)境做出的種種憨態(tài)可掬的動作。除文字外，為了讓內(nèi)容生動有趣，還為每一位可愛的機器人配了動圖(GIF動圖)。
文中，15位機器人擁有15個錯誤，也就使用了15張GIF進行表現(xiàn)，但這些動圖占用了高達139MB的流量，而這篇文章的最終點擊超過10萬次，消耗了9TB以上的CDN流量，雖然訪問速度杠桿的，但卻為此付出人民幣3500元。
GIF圖片大小相對于普通的JPEG、PNG圖片更大，訪問時也更耗費流量。在得知TECH2IPO/創(chuàng)見的處境后，小七迅速為其送出“七牛GIF縮略圖”解決方案，以解燃眉之急。
據(jù)TECH2IPO/創(chuàng)見統(tǒng)計，上述文章有60%的點擊來自移動端，并且僅有10%是在無WiFi的環(huán)境下進行閱讀的。事實上，移動端主要以小屏幕為主，而受“移動端”和“小屏幕”兩個因素的限制，圖片的縮略常使用于移動端圖片的顯示。一方面，移動端會消耗3G或4G流量，流量的節(jié)約非常重要，因此當(dāng)移動端App中包含大量GIF圖片時就需要對其進行縮略。另一方面，移動端端會要求圖片迅速加載出來，如果GIF單張圖片比較大，就會影響加載的速度和看圖的效果，此時也需要對圖片進行縮略處理。
為此，七牛在圖片縮略處理方面提供imageView2接口，由于移動端屏幕眾多，該接口支持生成各種規(guī)格以適應(yīng)不同屏幕的縮略圖，在所支持的各種圖片格式中，便包含gif，此外還支持psd、jpeg、png、webp、tiff、bmp等多種格式。通過該接口，可大大減少圖片文件大小，節(jié)省流量的同時也省掉大半的流量費用。
為了證明imageView2接口處理GIF圖片省流量省成本的可靠性，小七特意找來gif動圖一張，并上傳到七牛存儲空間進行驗證。
以下為所找gif原圖，大小為4MB：
使用imageView2生成不同縮略圖，并得如下結(jié)果：
使用imageView2接口不同的操作模式可生成不同縮率的GIF動圖，指定寬高和原圖寬高縮率的比例和流量、CDN費用成正比，在不影響用戶體驗的前提下對GIF動圖進行不同程度的縮略。經(jīng)過此次測試，小七所選擇的本張圖片縮率為75%時，在手機端、PC端顯示也比較清晰。可見，TECH2IPO/創(chuàng)見使用imageView2進行處理從而大大減少CDN流量費用將不是問題。
在此，小七詳細介紹一下imageView2的接口的使用方法。
imageView2接口規(guī)格如下：
imageView2/
如imageView2/0/w/
使用者將GIF動態(tài)圖片上傳至七牛對象存儲平臺后，只需在該圖片訪問資源鏈接修改以上
更多使用詳情可參考“七牛API參考手冊”，除本文所提到的GIF縮略處理外，還包括圖文混排水印、自定義裁剪、旋轉(zhuǎn)、效果處理(高斯模糊)、格式轉(zhuǎn)換、原圖保護、防盜鏈等貼心的接口可供使用。對于GIF動圖，同樣也能對其進行以上其它的圖片處理操作。
七牛API參考手冊：
http://developer.qiniu.com/docs/v6/api/reference/fop/image/imageview2.htm
