計(jì)育韜：新媒體（公眾號(hào)）端GIF動(dòng)態(tài)圖壓縮對(duì)抗與優(yōu)化的核心方法
日益嚴(yán)重的動(dòng)態(tài)圖壓縮情況
縱觀騰訊系的頂級(jí)、二級(jí)、三級(jí)域名，http://mp.weixin.qq.com（也就是公眾號(hào)生態(tài)域名）是一個(gè)業(yè)務(wù)端典型吃力不討好的存在——在 Alexa 全球網(wǎng)站流量統(tǒng)計(jì)關(guān)閉之前（2022 年），它就已經(jīng)是 qq 系下排名第三的域名，緊隨 QQ 視頻——但大多數(shù)運(yùn)營(yíng)人和品牌方，除了每年 300 塊的認(rèn)證費(fèi)實(shí)際上沒(méi)有向騰訊上繳過(guò)一毛的流量過(guò)路費(fèi)。而流量主生態(tài)和朋友圈廣告生態(tài)作為少數(shù)能為騰訊帶來(lái)盈利的能力，基本只是在補(bǔ)騰訊云自身的窟窿而已。
這時(shí)，拿流量本體開(kāi)刀已經(jīng)是相對(duì)溫和但有效的方法，由此動(dòng)輒若干 M 的 GIF 首當(dāng)其沖，每年都會(huì)被時(shí)不時(shí)地提升平臺(tái)端壓縮強(qiáng)度。由于騰訊圖床對(duì) GIF 的壓縮算法一直是黑箱的狀態(tài)，所以運(yùn)營(yíng)人在 GIF 圖設(shè)計(jì)工作中往往苦不堪言，僅有的紙面限制在于：
直接上傳不超過(guò) 10M，復(fù)制粘貼不超過(guò) 3M
不超過(guò) 300 幀
寬、高、幀乘積不超過(guò) 2 億
經(jīng)過(guò) 2023 年 5 月的公眾號(hào)平臺(tái)更新后，GIF 的最終呈現(xiàn)效果更「差」了，終端展示的 GIF 非常容易出現(xiàn)摩爾紋（也就是肉眼所見(jiàn) GIF 中出現(xiàn)顏色層層堆疊的效果。經(jīng)驗(yàn)比較匱乏的運(yùn)營(yíng)人只能通過(guò)與設(shè)計(jì)師協(xié)同，反復(fù)窮舉嘗試來(lái)解決畫質(zhì)問(wèn)題。所以，本期計(jì)老師將基于 GIF 壓縮算法本質(zhì)、壓縮策略和動(dòng)態(tài)轉(zhuǎn)化幾個(gè)方面來(lái)談。
使用恰當(dāng)?shù)墓ぞ?/strong>并采用合理的壓縮算法
站在專業(yè)角度，設(shè)計(jì)師采用 Adobe Photoshop 作為最終導(dǎo)出 GIF 格式無(wú)可厚非。但 PS 的 Web 輸出本身側(cè)重的并不是「壓縮」，因此我們往往會(huì)獲得一個(gè)體積過(guò)于龐大，無(wú)法上傳到公眾號(hào)或者上傳后被嚴(yán)重壓縮的結(jié)果。
那怎么辦呢？從流程上講，大多數(shù)基于視頻動(dòng)畫制作生成的 GIF 應(yīng)當(dāng)先遵循如下生產(chǎn)方式：
AE/C4D 等專業(yè)視頻工具輸出 .mov 格式
將 .mov 格式直接拖拽到 Adobe Photoshop 中，通過(guò)「存儲(chǔ)為 Web 所用格式」進(jìn)入 GIF 導(dǎo)出面板并導(dǎo)出
注意事項(xiàng)
看似簡(jiǎn)單的兩個(gè)步驟中，有幾個(gè)要點(diǎn)往往是新手設(shè)計(jì)師和運(yùn)營(yíng)人容易出錯(cuò)的：
可以制作帶有 Alpha 通道（透明）的動(dòng)態(tài)圖，但是不要制作半透明 GIF。不少品牌方平日在向我咨詢 GIF 設(shè)計(jì)問(wèn)題時(shí)，經(jīng)常給到一些如光暈等 GIF 特效，詢問(wèn)為何上傳到公眾號(hào)總有顆粒毛刺的感官——注意這不是公眾號(hào)的問(wèn)題，是 GIF 本身就已經(jīng)出錯(cuò)了。因?yàn)?GIF 格式的 Alpha 通道只有 0 和 1，不能存在半透明的 0-1 過(guò)渡。那么對(duì)于源文件所謂的半透明效果，GIF 就會(huì)通過(guò)像素點(diǎn)陣密度來(lái)模擬所謂「半透明」的效果——這是平面設(shè)計(jì)學(xué)的基本常識(shí)，設(shè)計(jì)師必須掌握。
GIF 默認(rèn)輸出時(shí)，在 PS 中是有「雜邊」選項(xiàng)（白色）的，所以如果你什么參數(shù)都不處理，直接導(dǎo)出一個(gè)透明的 GIF，哪怕沒(méi)有半透明部分的情況下，圖像周圍也會(huì)環(huán)繞一層白色的毛刺。
導(dǎo)出時(shí)可輸出為尺寸 640 寬或至少 1080 寬，而不是基于原畫面直接輸出——對(duì)于寬度過(guò)大的 GIF 公眾號(hào)平臺(tái)圖床會(huì)強(qiáng)制變更為 640 寬，那么與其等著被騰訊壓縮，不如自己充分預(yù)處理。
其他參數(shù)
其他參數(shù)在 PS 內(nèi)沒(méi)有特定要求，僅是一般來(lái)說(shuō)，「可感知」結(jié)合「圖案」最佳（但不絕對(duì)），再者畢竟我們之后會(huì)進(jìn)行第二輪壓縮工作，所以 PS 出圖在確保上述注意事項(xiàng)都準(zhǔn)確的前提下，實(shí)際畫質(zhì)愈佳愈好。這里另外強(qiáng)調(diào)一個(gè) GIF 自身屬性和靜態(tài)圖銜接的問(wèn)題：
GIF 至多有 256 種色彩，而一張 JPEG 廣域可以有 16777216 種色彩，所以視頻到 GIF 的過(guò)程中，色彩的損失是必然的，而非公眾號(hào)層面的問(wèn)題。在 PS 中，我們可以先選擇以色彩數(shù) 256 色進(jìn)行導(dǎo)出，以備后續(xù)壓縮使用。而對(duì)于和其他靜態(tài)切片的銜接，一般建議使用局部定位方法（如 e2.cool 黑科技 SVG 編輯器中 GIF 定位器）或者半透明靜態(tài)蒙版策略進(jìn)行無(wú)縫對(duì)接，對(duì)于前者設(shè)計(jì)師要以動(dòng)態(tài)局部為范圍導(dǎo)出 GIF，對(duì)于后者設(shè)計(jì)師要制作 GIF 上與靜態(tài)圖銜接處的靜態(tài)圖層蒙版，通過(guò)排版進(jìn)行疊加。
工具應(yīng)用與壓縮算法
以 MacOS 系統(tǒng)為例，計(jì)老師一直主推的是 GIF Brewery 軟件，它的可控參數(shù)多樣且輸出能力穩(wěn)定，并且支持多種 GIF 生成方式，其詳細(xì)的操作教學(xué)可以點(diǎn)擊閱讀《你為何總搞不定 GIF？》了解。
無(wú)論是科技品牌還是奢侈品，我在參與定制相關(guān)高級(jí) SVG 圖文時(shí)都主要采用它進(jìn)行 GIF 的壓縮優(yōu)化。在該軟件中，首先建議將尺寸最終鎖定到 640 寬，如果體積仍然超過(guò) 10M 的話我們甚至可以選擇更激進(jìn)一些的 500 寬等。加之對(duì)幀數(shù)的控制（默認(rèn) 20 幀），這兩個(gè)參數(shù)已經(jīng)在很大程度上決定了 GIF 的輸出體積。
該軟件和 PS 一樣也可以設(shè)置 GIF 是循環(huán)還是一次/多次播放，這里也提醒部分新手運(yùn)營(yíng)人 GIF 的循環(huán)/非循環(huán)播放屬性是 PS 或 GIF 制作軟件內(nèi)直接設(shè)置的，和 SVG 或者其他排版技術(shù)無(wú)關(guān)。
而關(guān)于該軟件的局部色彩算法，我們這里參考簡(jiǎn)書作者劉板栗同學(xué)的實(shí)驗(yàn)結(jié)果：
就我個(gè)人而言，最偏好于 Ordered 選項(xiàng)。軟件的「畫質(zhì)增強(qiáng)」功能可選可不選，實(shí)際體驗(yàn)差異不大。
關(guān)于 Windows，則同樣可以閱讀《你為何總搞不定 GIF？》查看對(duì)應(yīng)軟件的教學(xué)。
壓縮策略
工具的使用方法是一回事，而工具的使用策略是另一回事。下面我來(lái)談?wù)剮讉€(gè)關(guān)鍵的 GIF 圖壓縮的意識(shí)問(wèn)題。
在相同畫質(zhì)下 GIF 越小一定越好
有些運(yùn)營(yíng)人存在比較病態(tài)的 GIF 制作策略，頂著公眾號(hào) 10M 的上限認(rèn)為約接近 10M 體積的 GIF 就越好。但仔細(xì)想一下，如果每張 GIF 動(dòng)輒 10M，那么一篇圖文整體可能就消耗掉近百 M 的流量——大多數(shù)情況下你在其他 APP 中觀看一個(gè)短視頻都不需要加載如此多的信息。
所以過(guò)大的 GIF 會(huì)直接導(dǎo)致圖文訪問(wèn)速度極慢，打開(kāi)圖文時(shí)刻可能會(huì)有長(zhǎng)久的白屏。正確的策略在于，確保畫質(zhì)相同或接近的前提下，GIF 越小越好。我們觀察以 GIF 設(shè)計(jì)著稱的如喜茶等公眾號(hào)的圖片素材，其動(dòng)態(tài)圖一般只有幾百 KB 而已卻能表現(xiàn)出極佳的視覺(jué)張力，這在本質(zhì)上還是運(yùn)營(yíng)團(tuán)隊(duì)的綜合水平問(wèn)題。
黑底或純色底 GIF 往往壓縮表現(xiàn)更佳
尤其對(duì)于科技類品牌，黑底+產(chǎn)品圖動(dòng)畫是非常好的 GIF 設(shè)計(jì)方向，它們的輸出體積往往更小，而且你可以設(shè)置更少的色彩數(shù)但依然確保畫質(zhì)體驗(yàn)。這里參考計(jì)老師和華為合作的 SVG 圖文案例《創(chuàng)視紀(jì)IV丨一張圖看懂2023新品陣容》，該文中的 GIF 數(shù)量爆表，但表現(xiàn)都非常優(yōu)異。
利用 PS 三次優(yōu)化
有時(shí)候（尤其透明 GIF 導(dǎo)出）你可能會(huì)遇到一類比較特殊的問(wèn)題——已經(jīng)導(dǎo)出完畢的 GIF 再上傳到公眾號(hào)素材庫(kù)中，色彩發(fā)生比較嚴(yán)重的失真——這時(shí)候，可以利用 PS 再次回滾 GIF 文件，使用 Web 格式三次導(dǎo)出。
減小渲染的非必要面積
很多圖像中的動(dòng)畫實(shí)際上只牽涉小局部，這個(gè)時(shí)候設(shè)計(jì)師不要偷懶整體輸出，這既不利于無(wú)縫圖的銜接又影響了動(dòng)態(tài)部分的實(shí)際畫質(zhì)。在前面我們已經(jīng)提到過(guò)，可以通過(guò) GIF 定位器這類 SVG 模版通過(guò)排版進(jìn)行組合。
無(wú)法復(fù)制入公眾號(hào)？
前面已經(jīng)提到，10M 的上限是直接在素材庫(kù)上傳的上限，直接 Ctrl CV 復(fù)制無(wú)法超過(guò) 3M。所以壓縮后如果的 GIF 超過(guò)了 3M，那么建議使用替換法在圖文內(nèi)改動(dòng)圖片地址，具體可以閱讀《黑科技編輯器 | 替換圖片教程》。
動(dòng)態(tài)轉(zhuǎn)化
不是任何動(dòng)畫都非要基于 GIF 展示，公眾號(hào)生態(tài)內(nèi)豐富的 SVG 動(dòng)畫能力可以實(shí)現(xiàn)很多對(duì)動(dòng)態(tài)呈現(xiàn)的極大優(yōu)化。
動(dòng)靜分離
結(jié)合前面「減小渲染的非必要面積」，我們可以通過(guò)定位，或零高結(jié)構(gòu)（height: 0;）疊加思路進(jìn)行設(shè)計(jì)上的動(dòng)靜分離和排版時(shí)的動(dòng)靜組合。
混合模式
以 Apple 公眾號(hào)的《準(zhǔn)備好，本篇內(nèi)容可能引起極度舒適。》為例，光線與游戲畫面時(shí)則為兩個(gè)部分：
活用 SVG 模版
業(yè)態(tài)中目前主流的各大 SVG 編輯器（如 E2.COOL、135、秀米）等都有數(shù)量龐大的 SVG 自動(dòng)/被動(dòng)動(dòng)畫預(yù)置模板，思路的小小變化和簡(jiǎn)單的創(chuàng)意疊加，原先需要 GIF 完成的效果大多可以通過(guò)代碼轉(zhuǎn)化實(shí)現(xiàn)，這里可以閱讀如 E2.COOL 黑科技 SVG 編輯器的介紹《你好，這里是 E2 編輯器（E2.COOL）》。
-END-
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）