日益嚴重的動態(tài)圖壓縮情況

縱觀騰訊系的頂級、二級、三級域名，http://mp.weixin.qq.com（也就是公眾號生態(tài)域名）是一個業(yè)務端典型吃力不討好的存在——在 Alexa 全球網站流量統(tǒng)計關閉之前（2022 年），它就已經是 qq 系下排名第三的域名，緊隨 QQ 視頻——但大多數運營人和品牌方，除了每年 300 塊的認證費實際上沒有向騰訊上繳過一毛的流量過路費。而流量主生態(tài)和朋友圈廣告生態(tài)作為少數能為騰訊帶來盈利的能力，基本只是在補騰訊云自身的窟窿而已。

這時候，拿流量本體開刀已經是相對溫和但有效的方法，由此動輒若干 M 的 GIF 首當其沖，每年都會被時不時地提升平臺端壓縮強度。由于騰訊圖床對 GIF 的壓縮算法一直是黑箱的狀態(tài)，所以運營人在 GIF 圖設計工作中往往苦不堪言，僅有的紙面限制在于：

1. 直接上傳不超過 10M，復制黏貼不超過 3M

2. 不超過 300 幀

3. 寬、高、幀乘積不超過 2 億

經過 2023 年 5 月的公眾號平臺更新后，GIF 的最終呈現效果更「差」了，終端展示的 GIF 非常容易出現摩爾紋（也就是肉眼所見 GIF 中出現顏色層層堆疊的效果）。經驗比較匱乏的運營人只能通過與設計師協同，反復窮舉嘗試來解決畫質問題。所以，本期計老師將基于?GIF 壓縮算法本質、壓縮策略和動態(tài)轉化幾個方面來談。

使用恰當的工具并采用合理的壓縮算法

站在專業(yè)角度，設計師采用 Adobe Photoshop 作為最終導出 GIF 格式無可厚非。但 PS 的 Web 輸出本身側重的并不是「壓縮」，因此我們往往會獲得一個體積過于龐大，無法上傳到公眾號或者上傳后被嚴重壓縮的結果。

那怎么辦呢？從流程上講，大多數基于視頻動畫制作生成的 GIF 應當先遵循如下生產方式：

1. AE/C4D 等專業(yè)視頻工具輸出 .mov 格式

2. 將 .mov 格式直接拖拽到 Adobe Photoshop 中，通過「存儲為 Web 所用格式」進入 GIF 導出面板并導出

注意事項

看似簡單的兩個步驟中，有幾個要點往往是新手設計師和運營人容易出錯的：

1. 可以制作帶有 Alpha 通道（透明）的動態(tài)圖，但是不要制作半透明 GIF。不少品牌方平日在向我咨詢 GIF 設計問題時，經常給到一些如光暈等 GIF 特效，詢問為何上傳到公眾號總有顆粒毛刺的感官——注意這不是公眾號的問題，是 GIF 本身就已經出錯了。因為 GIF 格式的 Alpha 通道只有 0 和 1，不能存在半透明的 0-1 過渡。那么對于源文件所謂的半透明效果，GIF 就會通過像素點陣密度來模擬所謂「半透明」的效果——這是平面設計學的基本常識，設計師必須掌握。

2. GIF 默認輸出時，在 PS 中是有「雜邊」選項（白色）的，所以如果你什么參數都不處理，直接導出一個透明的 GIF，哪怕沒有半透明部分的情況下，圖像周圍也會環(huán)繞一層白色的毛刺。

3. 導出時可輸出為尺寸 640 寬或至少 1080 寬，而不是基于原畫面直接輸出——對于寬度過大的 GIF 公眾號平臺圖床會強制變更為 640 寬，那么與其等著被騰訊壓縮，不如自己充分預處理。

其他參數

其他參數在 PS 內沒有特定要求，僅是一般來說，「可感知」結合「圖案」最佳（但不絕對），再者畢竟我們之后會進行第二輪壓縮工作，所以 PS 出圖在確保上述注意事項都準確的前提下，實際畫質愈佳愈好。這里另外強調一個 GIF 自身屬性和靜態(tài)圖銜接的問題：

GIF 至多有 256 種色彩，而一張 JPEG 廣域可以有 16777216 種色彩，所以視頻到 GIF 的過程中，色彩的損失是必然的，而非公眾號層面的問題。在 PS 中，我們可以先選擇以最大色彩數 256 色進行導出，以備后續(xù)壓縮使用。而對于和其他靜態(tài)切片的銜接，一般建議使用局部定位方法（如?e2.cool?黑科技 SVG 編輯器中 GIF 定位器）或者半透明靜態(tài)蒙版策略進行無縫對接，對于前者設計師要以動態(tài)局部為范圍倒出 GIF，對于后者設計師要制作 GIF 上與靜態(tài)圖銜接處的靜態(tài)圖層蒙版，通過排版進行疊加。

工具應用與壓縮算法

以 MacOS 系統(tǒng)為例，計老師一直主推的是 GIF Brewery 軟件，它的可控參數多樣且輸出能力穩(wěn)定，并且支持多種 GIF 生成方式，其詳細的操作教學可以點擊閱讀《你為何總搞不定 GIF？》了解。

無論是科技品牌還是奢侈品，我在參與定制相關高級 SVG 圖文時都主要采用它進行 GIF 的壓縮優(yōu)化。在該軟件中，首先建議將尺寸最終鎖定到 640 寬，如果體積仍然超過 10M 的話我們甚至可以選擇更激進一些的 500 寬等。加之對幀數的控制（默認 20 幀），這兩個參數已經在很大程度上決定了 GIF 的輸出體積。

該軟件和 PS 一樣也可以設置 GIF 是循環(huán)還是一次/多次播放，這里也提醒部分新手運營人?GIF 的循環(huán)/非循環(huán)播放屬性是 PS 或 GIF 制作軟件內直接設置的，和 SVG 或者其他排版技術無關。

而關于該軟件的局部色彩算法，我們這里參考簡書作者劉板栗同學的實驗結果：

就我個人而言，最偏好于 Ordered 選項。軟件的「畫質增強」功能可選可不選，實際體驗差異不大。

關于 Windows，則同樣可以閱讀《你為何總搞不定 GIF？》查看對應軟件的教學。

壓縮策略

工具的使用方法是一回事，而工具的使用策略是另一回事。下面我來談談幾個關鍵的 GIF 圖壓縮的意識問題。

在相同畫質下 GIF 越小一定越好

有些運營人存在比較病態(tài)的 GIF 制作策略，頂著公眾號 10M 的上限認為約接近 10M 體積的 GIF 就越好。但仔細想一下，如果每張 GIF 動輒 10M，那么一篇圖文整體可能就消耗掉近百 M 的流量——大多數情況下你在其他 APP 中觀看一個短視頻都不需要加載如此多的信息。

所以過大的 GIF 會直接導致圖文訪問速度極慢，打開圖文時刻可能會有長久的白屏。正確的策略在于，確保畫質相同或接近的前提下，GIF 越小越好。我們觀察以 GIF 設計著稱的如喜茶等公眾號的圖片素材，其動態(tài)圖一般只有幾百 KB 而已卻能表現出極佳的視覺張力，這在本質上還是運營團隊的綜合水平問題。

黑底或純色底 GIF 往往壓縮表現更佳

尤其對于科技類品牌，黑底+產品圖動畫是非常好的 GIF 設計方向，它們的輸出體積往往更小，而且你可以設置更少的色彩數但依然確保畫質體驗。這里參考計老師和華為合作的 SVG 圖文案例《創(chuàng)視紀IV丨一張圖看懂2023新品陣容》，該文中的 GIF 數量爆表，但表現都非常優(yōu)異。

利用 PS 三次優(yōu)化

有時候（尤其透明 GIF 導出）你可能會遇到一類比較特殊的問題——已經導出完畢的 GIF 再上傳到公眾號素材庫中，色彩發(fā)生比較嚴重的失真——這時候，可以利用 PS 再次回滾 GIF 文件，使用 Web 格式三次導出。

減小渲染的非必要面積

很多圖像中的動畫實際上只牽涉小局部，這個時候設計師不要偷懶整體輸出，這既不利于無縫圖的銜接又影響了動態(tài)部分的實際畫質。在前面我們已經提到過，可以通過 GIF 定位器這類 SVG 模版通過排版進行組合。

無法復制入公眾號？

前面已經提到，10M 的上限是直接在素材庫上傳的上限，直接 Ctrl CV 復制無法超過 3M。所以壓縮后如果的 GIF 超過了 3M，那么建議使用替換法在圖文內改動圖片地址，具體可以閱讀《黑科技編輯器 | 替換圖片教程》。

動態(tài)轉化

不是任何動畫都非要基于 GIF 展示，公眾號生態(tài)內豐富的 SVG 動畫能力可以實現很多對動態(tài)呈現的極大優(yōu)化。

動靜分離

結合前面「減小渲染的非必要面積」，我們可以通過定位，或零高（height: 0;）疊加思路進行設計上的動靜分離和排版時的動靜組合。

混合模式

以 Apple 公眾號的《準備好，本篇內容可能引起極度舒適?！窞槔?，光線與游戲畫面時則為兩個部分：

活用 SVG 模版

業(yè)態(tài)中目前主流的各大 SVG 編輯器（如 E2.COOL、135、秀米）等都有數量龐大的 SVG 自動/被動動畫預置模板，思路的小小變化和簡單的創(chuàng)意疊加，原先需要 GIF 完成的效果大多可以通過代碼轉化實現，這里可以閱讀如?E2.COOL?黑科技 SVG 編輯器的介紹《你好，這里是 E2 編輯器（E2.COOL）》。

未來業(yè)內如果有新的 GIF 壓縮政策變動和對應方法，我會再于本文進行更新，如果你有其他壓縮和優(yōu)化 GIF 的巧妙方法，也可以在留言區(qū)評論。

計育韜

微信官方 SVG AttributeName 白名單開發(fā)者
上海市信息化青年人才協會會員
上海市知識分子聯誼會會員
復旦大學奇點新媒體研究中心導師

著有：
設計學圖書《Prezi 完全解讀：從入門到精通》
傳播學圖書《硬核運營：技術流新媒體養(yǎng)成》