像素小貓走路
GIF 轉精靈圖後排成一行 6 個影格，這種橫條配置大多數引擎都能直接讀取。
GIF 轉精靈圖：每個影格排進一張 PNG
放入一張動態 GIF，每個影格都會排到一張精靈圖（sprite sheet）PNG 上，並附帶 JSON 圖集和 CSS 動畫。這款免費的 GIF 轉精靈圖工具也能開啟動態 WebP、PNG 和短片，全部在你的瀏覽器裡完成。
GIF 轉精靈圖免費 · 在瀏覽器裡執行
把 GIF 拖到這裡
動態 GIF、WebP、PNG，或一段 MP4、WebM 短影片，全程在你的瀏覽器裡處理。
- 免費，在瀏覽器裡執行
- GIF、WebP、PNG 和影片
- 欄列配置與四周留白
- PNG、JSON 圖集和 CSS
GIF 轉精靈圖範例
8 段專為本頁製作的動畫，每段都用本頁的轉換工具排成精靈圖。點開任一個，所有設定都能親手試一遍。
拍動翅膀的藍鳥
4 個影格排在 2 的次方尺寸的精靈圖上，1024 × 1024，正好給有這項要求的引擎使用。
閃爍的火把
6 個影格縮到一半尺寸，做成一張小巧的精靈圖，適合用圖塊組成場景的遊戲。
載入中轉圈動畫
8 個影格排成一張方形精靈圖，直接用來做 CSS 載入動畫。
飄浮的幽靈
4 個影格排成一欄，適合由上往下播放精靈圖的引擎。
跳動的愛心圖示
4 個影格各留 4 像素的四周留白，邊緣始終乾淨，不會滲進相鄰的影格。
揮手的機器人
4 個影格排成一行，影格之間留出 4 像素間距。
火箭尾焰
4 個閃動的火焰影格，排在一張接近方形的精靈圖上。
3 步完成 GIF 轉精靈圖
三步完成，檔案全程不上傳。
拖曳、貼上或選擇動態 GIF、WebP、PNG，或一段 MP4、WebM 短片。每個影格都在你的裝置上讀取。
保留全部影格或其中一段，每隔幾格取一格，去除重複的影格，再設定欄數、四周留白、間距和影格尺寸。
儲存精靈圖 PNG、記錄每個影格時長的 JSON 圖集、CSS 動畫，或把單一影格 PNG 打包成一個 ZIP。
這款 GIF 轉精靈圖工具最擅長什麼
它最拿手的六件事，從像素走路循環到網頁載入動畫都能處理。
- 動畫
GIF、WebP、PNG 和短片
開啟動態 GIF、動態 WebP 或 PNG，或一段 MP4、WebM 短片。每個影格都依看圖軟體顯示的樣子讀出，GIF 裡互相疊加的影格也能完整還原。
只留你需要的影格
保留一段範圍，每隔一格或兩格取一格，再去除重複的影格。略過的影格把時長交給前一格，動畫速度保持不變。
適配每種引擎的配置
接近方形、一行、一欄或自訂欄數，再加上四周留白、間距和 2 的次方尺寸，每次 GIF 轉精靈圖都能貼合你的引擎。
JSON 圖集和 CSS 動畫
JSON 圖集依 Phaser 和 PixiJS 讀取的格式記錄每個影格的位置和時長；CSS 檔案能在任何網頁上播放這張精靈圖。
影格尺寸與像素畫
把影格縮小到四分之一或一半，得到更小的精靈圖；也能把像素畫放大 2× 或 4×，像素依然銳利。下載前就能看到精靈圖的尺寸。
免費又保護隱私
完全在你的瀏覽器裡執行：不上傳、免註冊、沒有浮水印，頁面載入完成後離線也能繼續使用。
GIF 轉精靈圖指南：從任何動畫得到乾淨的精靈圖
五個簡短技巧，幫你把任何動畫排成乾淨的精靈圖。
選擇引擎讀取的配置
「一行」適合大多數動畫工具和 CSS；「接近方形」讓大型動畫的精靈圖維持在材質尺寸以內；「一欄」適合由上往下讀取精靈圖的引擎。
精簡影格
設定「起始影格」和「結束影格」只留一個循環，用「每隔幾格」把長動畫減半。開啟「去除重複的影格」，就能去掉有些 GIF 用重複影格做出的停頓。
四周留白和間距
影格在遊戲裡縮放時，加上 1 到 4 像素的四周留白，邊緣就始終乾淨，看不到相鄰的影格。「間距」在格子之間留出空間，方便編輯。
留意精靈圖尺寸
尺寸顯示在精靈圖下方。用在手機上時，調小影格尺寸或增加欄數，就能讓每邊維持在 4,096 像素以內；引擎有要求時，開啟「尺寸取 2 的次方」。
用上圖集或 CSS
在引擎裡把 PNG 和 JSON 圖集一起載入，就能依名稱和時長取得每個影格。網頁上則連結 CSS 檔案，為元素加上對應的 class。
誰在用 GIF 轉精靈圖
把動畫轉成精靈圖的常見理由。
遊戲開發者
把 GIF 動圖和影片片段匯入遊戲引擎，變成一張帶有命名影格的材質。
網頁設計師
用一張 PNG 加一小段 CSS 動畫，取代檔案龐大的 GIF。
UI 和 App 設計師
把載入動畫和圖示動態效果轉成精靈圖，用在 App 和介面裡。
動畫師和模組作者
把動畫的每個影格收進一張精靈圖，方便編輯、分享或製作模組。
GIF 轉精靈圖常見問題
關於把動畫轉成精靈圖、檔案和隱私的解答。
開啟 GIF，選好影格和欄數，再下載精靈圖 PNG；需要的話，一併下載 JSON 圖集或 CSS。
免費。它完全在你的瀏覽器裡執行，免註冊帳號，也不加浮水印。
不會。動畫在你的裝置上讀取並排成精靈圖，不會傳送到任何伺服器。
可以。動態 WebP 和 PNG 在 Chrome、Edge 和 Safari 裡都能開啟，MP4 或 WebM 短片以每秒 12 格讀取。
每個影格的時長都保存在 JSON 圖集和 CSS 裡。略過的影格會把時長交給前一格，所以循環一次的時間和原本的 GIF 一樣長。
動畫最常用「一行」；「接近方形」讓長動畫更精簡；「一欄」適合由上往下讀取精靈圖的引擎。
Phaser、PixiJS 以及許多其他引擎和工具都能讀取 JSON hash 格式，它列出每個影格的名稱、在精靈圖上的位置和時長。
可以。「單一影格（ZIP）」把保留下來的每個影格各存成一個 PNG，依順序命名編號。