GIF 終極壓縮指南
新更：
我文章裡上傳的 GIF 圖有的太大知乎居然無法正常顯示，可我的圖片都是 <10M 的，如果你也點不開某些 GIF 圖，可以去站酷看這篇文章或者直接看視頻教程：
視頻教程（簡潔版）
http://www.icpchaxun.com/video/1166453000683409408
視頻教程（絮叨版）
正片
UI 設計師在作品包裝的時候，對於想展示動效交互的圖一般都非常大，因為大多數都需要對這張 GIF 進行排版設計，這所謂的排版設計 GIF 圖就是下面這種：
這是孔晨的站酷作品（http://www.zcool.com.cn/work/ZMzgxNDc4MDQ=.html）作品展示有很多的 GIF 包裝圖，逼格滿滿。
這種 GIF 圖對作品包裝的加持非常大，唬人杠杠的。不過這類圖都有一個特點，就是圖片分辨率大，通常又不能改，而文件大小又必須在 10M 以內（否則傳不到網站裡），實際上想做到這樣的 GIF 並沒有那麼簡單，其中的坑非常多，我就在網上尋找 GIF 壓縮的解決方案卻找不到靠譜的答案，所以我用瞭 2 天時間探索測試，總結出一套算是靠譜的方案分享出來（當然不是 PS 那種 low 爆的方案啦）。
前菜知識
1、對應場景
本文的教程隻針對大 GIF 輸出的壓縮，也就是說不改變 GIF 的尺寸是前提，所以涉及表情包壓縮那些不在本文考慮范圍內，不過因為表情包 GIF 圖不限制尺寸，要求更低，用本文的方法去壓縮表情包簡直輕松加愉快，其他各類不限制尺寸的 GIF 通通適用。
2、GIF 圖的要求
- GIF圖尺寸不能改，因為要和作品輸出尺寸統一
- GIF 大小必須 10M 以內，關於這一點國內外平臺都比較統一（知乎、站酷、Dribbble 都是 <10M 的要求）
- 流暢度第一，顏色輕度失真可以接受
3、☆☆影響 GIF 大小的 4 個核心要素☆☆
影響 GIF 大小的因素有不少，包括 PS 裡面那些可感知、圖案、顏色數量、WEB 色等等，或多或少都會影響 GIF 大小，但是，我這裡說的 3 個核心要素是影響比例最大的要素，比如 GIF 的顏色數量，其實顏色數量對 GIF 大小影響幅度不算很大，所以不在 3 要素之內。
- GIF 的分辨率尺寸（但本文由於用途不同所以不改尺寸是前提）
- GIF 時間 （一個 GIF 有多少秒，是最影響大小的要素瞭，所以當 GIF 大的時候砍時間比什麼來的都實惠）
- GIF 幀數（也叫 FPS，每秒多少幀，即每秒閃過多少張圖片，值越高 GIF 越絲滑流暢，視頻同理）
- GIF 像素顏色數量，這裡說的顏色數量不是 GIF 導出是選的 256，而是 GIF 圖片本身包含的顏色數量，或者說顏色復雜程度。
針對上面最後一條，像素顏色數量舉個例子：
4、GIF 的歷史和新動態圖技術（aPNG、WebP）簡介
嚴禁的技術資料我就不說瞭，這裡用大白話簡單介紹。GIF 是個很古老的技術，所以今天 9012 年瞭依然沒什麼改變，那麼老技術的限制就是圖片有毛邊、顏色又少、大小優化又很爛。而新的動態圖如：aPNG、webP，這 2 種都是可以動態顯示圖片，可惜的是新技術，各設備和瀏覽器支持程度不一樣，說人話就是技術不穩定不是個保守方案。而這 2 個格式在移動端卻又是二分天下，aPNG 是蘋果專用的，webP 是安卓專用的，也就是說移動端可以大膽的用這 2 種格式去實現動態圖，開發都知道這個；額外提的是這 2 種圖制作過程都是先生成 PNG 序列幀，然後通過工具（ Isparta ）去合成這 2 種格式。
5、為什麼不用 PS？
PS 有幾個坑點：
- PS 巨卡，這個點操作過 GIF 的人都知道
- PS 對視頻的編輯功能偏弱，且幀數最大限制 500 幀，想先導入再刪幀都沒機會
- GIF 導出調整參數容易緩存錯誤，關鍵錯誤彈窗之後無法導出，一切前功盡棄
- 沒有相對直接的調整質量的選項，每調一次都要重新渲染 GIF，有時候渲染結果都是相同的（實際出錯瞭）
開盤
這裡就按照作品包裝的流程來說，從零到 GIF 壓縮完整說一遍。
步驟一：靜態圖制作
就像文章開頭的示范圖片，你需要先把靜態不動的元素排好版，給會動的動效界面留個地方；大傢都是設計師我就跳過。
步驟二：錄屏
這一步就是要把你想展示的動效交互錄成視頻，大傢八仙過海各顯神通吧，但我這裡簡單說幾個方案：
- 大佬：動效交互直接在 AE 裡做，一頓操作行雲流水，導出視頻
- 普通人，在 Principle 等同類動效交互軟件裡做，然後用電腦錄屏或者投到手機裡錄屏，這種是大多數的方案
- Figma，最近 Figma 出瞭 Smart Animate 功能，在原來的原型交互基礎上又可以做一些過渡的微動效，香美至極
電腦端錄屏工具：
Windows 可以用來錄屏的工具
- MAC 用自帶的錄屏工具，Shift+CMD+5
- Win 其實沒什麼出名好用的錄屏，這裡推薦 OBS。註意：因為 WIN 大多數沒有人用 DPI 縮放功能，也就是說錄屏的 GIF 實際上像素很爛，所以大傢盡量在手機去錄屏。
步驟三：合成
這一步就是要把靜態圖和視頻融合到一起，下一步就做成視頻瞭，所以說這一步該剪輯的剪輯，該調色的調色。那麼現在就有 2 個選擇：
前面簡單總結過為什麼不用 PS，我這 2 天一直在研究 GIF 壓縮，花 PS 上的時間可不少，這裡就放棄 PS 瞭。而視頻剪輯軟件這裡優先推薦 AE，其實這一步的目的大傢要搞清楚，就是需要調顏色的調顏色，需要裁剪、加速、加東西的，總之就是要把所有編輯、調整的活兒在裡搞定，最後導出視頻再純粹的壓縮 GIF；所以視頻編輯軟件大傢用自己順手的即可，PRE 和 FCP 都可以。而我推薦用 AE 是因為能搞的效果很多，順便可以學學 AE 沒啥壞處，孔晨作品裡的動效多數都是 AE 做的（少部分是 Principle）。
☆☆劃重點☆☆
這一步其實很重要，因為錄的視頻可能很大，時間很長，都需要在這一步做裁剪，下面【AE 操作示例】會有示例介紹，這裡總結一下：
- GIF 時間盡量控制在 15 秒以內，超過也沒關系，最終看 GIF 導出大小能不能優化到 10M 以內
- 如果視頻太長有 2 個選擇：1）裁剪，刪除沒用的邊角料視頻，如操作間隙、掐頭去尾等等。2）加速，裁剪完以後，可以通過給視頻加速來達到縮短時間的目的（在我這篇教程裡可以看到大量被我加速的 GIF 圖）
- 幀率，有人會擔心視頻幀率影響 GIF 大小，實際上不會影響，一碼是一碼，GIF 的幀率是壓縮那一步設置的，所以我的視頻都是 60FPS
步驟四：AE 操作
1、導入素材，這裡隻是把素材放到 AE 裡，還沒有新建畫佈
5974d168b20ce03ebb1c5cf1e89cdadd
提示：如果蘋果導入AE 視頻出現錯誤 81::1 如圖，則通過 QuickTime - 導出 1080p 轉換一下就好（見 GIF 操作）。
2、靜態圖托到右側（見 GIF 圖示），這裡靜態圖就是我們 GIF 的真實尺寸，所以直接拖進去，視頻自動也是這個尺寸
3、視頻同上操作，也托進去，這時候把視頻按我們靜態圖設計的位置擺好即可，中間涉及到調整大小，先單擊視頻，然後拖拽邊角錨點即可，記得按著 shift 保持比例不變。
4、這時我覺得視頻太長，而且有很多邊角料沒用的視頻間隙可以刪掉，所以要做剪輯。AE 按快捷鍵 CMD+Shift+D，咔嚓一下，把視頻一分為二，這樣我們可以一級一級去裁剪，大傢自由發揮
5、裁剪完成後適當加速，開頭說過影響 GIF 大小的要素有時間，所以縮短時長是最實惠的壓縮方案，上面已經剪輯過一部分視頻，這裡再酌情來點加速；然後調整時間軸，這裡其實不用管素材多餘的長度，直接限定 AE 視頻長度即可，見圖理解一哈
6、合成步驟到此結束
步驟五：GIF 壓縮（2 套方案）
細心的人會註意到上面合成的步驟沒有導出視頻就結束瞭，這時候有 2 套壓縮方案選擇：
- Gifski（軟件）
- GIFGUN（AE 插件）
一定有人問哪個好，沒跑瞭。那我分開說一下：
Gifski
GIFGUN
這 2 個軟件我會交替使用，最便捷的當然是 Gifski，但單純從壓縮質量和效果來說，GIFGUN 比 Gifski 好一些，我測試過不少圖，GIFGUN 能壓縮的很小，當然也是因為 GIFGUN 的壓縮參數更多一些。
選擇方案 1：使用 AE 插件 GIFGUN 壓縮
1、安裝插件安裝方面我這裡不細說瞭，百度有很多，這裡貼一個 B 站 UP 主的視頻：http://www.bilibili.com/video/av51905975?from=search&seid=13263881613802650582
2、我們上一步做到合成瞭，這時候安裝完插件去窗口裡選擇即可
3、打開後界面非常簡單，我們選擇小齒輪進入設置界面，這裡常用的功能隻有【幀率】、【最大顏色】、【壓縮】，其他選項可以參考我的設置：
保存位置自己設一下幀率：幀率一般來說 20 左右，如圖圖片實在太大也可以設置 12，總之越小圖片就越小最大顏色：因為是 UI 作品的導出，所以顏色上最大 256，最小 128 是我能接受的范圍，顏色再少就沒意義瞭壓縮：這個功能非常給力，他比 PS 那些有的沒的來的更直接，圖片太大直接在裡有選檔位壓縮就行瞭，效果很明顯
這裡我要額外說的建議就是，如果 GIF 壓出來非常小，我們就可以反手把參數調滿，讓 GIF以最高質量展示，反正餘量還有很多；比如想我截圖裡的就是最高顯示質量，反正 10M 以內盡量的大就行瞭。
4、設置完後點保存，生成即可。生成 GIF 後我們檢查壓縮效果和大小，如果大小超過瞭就去上面參數裡慢慢往下調參數壓縮，自己搗鼓吧，這套方案到此結束。
選擇方案 2：使用 Gifski 壓縮
1、Gifski 就是把一個視頻導出成 GIF，安裝方法直接去蘋果商店搜索，或者官網（Mac 和 Win 都有）下載（http://gif.ski/）
2、這時我們回到合成那一步把 AE 裡編輯好的視頻導出
a23f8bf0b4401574ce72e96f2d4cb8cb
3、在蘋果系統中，AE 導出的視頻需要轉碼一下，否則其他軟件識別不瞭，操作如下：
4、把轉碼的視頻拖入到 Gifski 中，我們能看到簡單的參數
尺寸：尺寸一般不動，因為我們把一切都在 AE 裡做好瞭；但如果你隻是弄點表情包其他無所謂的 gif 圖，就可以把尺寸縮小來壓縮，這樣壓縮效果最好。
FPS:我一般保持 20 以上，也能影響 gif 大小，大傢多嘗試即可。
Quality：就是壓縮質量的意思，拉到最右邊就是不壓縮，反之就是壓縮；這其實是我要誇 Gifski 的地方，這裡就是簡單粗暴的讓你控制想壓縮多少比例，而 PS 裡那些參數讓人一看就懵還各種卡真是神經病。
PS：右下角那個大小是 GIF 壓縮的預估大小，是不準的，大傢無視就好。
5、點擊【Convert】壓縮，壓縮完就會有提示啦，我們先看大小是否符合 10M 以內，不符合就重新把視頻拖進去重新調參數壓縮；如果符合 10M 以內就點擊【save】保存，OK，齊活兒！
上面演示中，我壓縮後大於 10M，所以我不用保存，再次拖入視頻重新調參數並壓縮，剩下的就不演示瞭。
6、完事兒
補充
有個細節可能有人會問：文章開頭提到孔晨的 GIF 圖，Dribbble 和站酷都是限制 GIF <10m 的，為什麼他們的 Gif 看起來很絲滑順暢？
這裡解釋下，因為我直接用的 Figma 做的交互動效，也是直接錄的 Figma 演示稿，自己操作都有點卡卡的，更別說錄成視頻瞭，這個鍋應該 Figma 來背。所以如果追求絲滑交互動效的同學，要用 AE 或者 Principle 這種純動效軟件來做，這樣出來都是絲滑流暢的；關於這一點大傢可以直接去 Dribbble 找一些動效視頻用我的方法轉成 Gif 來對比流暢度，總之這套方案還是非常靠譜好用的。下面是我找到一段 Dribbble 視頻和我壓縮的 Gif 圖，大傢對比一下：
Dribbble 源視頻http://www.icpchaxun.com/video/1166430291236802560
2986726caacb4fe4485fe64e139cf27dGIF_1
GIF_2
技術總結
篇幅看似較長，其實都是圖片撐起來的，為瞭讓更多的人能看完並成功落地，難免會有囉嗦的地方，如果還不太明白的可以看本文的視頻版教程（http://www.bilibili.com/video/av70758707/?p=2）；其實真正的內容就是使用瞭 AE 插件 GIFGUN 和工具 Gifski 2 種方案。不同的是我探索這 2 個方案之前看瞭很多國內外 Gif 壓縮資料，也踩瞭很多坑，做瞭各種 GIF 壓縮測試，才篩選出來這 2 種比較靠譜的方案；最後，希望能幫到需要的人。
