將 GIF 分割代表將一個動畫 GIF 檔案解碼成一組編號的靜態 PNG 影像序列,其中每張 PNG 都呈現動畫在特定時間點的完整可見畫布,而不是編碼器原本儲存的小塊像素矩形。每個輸出檔案都保留原始動畫的完整畫布尺寸,而不是任何單一變動矩形的尺寸,因此每張 PNG 都能像動畫的螢幕擷圖一樣,在任何標準影像編輯器中開啟。輸出檔名會帶有符合解碼影像順序的補零號,讓檔案能依播放時的觀看順序正確排序。PNG 是靜態格式,所以分割器也會在每張預覽旁顯示解碼後的顯示延遲,作為重新組裝時的參考,而不是嵌入檔案本身的資料。基於瀏覽器的擷取會將來源檔案保留在本機,不會上傳到遠端佇列,每個輸出 PNG 只會存在於目前的分頁中,直到你下載或更換輸入檔。

分割 GIF 會產生什麼結果
當有人詢問如何分割 GIF 時,他們幾乎總是想要一張或多張靜態圖片,以便在無法播放影片或動畫的地方使用。需要單一代表幀的文件頁面、想要反應最強烈一幀的簡報、一次展開每個動作步驟的分鏡腳本,或是想在別處重複使用前先修飾某個姿勢的編輯器,都能從同一種輸出中受益:每個可見動畫輸出一張完整的 PNG,尺寸為原始的完整畫布大小。
問題在於 GIF 檔案幾乎不會是一疊完整的圖片。大多數編碼器每一步只儲存一小塊新像素,並告訴解碼器在繪製下一幀之前該如何處理前一幀。有些區塊包含透明區域,有些會要求在延遲後清除畫布,有些則要求解碼器還原先前的畫布。若匯出這些原始區塊的「分割」會產生一個令人困惑的小矩形資料夾,看起來不像你原本的動畫,結果幾乎永遠不是使用者真正想要的。
解決方法是 GIF Splitter,它會在你的瀏器中解碼 GIF,依序走訪幀序列,在正確的時機套用每個處置指令,並在將每個區塊合成到完整邏輯畫布後,再把該完整畫布匯出為 PNG。結果就是每個可見動畫幀輸出一張 PNG,可直接用於文件、簡報、設計審閱、社群貼文,或任何需要你在螢幕上看到的那個精確幀的靜態影像工作流程。
為何原始 GIF 區塊會造成誤導
GIF 以影像區塊清單儲存動畫,而不是以完成的圖片清單。每個區塊涵蓋畫布的一塊區域,內含以百分之一秒為單位的延遲,並可能帶有「處置」代碼,告訴播放器在延遲結束後該如何處理該區域。四種有意義的處置行為分別是:保留區域不動、還原背景、還原前一幀,或不執行特定動作。它們讓 GIF 能在幀之間重複使用像素並維持檔案小巧。
匯出原始區塊而非合成結果,是人們認為 GIF 分割器壞掉的一個常見原因。你打開其中一個儲存的檔案,卻只看到一個小角落、一個帶閃爍游標的透明矩形,或是一個背景被抹掉的幀,因為解碼器從未套用正確的處置規則。動畫在覽器中看起來沒問題,是因為瀏覽器正在即時畫布上一幀一幀地繪製。匯出的區塊完全不知道它底下原本是什麼。
合成步驟正是把這團混亂變成可用結果的關鍵。透過使用標準的 canvas pixel-data API,將每個區塊繪製到單一全尺寸畫布上,並在序列中的正確時機遵循每個處置指令,分割器能重現播放時人實際看到的畫面。這也是為何透明區域在最終 PNG 中保持透明:瀏覽器畫布會保留 alpha 通道,而 GIF 的「清除為背景」要求只會在動畫明確要求的位置套用,而不是被填入任意背景色。
如何使用 GIF Splitter 分割 GIF
- 在瀏器中開啟 GIF Splitter,並從你的裝置選擇一個動畫 GIF 檔案。選取的檔案最大可達 20 MB,其畫布每邊最多 4,096 像素,單幀最多三百萬像素。
- 等待本機驗證程序完成。頁面會在開始合成前同時檢查總區塊工作量與合併後的輸出像素,被拒絕的輸入會顯示清楚的訊息,而不是產生半成品的幀清單。
- 點選Extract PNG frames,並等待本機合成程序完成。解碼、處置處理與 PNG 產生都在你的分頁中進行;不涉及上傳或遠端轉檔佇列。
- 檢視編號預。每列顯示從 1 開始的幀號、畫布大小、以毫秒為單位的解碼延遲,以及動畫在該時間點的完整合成畫布縮圖。
- 使用每列的個別下載連結下載你需要的 PNG。檔案以來源檔名加上補零幀號命名,例如 animation-frame-01.png,以便在任何檔案管理器或編輯器中保持正確排序。
- 開啟第一張、中間一張與最後一張匯出的 PNG,確認它們與原始動畫相符。這項視覺檢查對於只變更部分畫布的過渡尤其重要,因為這些地方的處置行為影響最大。
分割器強制執行的輸入限制
這些安全限制是刻意設定的。動畫檔案解壓縮後的大小可能遠超過原始位元組大小,因此看似小的上傳檔案仍可能要求瀏覽器配置不合理數量的畫布像素。頁面在開始合成前強制執行四項嚴格檢查,被拒絕的輸入會產生清楚的訊息,而不是半完成的幀清單。
| 限制 | 上限 | 存在原因 |
|---|---|---|
| 來源檔案大小 | 20 MB | 保持初始解碼步驟的回應速度。 |
| 畫布寬度或高度 | 4,096 pixels | 符合一般瀏覽器在影像資料上的畫布上限。 |
| 每幀像素數 | 3,000,000 | 避免單一巨大區塊耗盡記憶體。 |
| 檔案中的影像幀數 | 50 | 限制每次工作階段的總合成工作量與 PNG 數量。 |
這四個數字也說明了為何一個看起來完全正常的貼圖動畫仍可能被拒絕。預算取決於解壓縮後的像素工作量,而非磁碟上的位元組大小,一個在聊天視窗中看起來很合適的 GIF,仍可能要求瀏器配置遠超過分割器願意處理的畫布像素。若檔案被拒絕,訊息會指出被超過的特定限制,方便在再次嘗試前對來源進行裁剪或簡化。
擷取出的幀在哪些地方有用
一旦每個幀都是一張普通的 PNG,這些靜態圖就能套用到幾乎任何靜態影像流程中。
- 文件與說明文章。從動態 UI 示範中擷取一張代表性靜態圖,嵌入到影片或 GIF 無法呈現的書面指南中。
- 分鏡腳本與設計審閱。將每個幀依序排列在聯絡表中,以便發現動作序列中的時間問題、靜止幀或跳動情形。
- 社群媒體素材。挑選最強烈的一幀作為靜態貼文或封面圖,無需重新編碼動畫。
- 手動編輯。在影像編輯器中開啟單一幀以修飾細節,然後若想重建動作,再將編輯後的 PNG 重新匯入動畫工具。
- 貼圖與反應圖製作。取一個表現富的幀並將其轉成 PNG 貼圖,用於聊天應用程式。儲存靜態圖後,瀏覽器版的 GIF 轉貼圖工作流程可接續完成其餘步驟。
幀號遵循解碼後的 GIF 影像順序,因此檔名的補零不只是美觀:它就是實際的序列索引,任何會使用這些檔案的外部工具都能讀取到正確順序,無需額外的側車資訊清單。
確認幀與動畫一致
為確保使用可靠,請開啟第一張、中間一張與最後一張匯出的 PNG,並與原始動畫進行比對。這是抓出兩種分割悄悄出錯情況最省錢的方式。第一種是局部畫布過渡:只有畫面中小區域變動的幀(例如閃爍游標或移動的貼圖),仍應在完整 PNG 中顯示完整背景。第二種是透明度:若某幀含有清除為背景的像素,這些區域在儲存的 PNG 中應保持透明,而不是被填入黑色或白色,因為在畫布保留 alpha 通道的地方,PNG 也會保留 alpha 通道。
分割器也會在每張預覽旁顯示以毫秒為單位的解碼後顯示延遲。這個數字是用於排序與重新組裝的參考資訊,並非保證每個播放器都能完全重現原始時間。若你從擷取的靜態圖重建動畫,請將這些延遲視為起點,並在目標應用程式中確認結果。
該工具無法還原瀏覽器解碼器讀不到的幀、無法重建影片時間軸、無法保留 GIF 註解或應用程式擴充、無法偵測重複的視覺幀,也無法推斷哪張靜態圖最有用。若來源 GIF 使用了非常細微的透明度、色彩管理差異或損壞的擴充資料,請在將產生的 PNG 視為定稿前,於目標應用程式中加以檢查。
分割 GIF 後的下一步
每張 PNG 都是由本機畫布像素所產生,且僅在更換輸入、離開頁面或關閉分頁前可供使用,因此請在離開頁面前儲存你想保留的幀。一旦存到磁碟,後續工作流程就取決於你的目標。
若你想要更小的動畫結果,你剛擷取的靜態圖是重新編碼的良好素材。覽器版的 GIF 縮圖教學可以帶你從擷取出的幀一路到更精簡的動畫,過程中無需上傳任何檔案。若你想要的只是不同格式的單張靜態圖,PNG 已經是無失真的格式,可直接用於任何編輯器,縮放或格式轉換通常在瀏覽器工具中就能一鍵完成。
在刪除或取代原始 GIF 前,請使用可見的預清單作為檢查依據。若列數看起來太少,來源可能包含瀏覽器無法解碼的更多幀;若某列看起來有視覺錯誤,來源可能依賴了被解碼器忽略的擴充資料。這兩種情況都代表需要關注的是輸入檔本身而非分割器,而編號輸出則是最容易確認分割結果是否完整擷取到動畫所顯示內容的地方。