ImgConvert

GIF 轉精靈圖工具

將 GIF 動畫影格合併為一張透明 PNG,自訂排列方式、影格間距與縮放比例。

選擇一張不超過 25 MB 的 GIF,選取檔案後即開始上傳。

0 px
100%

GIF 轉精靈圖:將動畫影格排成一張 PNG

使用這個線上 GIF 轉精靈圖工具,將動畫的完整影格合併成一張透明 PNG。你可以選擇網格、橫向排列或縱向排列,再調整影格間距與縮放比例。匯出的靜態圖片可放入自己的專案,依格線切割使用。

精靈圖的英文是 sprite sheet,也常寫成 spritesheet。每個影格會放進大小一致的格子,並保留 GIF 原本的順序;即使動畫中儲存了重複畫面,對應的影格也會一起保留。

如何將 GIF 轉成精靈圖

1

選擇並上傳一個 GIF 檔案

從裝置選擇一個不超過 25 MB 的 GIF。選取檔案後便會開始上傳,上傳完成後即可產生精靈圖。

2

設定排列方式與影格大小

選擇網格、橫向排列或縱向排列。網格預設使用自動排列,也能指定欄數;需要調整尺寸時,拖曳影格間距與縮放比例滑桿即可。

3

產生、預覽並下載 PNG

點選產生精靈圖,轉檔任務會交由伺服器處理。完成後查看圖片預覽並下載 PNG。你也可以修改設定,再次轉換已上傳的 GIF。

網格、橫向排列與縱向排列怎麼選

排列方式會決定整張圖片的形狀。可依專案使用的切片方式與紋理尺寸限制,選擇合適的版面。

排列方式適合用途注意事項
網格將影格分成多列排列。預設自動選擇欄數;切換為指定欄數後,可設定 1–240 欄。
橫向排列將所有影格排成一列,也稱為 sprite strip。影格較多的動畫可能產生非常寬的 PNG。
縱向排列將所有影格排成一欄。匯入專案前,請確認圖片的總高度。

網格會由左至右、由上至下放置影格。三種排列方式都會保留原本的順序,變更版面不會刪除影格。

調整欄數、影格間距與縮放比例

自動排列或指定欄數

自動排列會依影格數量與單張影格尺寸選擇網格欄數。如果專案需要固定每列的影格數,請切換至指定欄數,再填入所需數值。

舉例來說,8 個 64 × 64 像素的影格,設定為 3 欄、2 像素間距與 100% 縮放,會產生一張 196 × 196 像素的 PNG。最後一格沒有影格,會保持透明。

影格之間的間距

影格間距可在 0–32 像素之間調整,預設為 0,相鄰格子會直接相接。提高數值後,影格之間會留出透明空隙。

此設定不會在圖片四周加入額外邊距。之後在其他軟體切片時,請填入相同的間距,避免切到旁邊的影格。

50%–200% 的影格縮放比例

縮放滑桿會同時調整每個影格的寬度與高度,支援 50%–200% 之間的整數百分比。預設的 100% 會保留原始影格尺寸。

縮放採用最鄰近插值法,保留俐落的像素邊緣,不會將邊緣平滑模糊。縮小時可能捨去部分細節,放大也無法還原來源檔案中不存在的細節。

GIF 轉成精靈圖後,哪些內容會保留?

GIF 有時只在個別影格中儲存變動區域,而非整張畫面。工具會先還原完整畫面,再放入大小一致的格子。來源檔案的透明像素會保留,原有的不透明背景也會留在圖片中。

每個已儲存的影格都會放入結果一次,包括重複影格。PNG 不包含動畫播放或影格時間資料。若要先裁掉多餘邊緣,可以使用 GIF 動畫裁切,再上傳裁切後的動畫。

將精靈圖用於遊戲引擎或 CSS 動畫

這個精靈圖產生器以一個 GIF 為來源。將 PNG 匯入編輯器或遊戲引擎後,需要在該軟體設定格子尺寸與間距,並確認目標環境的紋理大小限制。本工具不匯出引擎專用專案或圖集設定檔。

CSS 定位方式可參考 MDN 圖片精靈指南。若需要能在播放器直接播放的檔案,請使用 GIF 轉影片。

GIF 檔案與精靈圖的尺寸限制

檢查項目限制
輸入檔案一個 GIF,最大 25 MB
來源影格數最多 240 個影格
來源影格總像素不超過 6,000 萬:寬度 × 高度 × 影格數
PNG 邊長寬、高各不超過 8192 像素
PNG 總像素不超過 6,000 萬:輸出寬度 × 輸出高度

以上限制須同時符合。GIF 檔案即使不大,解碼後也可能包含大量像素。如果輸出超過限制,可嘗試網格排列、調整欄數,或降低影格縮放比例。

GIF 精靈圖製作常見問題

可以,一次處理一個 GIF,不需要註冊帳號。工具不會在 PNG 加上浮水印;如果來源動畫已經有浮水印,仍會當作畫面的一部分保留。

PNG 是包含各個影格的靜態圖片,不含 GIF 的影格延遲與循環設定。切割圖片後,請在自己的軟體設定動畫播放時間與順序。

會。原有透明像素、影格間的空隙與未使用的格子都會保持透明。此轉換不會移除不透明背景;若動畫將放在不同底色上,建議先透過預覽檢查邊緣。

網格由大小相同的格子組成。如果影格數量無法填滿最後一列,剩餘格子就會保持透明。這些位置是空白區域,不是要加入播放的額外影格。

工具會保留 GIF 儲存的每個影格,不會自動移除重複畫面。重複影格可能本來就是動畫的一部分,有內容的格子數量取決於來源檔案儲存的影格數。

本頁會將影格合併為一張 PNG。若需要編號排列的獨立圖片與 ZIP 壓縮檔,請使用 GIF 影格擷取工具,方便逐格編輯。

可以。依每個影格的寬高與間距切割 PNG,再到引擎或 CSS 程式碼中設定播放方式。下載內容只有 PNG,請依使用的引擎或程式碼設定匯入參數。

GIF 與 PNG 的編碼方式不同,精靈圖也會把所有完整影格放在同一張畫布。透明間距與空白格同樣會增加圖片尺寸。降低縮放比例可以縮小尺寸,但不保證檔案一定更小。

開始製作 GIF 精靈圖

選擇一個 GIF,排列完整動畫影格,下載專案需要的透明 PNG。