Sprite Sheet Generator
Combine multiple images into a single sprite sheet. Set matrix size, gap, and cell dimensions; export the image and JSON mapping.
Drop images here or click to upload
Supports PNG, JPEG, WebP, GIF, BMP, TIFF formats
Frequently Asked Questions
A sprite sheet (or sprite atlas) combines multiple small images into one larger image. This reduces HTTP requests, improves loading performance, and is essential for game development and icon systems. Instead of loading 50 icon files, you load one sprite sheet and use CSS or JavaScript to display specific regions.
Download both the sprite image (PNG/WEBP) and the mapping file (JSON/CSS). The mapping contains coordinates for each sprite. For CSS sprites, use the background-position values. For games/JavaScript, use the JSON coordinates to render specific sprites from the sheet.
JSON output provides sprite coordinates as data (x, y, width, height) perfect for game engines, Canvas, or JavaScript frameworks. CSS output generates ready-to-use CSS classes with background-position, ideal for web icons and UI elements.
Use rows/columns mode when you need predictable, grid-based layout or equal-sized cells. This is perfect for animation frames or icon sets. Automatic packing mode efficiently arranges images to minimize wasted space, ideal for varying-sized sprites.
Upload any web format: PNG, JPG, WEBP, GIF. Export as PNG (lossless, supports transparency) or WEBP (smaller file size, modern format). PNG is recommended for sprite sheets with transparency, which most sprites require.
Upload high-quality source images. Use PNG export for pixel-perfect quality with transparency. Set appropriate cell sizes - too small compresses detail, too large wastes space. Add slight gaps between sprites to prevent texture bleeding in games.
Related Tools
Enhance your workflow with these complementary design tools.
Convert and optimize images between formats with quality controls.
Try Image ConverterCreate beautiful multi-layer CSS gradients for backgrounds.
Try CSS Gradient GeneratorBuild CSS keyframe animations with timing and easing controls.
Try CSS Animation Builder