為什麼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 <canvas> 元素的像素資料 通常通过 canvas.toDataURL() 或 ctx.getImageData(). 動畫提前到目標時間,畫布被傳達,像素被俘. 按鍵限制: 在讀取像素前, 您必須等待瀏覽器的畫面周期( requestAnimationFrame), 否則您會捕捉到一個 stale 缓冲器 .

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

第2步:彩色量化

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

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

GIFs對平面顏色圖像處理得很好. 跨 1080 像素的梯度可能會使用 500+ 不同的顏色 . 壓縮到256 產生可见的帶子.. 梯度要平滑的离散階段 .

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

第3步: LZW 壓縮

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

這表示GIF壓縮效果最好 坚实的背景,平坦的形狀,文字放在统一的表面. 具有像素等級變化的复杂纹理會造成壓縮率差, 因為 LZW 字典很少找到重复的序列 .

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

第4步:框架处置和优化

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

如果您的動畫有小移動元素的靜態背景, 最佳的 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).

點擊四階段. 酒吧的大小比不上生的大小 線性比例,所以到最後兩個階段,它就是一條毛線.. 那不是 推斷錯誤,那是300:1的樣子.

何时使用 GIF 對其它格式

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

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

試試看

開啟 [PinePaper Studio] (/editor), 建立設計, 以 GIF 匯出 . 觀察您的檔案大小變更 :

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

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

參考

• CompuServe(1987年). 第87a版.
• GIPHY (2020). 《GIPHY年報》,《每日10億份服務》.
• (原始内容存档于2018-09-13). Heckbert, P. (1982年). 框架缓冲顯示的顏色影像量化 . * 计算机图形(SIGGRAPH)*,16(3),297-307.
• 魯巴莎. gif.js - JavaScript GIF 使用Web Workers編碼器. github.com/jnordberg/ gif.js.
• 韋爾奇 T. A. (1984). 高性能數據壓縮技術. IEEE電腦,17(6),8-19.

---

PinePaper的 GIF 匯出是自由的.. 沒有水印,沒有簽名. 開啟 [pinepaper. studio/ editor] (/editor) 并匯出您的第一部動畫 .