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-imageon an element sized to one frame, then shiftbackground-positionby 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.