本文主要介紹了壓縮GIF格式文件的探索，其中歸納了壓縮GIF的各種方法以及相關(guān)開(kāi)源工具，可以為需要壓縮GIF文件的設(shè)計(jì)師提供幫助。

背景

說(shuō)到動(dòng)態(tài)圖片，大多數(shù)人的第一反應(yīng)就是GIF格式。雖然支持動(dòng)效的格式不止GIF，但GIF確實(shí)是目前編碼及解碼最簡(jiǎn)單、支持工具最多、兼容性最強(qiáng)的動(dòng)圖格式。

近年來(lái)，動(dòng)態(tài)圖片也開(kāi)始逐漸應(yīng)用在電商廣告圖領(lǐng)域。羚瓏智能設(shè)計(jì)早在2018年底就上線了「動(dòng)態(tài)Banner」功能，用戶可以在線制作并導(dǎo)出動(dòng)圖。由于當(dāng)時(shí)使用的開(kāi)源包是FFmpeg，導(dǎo)出的GIF文件實(shí)在過(guò)大（基本>5M），因此只支持了導(dǎo)出MP4格式（基本<500K）。但MP4格式在動(dòng)圖應(yīng)用場(chǎng)景受到了最基礎(chǔ)的準(zhǔn)入門檻限制：它們大多數(shù)都只能上傳GIF。比如今年京東app首焦廣告圖已經(jīng)開(kāi)始支持動(dòng)圖——僅限GIF格式。因此支持GIF的導(dǎo)出是必須的，關(guān)鍵點(diǎn)就在于如何壓縮GIF格式文件。

關(guān)于GIF格式

要壓縮GIF，那么首先我們要先了解GIF是怎么存儲(chǔ)的。GIF的全稱是Graphics Interchange Format，是在1987年由Compu Serve公司開(kāi)發(fā)的一種位圖圖像格式?？赡芤?yàn)殚_(kāi)發(fā)年代比較早，GIF的位深只有8位，最多只能支持256色。PC顯示器通常支持的真彩色指24位，數(shù)量高達(dá)1677萬(wàn)多色。設(shè)計(jì)師在導(dǎo)出GIF的時(shí)候，經(jīng)常會(huì)碰到顏色失真的情況，比如下面這兩張圖是同一個(gè)設(shè)計(jì)文件導(dǎo)出的MP4格式和GIF格式的畫(huà)面質(zhì)量對(duì)比，可以看到GIF截圖噪點(diǎn)比較明顯，尤其是手機(jī)壁紙漸變那部分，這樣的失真實(shí)際就是GIF格式本身支持顏色豐富度不夠?qū)е碌摹?/p>

我們還可以發(fā)現(xiàn)這張圖上的GIF畫(huà)面質(zhì)量已經(jīng)是比MP4低了，但文件大小卻是MP4的4倍多，這還是在我已經(jīng)對(duì)這個(gè)GIF做了壓縮處理的情況下。因?yàn)镚IF存儲(chǔ)采用的壓縮算法是Lempel-Zev-Welch（LZW），一種無(wú)損壓縮方式，壓縮時(shí)圖像數(shù)據(jù)不會(huì)減少。因?yàn)橐粠粠鎯?chǔ)所以圖片，一個(gè)高清效果的10秒GIF大約需要60MB存儲(chǔ)空間，而同樣質(zhì)量的MP4格式僅僅只需3MB（這也是羚瓏動(dòng)圖在初期只支持導(dǎo)出MP4格式的原因）。但GIF使用量大的主要原因就是易用性很高，在許多瀏覽器和軟件中可以無(wú)需解碼直接播放。因此即使后來(lái)出現(xiàn)了APNG和WebP等動(dòng)態(tài)圖片格式，GIF仍然占據(jù)主流未被取代。

壓縮GIF的各種方法

1. 壓縮尺寸

GIF跟一般的靜態(tài)圖片一樣，文件大小受尺寸大小影響，尺寸越大的GIF文件越大。壓縮尺寸可以有效降低GIF的文件大小。但是電商中的廣告圖坑位一般對(duì)尺寸的要求都比較嚴(yán)格，比如通天塔中的移動(dòng)端圖片熱區(qū)組件就要求只能上傳寬度=1125px且高度>60px的圖片。在一些尺寸要求不那么嚴(yán)格的應(yīng)用場(chǎng)景，我們可以考慮為用戶提供不同尺寸規(guī)格的GIF下載來(lái)滿足不同文件大小的需求。

2. 減色

GIF是連續(xù)動(dòng)態(tài)圖片，每一幀之間的信息差異小，因此顏色是可以復(fù)用的。通常GIF會(huì)在文件頭儲(chǔ)存全局調(diào)色盤(pán)，包含全部幀會(huì)使用到的所有顏色，在播放時(shí)通過(guò)調(diào)用調(diào)色盤(pán)顏色進(jìn)行渲染。GIF的顏色越豐富，需要儲(chǔ)存的顏色信息就越多，文件也會(huì)越大。設(shè)計(jì)師們使用PS導(dǎo)出GIF時(shí)看到的顏色表就是GIF文件頭存儲(chǔ)的全局調(diào)色盤(pán)。減少調(diào)色盤(pán)的顏色可以增大GIF的文件壓縮率。但GIF本身就只能存256色已經(jīng)很少了，減色對(duì)GIF圖像效果影響比較大，有可能會(huì)造成GIF噪點(diǎn)更加明顯。因此使用減色對(duì)GIF進(jìn)行壓縮有較高風(fēng)險(xiǎn)。而且減色壓縮的效率也比較低，減去一半顏色可能只能壓縮10%左右。

3. 抽幀

幀率指GIF每秒鐘依次播放的圖片數(shù)量，比如：24幀/秒指這張GIF在1秒鐘內(nèi)播放了24張圖片，幀率越高GIF的動(dòng)效會(huì)越流暢，但需要儲(chǔ)存的圖片也會(huì)更多，文件會(huì)直線增大。一個(gè)3秒GIF，幀率為24幀/秒，那么就要儲(chǔ)存72張圖片；但如果通過(guò)抽幀，將幀率降到12幀/秒，那只要儲(chǔ)存36張圖片就可以了。不過(guò)抽幀就像翻頁(yè)動(dòng)畫(huà)書(shū)被抽掉間隔頁(yè)一樣，會(huì)直接影響動(dòng)效流暢度，所以如果通過(guò)抽幀來(lái)壓縮的話要讓用戶保存前先預(yù)覽，自行把控具體的效果。同時(shí)，由于減少幀數(shù)，每張圖片延遲的時(shí)間參數(shù)不變的話會(huì)導(dǎo)致圖片播放過(guò)快的情況，需要開(kāi)發(fā)側(cè)進(jìn)行延時(shí)減緩處理。下面兩張動(dòng)圖，上面是原圖，下面是抽幀處理后沒(méi)有做延時(shí)處理的圖，對(duì)比來(lái)看，下圖明顯丟失了一些動(dòng)效細(xì)節(jié)，比如商品的緩動(dòng)效果。

4. 透明度存儲(chǔ)

這種壓縮方式是只完整保留GIF的第一幀，排除后續(xù)幀沒(méi)有變化的部分，只存儲(chǔ)有變化的像素，避免存儲(chǔ)重復(fù)的信息。如果圖片本身具有較大的靜態(tài)區(qū)域，這種儲(chǔ)存方式也許可以有效減小文件大小。比如這個(gè)豬豬吃糖.gif：

使用imagemagick逐幀拆開(kāi)來(lái)看，就會(huì)發(fā)現(xiàn)只有第一幀是完整的，后續(xù)的幀只儲(chǔ)存變化的像素部分：

透明度存儲(chǔ)方式是一種非常適合背景不是異形（即：沒(méi)有透明區(qū)域）的動(dòng)圖存儲(chǔ)的方式，因?yàn)樗鼛缀醪粫?huì)影響到動(dòng)圖本身的視覺(jué)效果和動(dòng)效表現(xiàn)。

壓縮GIF的開(kāi)源工具們

經(jīng)過(guò)一番研究之后，我發(fā)現(xiàn)其實(shí)目前對(duì)于壓縮GIF的技術(shù)已經(jīng)相對(duì)成熟，并不需要從零去造輪子，利用以下這些開(kāi)源工具可以實(shí)現(xiàn)對(duì)GIF壓縮處理。

1. ImageMagick

ImageMagick是一個(gè)能夠讀取和寫(xiě)入各種格式圖像并對(duì)其進(jìn)行編輯和處理的軟件。

可以將圖片合成為GIF，以及通過(guò)命令行對(duì)GIF進(jìn)行優(yōu)化及壓縮（可能需進(jìn)行參數(shù)修正）。例如-使用convert方法Optimize：
convert XXX.gif -fuzz 5% -layers Optimize YYY.gif

相關(guān)鏈接：ImageMagick中文站：http://www.imagemagick.com.cn/index.html

2. Gifsicle

Gifsicle是一個(gè)能夠?qū)崿F(xiàn)透明度存儲(chǔ)的命令行工具。

可以通過(guò)減少幀數(shù)、減少顏色、減小尺寸、默認(rèn)算法（透明度存儲(chǔ)）等方式壓縮GIF。

相關(guān)鏈接：Gifsicle GitHub：https://github.com/kohler/gifsicle
Gifsicle網(wǎng)站：http://www.lcdf.org/gifsicle/

基于Gifsicle有損壓縮Gif：https://kornel.ski/lossygif

3. FFmepg

FFmpeg本身是一個(gè)可以記錄數(shù)字音頻和視頻的開(kāi)源軟件。

但FFmpeg也可以導(dǎo)出GIF，或者將Video轉(zhuǎn)換為GIF。FFmpeg導(dǎo)出的GIF可以通過(guò)以下方法來(lái)提高質(zhì)量： 重新定義一個(gè)更好的調(diào)色板；使用paletteuse濾波器解決顏色映射與抖動(dòng)。

相關(guān)鏈接：使用FFmpeg處理高質(zhì)量GIF圖片：https://www.oschina.net/translate/high-quality-gif-with-ffmpeg

4.  ezgif

前三種開(kāi)源工具都需要代碼環(huán)境，對(duì)設(shè)計(jì)師們可能不太友好，推薦一個(gè)封裝了以上各種工具、能夠在線使用的網(wǎng)站：https://ezgif.com/

ezgif是一個(gè)在線GIF制作編輯網(wǎng)站，可以實(shí)現(xiàn)制作GIF、將視頻轉(zhuǎn)GIF、或者使用各種方法對(duì)GIF進(jìn)行優(yōu)化和壓縮等功能。

結(jié)語(yǔ)

以上是作為產(chǎn)品側(cè)進(jìn)行的GIF壓縮原理及方法的歸納探索。大部分羚瓏動(dòng)圖背景和蒙版部分是靜態(tài)的，動(dòng)態(tài)區(qū)域相對(duì)固定，因此我們重點(diǎn)嘗試了透明度存儲(chǔ)的方式，通過(guò)這個(gè)壓縮方法我們已經(jīng)在測(cè)試中成功導(dǎo)出了較小的GIF文件。