什麼是精靈圖（Sprite Sheet）？
精靈圖是把一連串動作影格拼貼在同一張圖片裡的做法。 這個名詞來自早期遊戲開發：遊戲中每個可獨立移動的圖像物件被稱為「精靈（sprite）」， 而把一個精靈的所有動作影格收集在同一張圖上，就成了「精靈圖」。
為什麼要用精靈圖？
核心原因是減少請求數。一個 12 格的跑步動畫，如果拆成 12 張獨立 PNG， 瀏覽器就要發出 12 次請求；合成一張精靈圖則只要 1 次。 在網路延遲佔比很高的情境下，這個差距非常明顯。 此外，精靈圖讓所有影格共用一次解碼，對記憶體與 GPU 上傳也更友善。
精靈圖怎麼用？
使用時只要把精靈圖設為元素背景，再用 background-position（或 Canvas 的
drawImage 裁切範圍）切換到對應影格，就能播放動畫。
關鍵資訊是「單格寬高」與「排列欄數」，只要知道這兩個數字，就能算出任一格的位置。
常見規格怎麼定？
| 項目 | 常見範圍 | 說明 |
|---|---|---|
| 單格尺寸 | 64 ~ 256 px | 依顯示大小決定，不需用原始影片解析度 |
| 格數 | 4 ~ 24 格 | 循環動作用少格，複雜動作用多格 |
| 排列 | 單列或網格 | 網格狀較省面積；單列最好計算 |
| 格式 | PNG / WebP | 需要透明用 PNG 或 WebP；WebP 檔案更小 |
精靈圖 vs GIF
GIF 是「會自己播放的動畫檔」，精靈圖是「需要程式控制的素材圖」。 如果你要的是能直接貼出去、打開就會動的檔案，選 GIF； 如果你在做遊戲或需要精細控制播放速度、暫停、反向播放，選精靈圖。 若用於網頁且重視檔案大小，動態 WebP 通常是比 GIF 更好的選擇。
如何用影片製作精靈圖？
傳統做法是逐格截圖再用繪圖軟體拼接，非常耗時。 本站的影片轉精靈圖工具可以直接讀取影片， 依您指定的格數自動等距抽格並排列成一張精靈圖，全程在瀏覽器內完成，影片不會上傳。
常見問題
精靈圖的英文是什麼？
Sprite Sheet，也常寫成 spritesheet 或 sprite sheet。Sprite 在電腦圖學中指的是可獨立移動的 2D 圖像物件，把多個 sprite 的影格收集在同一張圖上，就成了 Sprite Sheet。中文另有「雪碧圖」、「拼圖動畫」等說法。
精靈圖一定要是正方形的嗎？
不用。排列方式完全自由，常見的有橫向長條（單列）、網格狀（多列多欄）。選擇的依據是用途與面積效率：單列最好計算但很長，網格狀最省面積。本站預設會自動排成接近正方形的網格。
精靈圖和 CSS Sprite 是同一件事嗎？
技術原理相同（都是一張圖搭配定位顯示局部），但用途不同。CSS Sprite 主要用於網頁圖示，把多個小圖合成一張以減少請求數；動畫精靈圖則是把同一動作的不同影格合成一張，用於播放動畫。