Sprite Sheet Generator
Pack many images into a single sprite sheet and get a JSON coordinate map alongside it. One HTTP request instead of fifty is still one of the most effective front-end performance wins available. It is free, needs no account, and adds no watermark to your result.
Sprite Sheet Generator
Add your files. Recommended settings are ready, so you can process in one click.
PDF, Word, images, audio, video, archives and more
Up to 100 files · 250 MB · No account- 1Add files
- 2Choose an action
- 3Download or keep going
What people use it for.
What happens to your file.
Images are packed into one transparent sheet in a grid, with optional padding between them so a scaled sheet, or a game engine’s texture filtering, does not bleed one sprite’s edge into the next. Alongside the PNG come a JSON map giving each sprite’s file, position and size, and a CSS file with a class per sprite that sets its size and background position, ready for a web page.
Everything you need, without a paywall.
Common questions.
What is the JSON map for?
It gives the x, y, width and height of every packed image, which is what you feed to CSS background-position or a game engine's atlas loader.
Is transparency preserved?
Yes, when the sheet is exported as PNG. Source transparency carries through to the packed result.
Does this still matter with HTTP/2?
Less than it once did, but it still reduces request overhead and is standard practice for game texture atlases.
Is there CSS I can use directly?
Yes. The download includes sprite-sheet.css, with a .sprite class for the sheet and a .sprite-name class for each image that sets its width, height and background position.
Why add padding?
When a sheet is scaled, or a game engine filters its textures, pixels from a neighbouring sprite can bleed into the edge of the one on screen. A few pixels of transparent padding between sprites prevents it.
You might also need.
Split an image into rows and columns and download the resulting tiles individually or as a ZIP.
Generate common favicon sizes and an ICO file from a source image for websites and web apps.
Create printable contact sheets from many images with thumbnails, filenames, rows, columns and page margins.
Convert PNG images to WebP while preserving alpha transparency and controlling output quality.