How do I use the generated sprite sheet?

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.

What's the difference between JSON and CSS output?

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.

Should I use rows/columns mode or automatic packing?

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.

What image formats can I upload and export?

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.

How do I maintain sprite quality?

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.

Sprite Sheet Generator

Combine multiple images into a single sprite sheet. Set matrix size, gap, and cell dimensions; export the image and JSON mapping.

Upload Images

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.

Related Tools

Enhance your workflow with these complementary design tools

Image Converter

Convert and optimize images between formats with quality controls.

CSS Gradient Generator

Create beautiful multi-layer CSS gradients for backgrounds.

CSS Animation Builder

Build CSS keyframe animations with timing and easing controls.