若要在 Photoshop 中最佳化 GIF,請開啟動畫,選擇 File > Export > Save for Web (Legacy),將格式設為 GIF,把 Colors 清單調低至 128 或 64,視需要微調 Lossy 滑桿,然後儲存。這個單一流程是用桌面編輯器壓縮動態 GIF 最可靠的方式,原因是 GIF 是以調色盤為基礎的格式,每幀的色彩數量才是決定檔案大小的主導槓桿。基於瀏覽器的 GIF Optimizer 採用同樣的槓桿——以 256、128 或 64 色的調色盤重新編碼每一個可見幀——但整個解碼、量化與編碼流程都在你的分頁中執行。瀏覽器的路徑完全跳過 Save for Web,免除 Photoshop 的授權需求,並顯示真實的前後位元組數,而不是隱藏可能出現的檔案變大問題。兩種方法都會保留幀順序與每幀延遲,並且當全幀重新編碼取代原本有效的局部幀修補時,兩者都可能讓已緊密最佳化的來源檔案反而變大。正確的選擇取決於你需要的是 Photoshop 細部控制,還是可在任何機器上執行的快速、無上傳流程。

how to optimize gif in photoshop
如何在 Photoshop 中最佳化 GIF(瀏覽器捷徑)

「最佳化」GIF 實際上代表什麼

GIF 並非原始點陣圖;它是由調色盤表格與索引像素組成的串流,有時還會搭配只繪製變動矩形的局部幀更新。由於色彩數量、幀處置方式與更新區域都會影響位元組串流,最佳化本質上是一組刻意的小規模取捨。最常見的槓桿是每幀的調色盤大小:表格中的每個色彩都會佔用位元組,而 64 色的幀通常比 256 色的幀索引得更有效率。其他槓桿包括失真壓縮、幀處置調整、抖動策略,以及移除重複幀——這些都不是放諸四海皆準的勝利。任何 optimizer 的目的,包括 Photoshop 的 Save for Web 對話框以及基於瀏覽器的 GIF Optimizer,都是讓你能改變其中一個或多個槓桿,並判斷該取捨是否值得用於該特定動畫。

如何在 Photoshop 中最佳化 GIF

請依照下列步驟在 Photoshop 中以較小的調色盤與失真壓縮重新輸出動態 GIF。這與 Adobe 為動態 GIF 輸出所記載的流程相同。

  1. 使用 File > Open 開啟動態 GIF,或將檔案拖曳到 Photoshop 工作區。若 Timeline 面板隱藏,請從 Window > Timeline 開啟,以便確認幀數以及動畫是否完整。
  2. 選擇 File > Export > Save for Web (Legacy)。Legacy 對話框仍是目前 Photoshop 版本中最直接的 GIF 匯出方式,並可在單一面板上顯示調色盤、失真、抖動與循環控制項。
  3. 在右上角的格式下拉選單中選擇 GIF。預覽會重新整理,並在左下角顯示目前的動態預覽。
  4. 開啟 Colors 下拉選單,將其從 256 調低至 128 或 64。對於扁平插圖與 UI 動畫,128 通常是安全的起點;對於已經高度壓縮的來源 GIF,你可能需要 64 才能看到實質的縮小效果。
  5. 選擇性步驟:將 Lossy 滑桿拖到一個小數值,通常是 5 到 15。小的失真值可讓編碼器合併近乎相同的色彩,通常能在不產生明顯視覺差異的情況下縮小檔案。
  6. 確認 Looping Options 下拉選單設定為 Forever(如果你希望匯出的 GIF 持續循環播放)。Photoshop 預設會比對來源的循環次數,但對網頁發佈而言,持續循環通常較為安全。
  7. 點擊 Save,選擇目的檔案名稱,然後等待 Photoshop 編碼新的 GIF 串流。

這是 Adobe 官方用於動態 GIF 的流程,符合 Adobe 為 Legacy 對話框所發佈的 Save for Web (Legacy) 指引。File > Export > Export As 並未提供相同的全部色彩、失真與抖動控制項,因此這是多數指南推薦使用 Save for Web (Legacy) 的原因。

為何需要基於瀏覽器的 GIF Optimizer

Photoshop 的 Save for Web 功能強大,但它需要付費的桌面授權、完整的專案往返流程,以及合適的作業系統。對於一次性的 GIF 壓縮——尤其是檔案存放在工作筆電、平板或沒有 Photoshop 的共用機器上——這些負擔是真實存在的。基於瀏覽器的 GIF Optimizer 將相同的調色盤縮減邏輯搬到你的目前分頁裡執行。根據該工具的契約,GIF 會以標準的瀏覽器 canvas API 進行解碼,每個可見幀都會被合成到一個完整的邏輯畫布上,每個輸出幀都會被量化為你所選的 256、128 或 64 色彩色盤,並在本地端編碼出新的 GIF——沒有上傳、不需要帳號、沒有伺服器佇列。接著頁面會顯示原始位元組數與新位元組數,這是評估取捨是否值得的唯一誠實方式。此流程對應到底層瀏覽器 API,記載於 CanvasRenderingContext2D.getImageData(用於像素存取)以及 Blob(用於本地下載)。如果你已經使用 Photoshop 進行影像編輯,並希望對這些壓縮概念獲得更深入的視覺拆解,在 Photoshop 中壓縮影像或在你的瀏覽器中即時壓縮這篇指南會並列示範兩種路徑。

如何使用 GIF Optimizer 在本地端最佳化 GIF

作為 Photoshop 流程的免安裝替代方案,GIF Optimizer 會在你的瀏覽器中以明確的調色盤控制重建 GIF,並回報真實的位元組變化。

  1. 從本機磁碟挑選一個大小上限為 20 MB 的動態 GIF,畫布任一邊不得超過 4,096 像素,每幀像素數不得超過三百萬,影像幀數不得超過 50。瀏覽器會以 Blob 形式讀取它,絕不會將其傳送到伺服器。
  2. 選擇 256、128 或 64 色的調色盤大小。這是該工具唯一開放的壓縮槓桿,並對應到 Photoshop 的 Colors 下拉選單。
  3. 點擊 Optimize GIF。頁面會解碼每個可見幀,將任何局部幀修補合成到完整的邏輯畫布上,將每幀量化為所選調色盤,然後重新編碼出新的 GIF。
  4. 比較頁面上顯示的原始大小與輸出大小。位元組變化就是誠實的結果;正值的百分比不會被改標為節省。
  5. 下載新的 GIF 並完整播放一次循環,確認色彩、透明邊緣與每幀延遲仍符合你的預期。

該工具會保留磁碟上未動過的原始檔案,並將新的 GIF 以全新的 Blob 下載匯出。由於重新編碼會將局部幀修補合成為完整畫布,原本以微小變動矩形高度最佳化的來源在此步驟後可能會變大。請將此種變大視為資訊,而非失敗。

挑選正確的調色盤:256、128 或 64

這三個調色盤選項是瀏覽器工具唯一開放的壓縮控制項,並且幾乎完全對應到 Photoshop 的 Colors 下拉選單。請依內容類型挑選,而非一味追逐最小的位元組數。

調色盤大小適用情境風險
256 色照片、漸層、細部文字、反鋸齒 UI調色盤最大;每幀縮減幅度最小
128 色插圖、螢幕錄影、色彩變化中等的 UI 動畫漸層與膚色中會出現細微的色帶
64 色扁平繪圖、icon 循環、貼圖動畫、刻意簡化任何照片類內容都會出現明顯色帶

該工具本身的指引是從 128 開始,與來源並列檢視一整個循環,只有在視覺品質仍可接受時才嘗試 64。務必以實際發佈尺寸檢視下載後的結果——在全螢幕下看不見的色帶,在對話縮圖或大頭貼裁切中可能變得明顯。

最佳化後需要注意的取捨

重新編碼 GIF 並非沒有代價。在替換原始檔之前,有三個結果值得特別留意。

局部幀會變成全幀。瀏覽器工具會在量化前將局部幀修補合成為完整畫布,因此每個輸出幀都是一張完整的圖。原本依賴微小變動矩形來節省空間的來源,在此步驟後可能會變大。這個取捨是刻意的,也是保證跨幀透明度與處置一致性的唯一方法。

中繼資料會被捨棄。匯出的 GIF 是全新的串流。它不會保留來源的註解區塊、應用程式擴充、位元組層級的最佳化方式,或有限的循環次數。輸出結果預設為持續重複播放。如果你需要原始中繼資料或特定的循環次數,請保留原始檔案不動。

透明度僅為一bit。GIF 每幀僅支援單一二值透明索引。調色盤縮減後,透明像素會以該模型進行編碼。來源中的柔和半透明邊緣,在輸出中可能變成明顯的開或關邊緣,特別是在 64 色時。請以實際發佈尺寸(而非僅在全螢幕下)檢視任何重度使用透明度的動畫。

何時使用 Photoshop、GIF Optimizer,或先縮尺寸的流程

每條路徑在不同情境下勝出。當你已在 Photoshop 工作階段中、需要精細的抖動控制,或希望將 GIF 壓縮與其他幀層級編輯合併時,請使用 Photoshop 的 Save for Web (Legacy)。當 GIF 並非 Photoshop 流程的一部分、你想要一鍵試驗調色盤,或需要在確認採用結果前驗證實際的位元組變化時,請使用 GIF Optimizer。若來源 GIF 遠大於實際發佈尺寸,請先縮尺寸,讓調色盤量化需要編碼的像素變少,再重新編碼以獲得額外的縮減。關於先縮尺寸這條路徑的指引,在你的瀏覽器中將 GIF 縮得更小一文將逐步說明最佳化問題中的像素尺寸那一半。

誠實的結論:Photoshop 與基於瀏覽器的 GIF Optimizer 都透過改變同一個明確變數——每幀色彩數——來節省位元組,並且兩者都可能產生更大的輸出。唯一始終有助的最佳化選擇,是保留原始檔案直到你已驗證新檔案在其實際發佈尺寸下能正常播放為止。