Images to Sprite Sheet Generator
Pack multiple images onto one canvas with a shelf bin-packing layout, then export a JSON atlas and CSS.
Drop images or click to browse
PNG, JPG, WebP, SVG — select multiple files. Processed entirely in your browser.
No images loaded yet.
How the Images to Sprite Sheet Generator works
A sprite sheet packs many separate images onto a single canvas so a game engine, canvas renderer, or browser makes one texture load instead of dozens of individual requests. This tool uses a shelf bin-packing algorithm — it sorts your images tallest-first and greedily fills horizontal rows up to your chosen max width, starting a new row whenever the current one would overflow. That keeps packing density high even when your images are very different sizes, unlike a plain horizontal or vertical strip.
Drop in your images, reorder them by dragging rows (or the ↑/↓ buttons), set a padding value to leave a transparent gutter around each frame (this prevents neighboring frames from bleeding into each other when a GPU samples the texture with filtering), and optionally round the sheet dimensions up to the nearest power of 2 — a common requirement for older graphics hardware and some game engines. Click Generate sprite sheet to render the combined PNG, then export a JSON atlas in the widely-supported TexturePacker frame format (for Pixi.js, Phaser, Cocos2d, and similar engines) or ready-to-use CSS classes with background-position offsets for web/UI icon sprites — everything runs on a canvas in your browser, no files are uploaded anywhere. For single-image resizing before building a sheet, try the Image Resizer.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Packing many small icons into one image to cut request count.
- Producing a JSON atlas alongside the sheet for a game engine.
- Generating CSS sprite classes from a set of images.
- Getting a power-of-two sized sheet for a graphics pipeline.
- Consolidating an icon set that is currently many separate files.
Frequently Asked Questions
- How are the images packed?
- By a shelf algorithm: frames are laid left to right until the row is full, then a new row starts below the tallest frame in the previous one. It is fast and predictable, though it leaves gaps a full bin-packer would fill.
- What is the padding for?
- To stop neighbouring frames bleeding into each other. When a sprite is scaled or drawn at a fractional position the sampler reads adjacent pixels, and without a gap you see a sliver of the next frame along the edge.
- Why would I want power-of-two dimensions?
- Some graphics pipelines — particularly older mobile GPUs and certain WebGL paths — require or strongly prefer them for mipmapping and compression. For a plain CSS sprite sheet it is unnecessary padding.
- Are my images uploaded?
- No. Packing and encoding happen on a canvas in your browser, so the files never leave the machine. That also means the work is bounded by your own memory rather than by an upload limit.
- How do I use the sheet in CSS?
- Set the sheet as `background-image` on an element sized to one frame, then shift `background-position` by the frame's negative coordinates. The generated coordinate list gives you exactly those offsets.
- Is a sprite sheet still worth it?
- Less than it was — HTTP/2 removed most of the per-request penalty that motivated them, and an SVG sprite or an icon font is usually better for icons. They remain the right tool for game frames and for animation via `steps()`.
Common errors and gotchas
- Building a sprite for a site served over HTTP/2, where many small requests are cheap and a sprite is a liability.
- Omitting padding, so neighbouring sprites bleed into each other when scaled.
- Producing a sheet so large that every page downloads icons it never shows.
- Losing the atlas, without which the sheet is unusable.
- Assuming a sprite works for responsive icons, where SVG scales and a raster sprite does not.