為什麼GIFs還存在

Graphics Interchange格式是由CompuServe于1987年[CompuServe, 1987]建立. 它支持動畫、透明以及無損壓縮。 每帧限256种顏色. 它沒有音效 它會產生大檔案 數十年前就該被取代了.

Discord、Slack、iMessage、Twitter、Reddit、電子郵件都支持GIFs。 GIPHY每天服務超過100億GIF[GIPHY, 2020]. 格式一直存在, 因為它無處不在工作, 不需要編解碼器, 並自動播放 。 沒有其他格式有通用支援和零軟體回放的組合 .

瞭解GIFs如何在三維之外发挥作用, 它解釋了為什麼您的出口 GIF 是 4MB, 為甚麼梯度看起來是帶子.

第1步:框架抓取

動畫 GIF 是影像的序列( frames) , 以於每個影像之間延遲 。 要從畫布動畫中建立一個, 你需要定期捕捉畫布狀態 .

在瀏覽器中, 這意味著從 HTML QQ0Q 元素中讀取像素數據, 動畫提前到目標時間,畫布被傳達,像素被俘. 按鍵限制 : 您必須在讀取像素前等待瀏覽器的畫面周期( requestAnimationFrame), 否則您會捕捉到一個 stale 缓冲区 .

15個FPS的典型GIF需要3秒的45帧捕捉. 在 1080×1080 分辨率下,每帧像素约为 470萬像素.

第2步:彩色量化

GIF 支持最大每帧256种顏色, 保存在彩色表( palette) 。 典型的畫布框有上千種不同的顏色 降低到256而不明显降解是GIF编码中最困难的部分.

標準方法為中間剪切算法 [Heckbert, 1982] : 用最紅的通道排序所有像素, 按中位值分割列表, 重复為綠色和藍色, 每個區域的平均值會變成調色板項目 這是 gif.js ── 圖書庫 PinePaper 使用的── Web Workers 中的相對性工具 [Rubaxa, gif.js] .

GIFs對平面顏色圖像處理得很好, 跨 1080 像素的梯度可能會使用 500+ 不同的顏色 。 壓縮到256會產生可见的 band帶.

你可以做什么 # 在您的設計中使用更少的顏色 。 平 平 的 形 狀 、 固 實 的 填 滿 、 文 文 文 也 分 明 平滑的梯度和照片的纹理不一樣 如果你的 GIF 有帶子, 簡化調色板而不是解析度 .

第3步: LZW 壓縮

每帧的像素索引(參考到256色調色板)使用Lempel-Ziv-Welch(LZW)压缩 [Welch, 1984]. LZW 在掃描資料時建立重复字节序列的字典 。 當它遇到它之前看到的序列時, 它會輸出字典索引而不是原始字節 .

這表示GIF壓縮在有大片重复顏色的地方最有效——固態背景,平面形状,文字在统一的表面. 具有像素等級變化的复杂纹理會造成壓縮率差, 因為 LZW 字典很少找到重复的序列 .

实际含义: 黑色背景的白文本 1080x1080 GIF 可能會壓縮到 200KB 。 複雜相片的同樣解析度GIF可能是8MB. 檔案大小比起解析度或框架計數, 更依赖于視覺複雜度 .

第4步:框架处置和优化

GIF 框架可以指定一個處理方法: 是在畫下一個框架之前清除畫布, 留下前一個框架的視覺, 還是還原到 背景。 Smart GIF 編碼器使用frame differentencing——只編碼在框架之間變化的像素,而不是整帧.

如果您的動畫有小移動元素的靜態背景, 最佳的 GIF 將背景編碼一次, 只更新元素移動的區域 。 這會大大減少檔案大小 。 PinePaper 的編碼器使用自動应用此优化的 gif.js .

數字

典型的 PinePaper 動畫 (1080×1080, 15 FPS, 3秒, 暗背景與動畫文字):

构成部分	大小
原始框架( 45 × 4. 7M 像素 × 3 位元組)	~634 MB
量化( 256 色, 1 字節/ 像素)	~211 MB
LZW 壓縮後	~2-4 MB
框架不同	~1-2 MB

從生到決的壓縮比约为300:1至600:1。 其中大多出自色素量化(3:1)和LZW(50:1至100:1).

何时使用 GIF 對其它格式

格式	最好的	限制
GIF 中	通用支援、 自動播放、 訊息應用程式	256 顏色, 大檔案, 沒有音效
WebM (VP9)	最佳、最小的檔案、網頁	Safari, iMessage 的支持有限
MP4 (H.264)	社交媒體、影片播放器	需要解碼器, 不透明
APNG( APNG )	透明全彩動畫	舊瀏覽器的支援有限

GIF 在需要通用兼容性和自動播放時是正確的選擇 。 对于質量或檔案大小, WebM 或 MP4 更好 .

試試看

開啟 [PinePaper Studio] (XX0Q) , 建立設計, 並匯出為 GIF 。 觀察您的檔案大小變更 :

• 增加帧數( 更多帧數 = 更大的檔案, 成比例)
• 新增梯度( power quantization = 大檔案)
• 使用固體顏色( 好量化 = 小檔案)
• 增加畫布大小( 每帧多像素 = 大檔案)

每個變化都是對壓縮管道的測量 你不只是在做GIF—— 你在觀察資訊理論如何适用于你的設計.

參考

• CompuServe(1987年)。 第87a版.
• GIPHY (2020). 《GIPHY年報》,《每日10億份服務》.
• Heckbert, P. (1982年). 框架缓冲顯示的顏色影像量化 。 * 電腦圖像 (SIGGRAPH)*, 16(3), 297-307 .
• Rubaxa. gif.js – JavaScript GIF 使用Web Workers的編碼器. github.com/jnordberg/ gif.js.
• Welch, T.A. (1984年)。 高性能數據壓縮技術.

---

PinePaper的 GIF 匯出是自由的——沒有水印,沒有簽名. 開啟 [pinepaper. studio/ editor] (\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.