等比例調整動畫 GIF 的大小,可在減少像素數量的同時,保留每一個可見影格及其延遲設定,而像素數量正是影響檔案大小的主要因素——只需設定目標寬度,瀏覽器便會根據原始畫布的長寬比自動計算出對應的高度。動畫會在當前的分頁中解碼,而非在遠端伺服器上處理。每一個影格都會依據其清除方式(disposal)指令進行合成,完整的可見畫布會被縮放,最後輸出一個新的、以調色盤為基礎的 GIF,並以本地 Blob 的形式讓你直接下載。「不喪失品質」在 GIF 中意味著兩件事必須同時成立:動畫播放的方式必須符合觀看者的預期,且新檔案不能產生可見的瑕疵。第一個目標透過保留已解碼的可見影格與每個影格的時間設定來達成。第二個目標則受到 GIF 格式本身的限制——以調色盤為基礎的色彩、每個影格最多 256 種顏色、單一位元透明度,以及影格重新編碼時的失真性調色盤轉換。像素較少通常代表檔案較小,但重新編碼有時反而會讓檔案變大,因此頁面會回報實際的輸出尺寸、影格數量與最終位元組大小,而不是承諾一個降低百分比。

how to reduce gif size without losing quality
how to reduce gif size without losing quality

對 GIF 而言,「喪失品質」意味著什麼

GIF 是一種以調色盤為基礎的格式:每個影格都包含一張最多 256 種顏色的表格,每個像素從中選取一種。這個上限——而非工具本身——才是色彩還原度的真正極限。當動畫被重新編碼時,瀏覽器會為每個完整的輸出影格建立新的調色盤,這可能導致漸層偏移、照片細節被柔化,或抖色(dithering)模式改變。GIF 的透明度同樣是單位元:像素不是完全透明就是完全不透明。在來源檔案中看起來平滑的反鋸齒邊緣、柔和陰影與部分透明度,在重新編碼後可能會變成生硬的剪裁邊緣。這些變化並非由縮放本身造成,而是源自 GIF 的儲存模型。

縮放真正改變的是每個影格的像素數量。較小的影格承載較少的影像資料,而像素減少通常才是實際上縮減檔案大小的關鍵。可見的動畫——影格順序、動作、延遲,以及觀看者實際看到的修補區域——會在縮放前先從原始解碼影格重建,因此以目標尺寸觀看結果的觀看者,應該會看到以較小尺寸播放的相同動畫。

為什麼等比例縮放能縮小大多數 GIF

GIF 檔案大小取決於三個因素:像素數量、調色盤選擇,以及影格之間的重複程度。將影格的每邊各縮減一半——把 800 乘 600 的畫布變成 400 乘 300——會使像素數量減少為四分之一,因此在考量壓縮之前,檔案大小就已經縮減了大半。工具只開放寬度設定,因為這個單一數字能明確決定長寬比;對應的高度會根據來源畫布計算並四捨五入至整數像素。不會拉伸第二個軸線、不會自創長寬比,也不會加入留白或裁切。

確切的規則很直接:將目標寬度除以來源度以得到縮放比例,再將該比例套用至來源高度。將 640 乘 480 的來源縮放至寬度 320 會得到 320 乘 240;將 480 乘 270 的來源縮放至寬度 240 會得到 240 乘 135。每個影格會透過標準的 drawImage API 在新的尺寸下繪製至瀏覽器畫布,因此每個可見影格都會以相同的比例縮放,動畫在新顯示尺寸下仍維持其比例。

這項單一計算是工具執行的唯一幾何處理。它不會裁切、留白、旋轉、改變影格順序、加入字幕,也不會替你挑選新的長寬比。當需要進行這些編輯時,請先使用影像裁切工具或專屬的 GIF 編輯器,最後再回到縮放步驟處理最終的像素尺寸。

在瀏器中使用 GIF Resizer 縮放 GIF

GIF Resizer 會在當前分頁中於本地處理解碼、合成、縮放與重新編碼,因此來源檔案、解碼後的像素,以及最終下載的 Blob 在你選擇儲存結果之前,都會一直保留在裝置上。

  1. 在瀏覽器中開啟 GIF Resizer 頁面,並選擇一個大小不超過 20 MB 的動畫 GIF。確認頁面上顯示的偵測到的來源畫布尺寸——新高度將根據這個比例計算。
  2. 在寬度欄位中以整數像素輸入目標寬度。頁面會根據來源比例自動計算並顯示對應的高度;你不需要輸入高度。
  3. 選擇 Resize GIF。瀏覽器會解碼動畫、合成每個影格、等比例縮放可見畫布、建立新的以調色盤為基礎的 GIF,並在頁面上回報實際的輸出尺寸、影格數量與最終檔案大小。
  4. 下載產生的 GIF,並在瀏覽器或目標應用程式中開啟。以預定的顯示尺寸觀看第一個完整循環,並檢查影格時間、邊緣品質、文字可讀性,以及動畫所依賴的任何透明度。

縮放後的 GIF 保留與重新建立的部分

從來源保留由工具重新建立
可見的影格順序每個輸出影格最多 256 種顏色的全新調色盤
解碼後的每影格延遲新的 GIF 位元組串流(非原始檔案的逐位元組縮減)
包含由清除方式驅動背景的修補合成結果連續循環行為(任何有限的循環次數都會被捨棄)
來源畫布長寬比(用於推算高度)輸出尺寸與位元組數量
單位元透明度語意—

原始的中繼資料擴充區塊、來源調色盤表格、優化策略與有限的循環次數都不會被帶入新檔案。匯出的永遠是根據已解碼的可見影格所產生的全新 GIF 編碼。這就是為什麼即使底層位元組串流已經重建,縮放後的動畫在每個影格邊界仍能像來源一樣播放。

頁面對可接受的輸入設有三道限制。所選檔案大小上限為 20 MB。其邏輯畫布任一邊不得超過 4,096 像素,且單一影格不得超過三百萬像素。動畫最多可包含 50 個影像影格,並對壓縮修補區與合併輸出工作量設有額外限制。超出任一限制的檔案會在分配大型輸出畫布前被拒絕,以避免部分下載或頁面凍結。若來源含有毀損的影格資料、誤導性的尺寸或無效的 GIF 簽章,頁面會顯示錯誤,且不會留下任何殘留的下載檔案。

當僅靠縮放無法讓檔案變小時

減少像素數量只是調整 GIF 檔案大小的其中一個手段。兩個尺寸相同的動畫,根據調色盤選擇、影格間重複程度,以及每次更新時影格變動的多寡,可能會有截然不同的檔案大小。一個短小、重複性高且僅使用精簡 32 種顏色調色盤的載入動畫,本身就可能已經很小,因此將其尺寸減半也許只能略微縮減檔案。反之,一個具有豐富漸層、快速的全影格變動與複雜透明度的冗長動畫,即使像素數量減少,重新編碼後仍可能比來源更大,因為新的每影格調色盤使用的顏色比原本更多。

原因為什麼縮放後的檔案可能變大
影格內容密集或高對比將每個影格量化至新調色盤時,可能引入比原始更多的顏色
大量全影格更新且重複性低GIF 壓縮仰賴漸進式修補;每影格像素減少仍需要完整的輸出資料
漸層、抖色或照片細節每影格最多 256 種顏色是 GIF 格式的上限,而非工具的限制
以完整影格儲存的透明漸層重新編碼後的影格可能承載比修補來源更多的可見像素

當像素數量已經很少而檔案仍然很大時,調色盤與壓縮通常就是下一個著力點。GIF Optimizer 會以更小的調色盤重新編碼動畫,同時回報實際輸出大小,處理的肥大原因與縮放不同。對於難以處理的檔案,若要進行完整工作流程,請先縮放至目標所需的顯示尺寸,若位元組數量仍高於預期,再將結果送入優化工具處理。

在預定顯示尺寸下驗證結果

縮放會改變動畫在螢幕上特定實際尺寸下的外觀。一個在 800 乘 600 時清晰銳利的 GIF,當縮放至 200 乘 150 時,可能會在小文字或細線條上失去可讀性,因為每個像素現在佔據了更大的螢幕空間,原本平滑的邊緣會變得粗糙。兩個習慣能在發布前及早發現這個問題。首先,在目的地實際使用的顯示尺寸下——例如聊天用戶端的縮圖、說明文件頁面、電子郵件簽名——於瀏覽器中開啟下載的 GIF,並觀看第一個完整循環,檢查文字可讀性、透明度的邊緣品質,以及任何暗示影格清除指令被誤判的閃爍。其次,將頁面上回報的檔案大小與原始檔案進行比較。對於大多數動畫而言,像素數量減少伴隨相近或更小的位元組數量是預期結果;若像素數量相近但位元組數量更大,意味著調色盤與內容佔據了檔案的主要部分,此時值得另外執行優化步驟。

頁面會回報實際的輸出尺寸、影格數量與最終大小,任何變動都一目瞭然。原始檔案不會被悄悄覆寫;下載的結果是唯一的新增產物,且在當前分頁關閉後不會保留任何資料。使用此工具無需註冊帳號,且本地下載行為可能因瀏覽器、顯示器與色彩管理設定而略有不同,因此發布前請務必檢查結果。

如果你正在權衡各種方案,Add Text to a GIF Without an App or Upload 對此有詳細說明。

如果你正在權衡各種方案,Add Text to an Animated GIF 對此有詳細說明。