用PS十倍無損壓縮GIF動效圖

我很少寫工具教程，這次是因為被GIF壓縮（準確的說的微信公眾號平台的GIF尺寸要求）折磨慘了，所以特別想要分享一下自己是如何將《手機端表格設計》里的第二張動效圖從原本的7.5M，在尺寸不變、保證畫質的情況下壓縮至0.76M的。

我嘗試了很多一鍵壓縮工具後，發現要麼尺寸達不到，要麼畫質下降太多，最後發現壓縮這種動效圖還是PhotoShop最靠譜。壓縮GIF不外乎從四個方面著手：損耗、尺寸、幀數和顏色。前兩個大家使用一鍵壓縮工具時都有接觸，這裡主要從幀數和顏色著手進行高度無損壓縮。

註：由於知乎平台限制，本文上傳的所有圖片的寬度都是不是原圖的750像素，而是540像素，所以佔用空間與文章描述的不相符。如果你想要確認圖片大小是否準確，可以去這裡查看原圖。

壓縮前，寬度720像素、佔用空間7.5MB：

壓縮後，圖片尺寸不變，佔用空間0.76M（774KB）：

幀數壓縮

拿到原始的GIF，用PS打開後，我建議第一件事情是打開「窗口>時間軸」查看它的幀數。

GIF動畫是由一張一張的圖片切換構成的，對直接錄製的GIF而言，有多長的動畫就有多少幀。

通常的一鍵壓縮方式會將GIF里所有幀等同的無差別壓縮，這要很容易丟失關鍵信息。而用PS進行手動壓縮時，我們就可以利用自己對動畫的了解，進行有差別的壓縮，去掉無用信息，保留有用信息。

刪除相同幀

你會發現大部分動效圖前後都會有一段時間的靜止畫面，這些靜止畫面當然是有用的，但是我們不需要那麼多一模一樣的幀畫面重複幾十個來達到。

例如範例圖片的開頭靜止畫面有85幀。他們既然沒有差別，那麼保留一幀就好。刪去前面多餘的84幀。這對於原本四百多幀的動畫而言，這個分量還是有感的。

但是開頭的靜止還是有用的啊，如何讓第一幀停留更長的時間呢？非常簡單，點擊幀方塊右下角的箭頭，從下拉框中選擇延遲時間。結尾相同幀也可以用這種方法去掉。

通常來說，前後各延遲0.5秒是差不多的。但是因為我這個GIF先後是連貫的（第一幀和最後一幀的畫面是相同的，循環時沒有畫面突變），所以我去掉了結尾幀，把開頭幀延遲了1秒。

如果你願意花時間的話，動畫中間也有一些大量重複幀是可以用類似的方法去掉的。例如滑鼠指針移動到按鈕上，然後點擊，這過程中指針肯定會有一定停頓，也能造成十幾二十個相同幀。

去除相同幀之後，原來四百多幀的動畫輕輕鬆鬆被攔腰截到兩百多幀，而且看起來與原來的GIF沒有任何區別。你甚至還能夠通過修改幀延遲時間來調整動畫節奏。

動畫加速

前面提到過，一般一個動畫的長度和幀數是相對應的，所以加快動畫速度、減少動畫時長，對壓縮GIF的效果也是很不錯的。

尤其如果是錄製的動效圖，整體的速度是很有可能需要提高的。例如錄製過程中，滑鼠指針從一個按鈕移動到另一個按鈕的過程中，可能因為思考、找地方甚至卡滑鼠的原因導致速度過慢。

Ezgif提供了Speed功能可以通過設定百分比來一鍵加速。使用PS的話，要做到這一點會稍微麻煩一點。例如你可以選擇所有編號為「X0」和「XX0」的幀進行批量刪除。這樣一次就能刪除10%的幀數。雖然效率不是特別高，但是可能夠順便調整一下對整個動畫的節奏（可以著重刪減想要提速的一小段），也是不錯的。

處理完幀數後，原本的453幀減少到195幀，佔用空間從7.5M縮小到2.2M。下圖就是這一步達到的效果，畫質和尺寸並未收到絲毫影響：

顏色壓縮

我不建議過早對GIF對尺寸進行處理，所以我們先來看看如何壓縮顏色。

在PS里選擇「儲存為 Web 所用格式」，你就會看到一個這樣對窗口：

不同於JPG格式，GIF動畫有一張固定的顏色表，圖片中對所有顏色都會限制在這張表裡。那如果需要表上沒有相近都顏色會怎樣呢？例如下面這張小圖看起來還好，但是放大後會發現明顯的仿色效果：

動效GIF的一點特殊之處是它需要的顏色很少，例如本文範例中的關鍵顏色只不過黑、白、紫罷了，頭像里雖然有很豐富的顏色，但是那麼小的區域就算有一定失真也不會影響整體效果。

自動刪減顏色

首先，你可以先大膽地把256個顏色減少到16個（需要注意的是，最好選擇「擴散透明度仿色」，這樣能夠在色彩很少的情況下畫面質量好一點）：

你會發現圖片看起來並沒有太糟糕，頭像的失真在動畫中很容易被忽略。相比之下，佔用空間卻從2.066M減小到了935.7K（約等於0.91M，窗口左下角可以看到預估大小）。

手動刪減顏色

即便只剩下16個顏色了，其實還有壓縮空間。仔細看一下顏色表，你會發現有那麼幾個顏色看起來非常相似，對普通人來說其實很難分辨。

嘗試著刪除看上去相似的顏色，但是注意一定要保留關鍵色，例如黑色、白色、紫色、頭像里人臉的棕色。

再看看窗口左下角的占空空間，又減小了一兩百K！如果你覺得顏色還原度不高，可以調高仿色的百分比（我選的是0%），但是這樣可能會增加一百來K。

壓縮完顏色之後，圖片尺寸沒有變化，畫質沒有損耗，只是局部顏色產生偏差。佔用空間從2.2M縮小到了774K（即0.75M）。

尺寸

現在GIF已經壓到了原來的10%，你再獲取想要的尺寸就容易多了。例如你把寬度改成480像素後，佔用空間就減小到四百多K了，相對之前的7.5M，這幾乎只剩5%了。壓到這種程度，已經遠小於普通的靜態圖了。

註：由於知乎平台限制，本文上傳的所有圖片的寬度都是不是原圖的750像素，而是540像素，所以佔用空間與文章描述的不相符。如果你想要確認圖片大小是否準確，可以去這裡查看原圖。

——

未經允許請勿轉載