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

背景

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

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

關(guān)于GIF格式

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

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

壓縮GIF的各種方法

1. 壓縮尺寸

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

2. 減色

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

3. 抽幀

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

4. 透明度存儲

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

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

透明度存儲方式是一種非常適合背景不是異形（即：沒有透明區(qū)域）的動圖存儲的方式，因為它幾乎不會影響到動圖本身的視覺效果和動效表現(xiàn)。

壓縮GIF的開源工具們

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

1. ImageMagick

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

可以將圖片合成為GIF，以及通過命令行對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是一個能夠?qū)崿F(xiàn)透明度存儲的命令行工具。

可以通過減少幀數(shù)、減少顏色、減小尺寸、默認(rèn)算法（透明度存儲）等方式壓縮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本身是一個可以記錄數(shù)字音頻和視頻的開源軟件。

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

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

4.  ezgif

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

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

結(jié)語

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