熱評 Hero.喵

我自己簡單封裝了一下Windows平臺Gifsicle的最優算法(透明度存儲)程序,可以批量壓縮。打包分享,需要的可以自取哦。 鏈接:https://pan.baidu.com/s/1Mi_uA0OscC1BvVayqtviKA 提取碼:cgsp

本文主要介紹了羚瓏動圖產品側對壓縮GIF格式文件的探索,其中歸納了壓縮GIF的各種方法以及相關開源工具,可以為需要壓縮GIF文件的設計師提供幫助。

背景

說到動態圖片,大多數人的第一反應就是GIF格式。雖然支持動效的格式不止GIF,但GIF確實是目前編碼及解碼最簡單、支持工具最多、兼容性最強的動圖格式。

近年來,動態圖片也開始逐漸應用在電商廣告圖領域。羚瓏智能設計早在2018年底就上線了「動態Banner」功能,用戶可以在線制作并導出動圖。由于當時使用的開源包是FFmpeg,導出的GIF文件實在過大(基本>5M),因此只支持了導出MP4格式(基本<500K)。但MP4格式在動圖應用場景受到了最基礎的準入門檻限制:它們大多數都只能上傳GIF。比如今年京東app首焦廣告圖已經開始支持動圖——僅限GIF格式。因此為了拓展羚瓏動圖的場景應用,支持GIF的導出是必須的,關鍵點就在于如何壓縮GIF格式文件。

如何正確壓縮GIF格式文件?來看京東設計師的總結!

關于GIF格式

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

如何正確壓縮GIF格式文件?來看京東設計師的總結!

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

壓縮GIF的各種方法

1. 壓縮尺寸

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

2. 減色

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

如何正確壓縮GIF格式文件?來看京東設計師的總結!

3. 抽幀

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

如何正確壓縮GIF格式文件?來看京東設計師的總結!

如何正確壓縮GIF格式文件?來看京東設計師的總結!

4. 透明度存儲

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

如何正確壓縮GIF格式文件?來看京東設計師的總結!

使用imagemagick逐幀拆開來看,就會發現只有第一幀是完整的,后續的幀只儲存變化的像素部分:

如何正確壓縮GIF格式文件?來看京東設計師的總結!

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

壓縮GIF的開源工具們

經過一番研究之后,我發現其實目前對于壓縮GIF的技術已經相對成熟,并不需要從零去造輪子,利用以下這些開源工具可以實現對GIF壓縮處理。

1. ImageMagick

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

可以將圖片合成為GIF,以及通過命令行對GIF進行優化及壓縮(可能需進行參數修正)。例如-使用convert方法Optimize:
convert XXX.gif -fuzz 5% -layers Optimize YYY.gif

相關鏈接:ImageMagick中文站:http://www.imagemagick.com.cn/index.html

2. Gifsicle

Gifsicle是一個能夠實現透明度存儲的命令行工具。

可以通過減少幀數、減少顏色、減小尺寸、默認算法(透明度存儲)等方式壓縮GIF。

相關鏈接:Gifsicle GitHub:https://github.com/kohler/gifsicle
Gifsicle網站:http://www.lcdf.org/gifsicle/

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

3. FFmepg

FFmpeg本身是一個可以記錄數字音頻和視頻的開源軟件。

但FFmpeg也可以導出GIF,或者將Video轉換為GIF。FFmpeg導出的GIF可以通過以下方法來提高質量: 重新定義一個更好的調色板;使用paletteuse濾波器解決顏色映射與抖動。

相關鏈接:使用FFmpeg處理高質量GIF圖片:https://www.oschina.net/translate/high-quality-gif-with-ffmpeg

4.? ezgif

前三種開源工具都需要代碼環境,對設計師們可能不太友好,推薦一個封裝了以上各種工具、能夠在線使用的網站:https://ezgif.com/

ezgif是一個在線GIF制作編輯網站,可以實現制作GIF、將視頻轉GIF、或者使用各種方法對GIF進行優化和壓縮等功能。

如何正確壓縮GIF格式文件?來看京東設計師的總結!

結語

以上是作為產品側進行的GIF壓縮原理及方法的歸納探索。大部分羚瓏動圖背景和蒙版部分是靜態的,動態區域相對固定,因此我們重點嘗試了透明度存儲的方式,通過這個壓縮方法我們已經在測試中成功導出了較小的GIF文件(此處插入:給凹凸開發聚聚端茶.gif)。羚瓏動圖會在近期提供GIF文件導出的功能,敬請期待~

歡迎關注「JellyDesign」的小程序

如何正確壓縮GIF格式文件?來看京東設計師的總結!

參考文章

存在了30年的GIF會爆發還是消失? https://36kr.com/coop/toutiao/5056552.html

這樣壓縮GIF,體積小還效果好 https://sspai.com/post/42916

濃縮才是精華:淺析GIF格式圖片的存儲和壓縮 https://cloud.tencent.com/developer/article/1004763

收藏 357
點贊 38

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。