Sprite Sheet Generator
Arrange multiple images into a downloadable PNG sprite sheet
Sprite Sheet Generator — what it does
Arrange multiple images into a single PNG sprite sheet with a column count, padding and background colour of your choosing. Sprite sheets exist because one image request is cheaper than twenty, and because a game engine or CSS rule can address each frame by its position in the grid.
When this tool helps
- Packing animation frames into one sheet for a game engine or canvas animation.
- Combining interface icons into a single file addressed by CSS background position.
- Bundling a set of small images to reduce the number of requests a page makes.
How to use it
- Choose the images in frame order.
- Set the number of columns.
- Set padding and background colour.
- Generate and download the sprite sheet.
Accuracy, limits, and good practice
- Frames of identical size make the grid predictable, which is what lets code compute each frame's offset arithmetically.
- Padding prevents neighbouring frames bleeding into each other when the sheet is scaled or filtered, at the cost of a slightly larger file.
- Note the column count and frame size once generated — your code needs both to address the right cell.
Frequently asked questions
How do I use a sprite sheet in CSS?
Set the sheet as a background image and shift background-position by multiples of the frame size to show each icon.
Are sprite sheets still worth it on the web?
Less so under HTTP/2, where parallel requests are cheap. They remain standard for game animation frames.
Should frames be the same size?
For animation and code-driven addressing, yes. Uneven frames need a coordinate map rather than simple arithmetic.
Related tools on this site
- Image EXIF Viewer — Inspect image dimensions and available camera metadata
- Rounded Image & Border — Add rounded corners, background, and a custom border
- Batch Image Resizer — Resize many images and download a ZIP
Everything above runs inside this page. Sprite Sheet Generator needs no account, no upload, and no server round trip — close the tab and nothing is left behind.
圖片精靈圖生成器能做什麼
把多張圖片排成單一 PNG 精靈圖，欄數、間距與背景色由你決定。精靈圖之所以存在，是因為一次圖片請求比二十次便宜，也因為遊戲引擎或 CSS 規則能依格線位置指定每一格。
什麼時候用得上
- 把動畫影格打包成一張圖，供遊戲引擎或 canvas 動畫使用。
- 把介面圖示合併成單一檔案，用 CSS 背景位置定位。
- 把一組小圖打包，減少頁面發出的請求數。
使用步驟
- 依影格順序選擇圖片。
- 設定欄數。
- 設定間距與背景色。
- 產生並下載精靈圖。
精確度、限制與實務建議
- 尺寸一致的影格能讓格線可預測，程式才能用算術直接算出每格的偏移量。
- 間距可避免縮放或濾鏡時相鄰影格互相滲色，代價是檔案略大。
- 產生後請記下欄數與影格尺寸——程式需要這兩個數字才能定位正確格子。
常見問題
CSS 中怎麼使用精靈圖？
把整張圖設為背景圖，再依影格尺寸的倍數位移 background-position，即可顯示各個圖示。
網頁上還值得用精靈圖嗎？
在 HTTP/2 之下效益較小，因為並行請求成本很低。但它在遊戲動畫影格上仍是標準做法。
影格需要一樣大嗎？
用於動畫與程式定位時需要。尺寸不一的影格需要座標對照表，而非單純算術。
本站相關工具
- 圖片 EXIF 檢視器 — 查看圖片尺寸與可用的相機中繼資料
- 圖片圓角與邊框 — 加入圓角、背景與自訂邊框
- 批量調整圖片尺寸 — 一次縮放多張圖片並下載 ZIP
以上步驟全部在這個頁面內完成，圖片精靈圖生成器 不需要註冊、不上傳檔案、也不經過伺服器，關閉分頁後不會留下任何資料。