Free Browser Tool · No Upload · Instant Results
Sprite Sheet Generator
Upload images, drag to reorder, auto-trim whitespace and detect duplicates. Download a PNG sprite sheet with CSS classes and JSON atlas — all in your browser, nothing uploaded.
How to Use the Sprite Sheet Generator
Getting started takes under a minute. The tool runs entirely in your browser — no installation, no account and no upload to any server. Furthermore, it works on any modern desktop browser including Chrome, Firefox, Safari and Edge.
- Upload your image framesDrag and drop PNG, JPG, WebP or GIF files directly onto the upload zone. Alternatively, click Browse to open your file picker and select multiple files at once. New images are appended each time you add more — so you can build up a frame set gradually without starting over.
- Reorder frames by draggingDrag any thumbnail card to a new position in the grid. The order you set here becomes the frame order in the exported sheet, CSS and JSON. Furthermore, duplicate frames are flagged automatically with a red badge — click Remove Dupes to strip identical frames in one click.
- Pick a layout and configure settingsChoose Grid, Horizontal Strip or Vertical Strip from the toolbar. Set the column count (leave it at 0 for automatic square packing), adjust padding between frames, and choose a background colour. Additionally, tick Trim to remove transparent borders from every frame, or tick Pow2 to pad the output to power-of-2 dimensions required by many game engines.
- Preview your animationClick Animate to open the animation overlay. Your frames play in sequence at the chosen FPS. Step through frames manually with the arrow buttons, or let the loop run. Furthermore, adjust the FPS slider from 1 to 60 frames per second to preview everything from slow slide shows to fast action animations.
- Export PNG, CSS and JSONClick Download PNG to save the sprite sheet image. Click Download PNG + JSON to get both the image and a TexturePacker-compatible JSON atlas in one action. Additionally, switch to the CSS tab to copy generated class definitions for every frame, ready to paste directly into your stylesheet.
The canvas preview on the right updates live as you change settings. Use the Fit, 50% and 100% zoom buttons to inspect the sheet at different scales. Furthermore, the Fit mode recalculates automatically when you resize your browser window.
What Is a Sprite Sheet?
A sprite sheet is a single image file containing multiple smaller images arranged in a grid or strip. Instead of loading twenty separate PNG files for a character animation, a game or web application loads one sprite sheet. It then reads a coordinate map to display the correct rectangular region for each frame or icon. This technique reduces HTTP requests, GPU draw calls and texture memory overhead. All three improve simultaneously.
The term "sprite" originates from 1970s hardware. Dedicated silicon chips overlaid small bitmaps onto a video signal without touching the background pixels. Furthermore, packing multiple sprites into one file grew from early cartridge memory limits. Fewer files meant faster loading on constrained hardware. Today the performance benefit is equally relevant for mobile web and game development.
Sprite Sheet vs Texture Atlas — What Is the Difference?
The two terms describe the same concept, but with a slight emphasis difference. A sprite sheet typically implies a uniform grid where every frame has the same pixel dimensions. A texture atlas may pack frames of different sizes using an algorithm that finds the most efficient arrangement. It is also called a sprite atlas. Furthermore, both formats use a data file — JSON, XML or CSS. This tells the engine exactly where each image lives within the sheet.
This tool produces both the PNG sheet and a JSON atlas. The atlas records each frame's x, y, width and height in TexturePacker format. Additionally, the CSS output generates class-per-frame rules. This makes the same sheet usable as both a game asset and a web sprite.
How Game Engines Use Sprite Sheets
At runtime, a game engine uploads the entire sprite sheet to GPU memory once. Each animation frame is rendered by adjusting UV coordinates. These define the region of the texture to sample. Furthermore, switching frames requires only a coordinate change. No texture swap is needed. This makes sprite-based animation extremely efficient even on low-end mobile hardware where texture binding is expensive.
Web browsers work similarly via the CSS background-position property. One sprite sheet uploaded once can power hundreds of icons across a page. Moreover, every icon shares one cached image. Consequently, subsequent page loads serve all icons from disk — no additional requests needed.
Sprite Sheet Layouts Explained
Choosing the right layout affects how easily your game engine or CSS code can reference each frame. Furthermore, different workflows and engine APIs favour different arrangements. This tool supports three layouts — Grid, Horizontal Strip and Vertical Strip — each with distinct advantages.
Grid Layout
Grid layout arranges frames in rows and columns. The tool automatically calculates the most square-shaped grid. You can also specify an exact column count. Furthermore, grid layout produces the most compact sheets when frames are uniform. It is the default recommendation for most sprite animation workflows. Unity's Sprite Editor, Godot's AnimatedSprite2D and Phaser's frameConfig all support grid-based sheets natively.
Horizontal Strip
A horizontal strip places all frames in a single row from left to right. This layout works best when frame index must map directly to an X offset. Furthermore, many legacy game engines and HTML5 animation libraries expect horizontal strips for simple animations. The disadvantage is width — a 64px animation with 32 frames produces a 2048-pixel-wide image.
Vertical Strip
Vertical strip stacks frames in a single column from top to bottom. Some older engines and spriting tools prefer this orientation, particularly for side-scrolling character sprites. Additionally, vertical strips are easy to extend — adding a new frame simply means adding a new row at the bottom without changing any existing coordinate values.
How Sprite Sheet Animation Works
Sprite sheet animation works by cycling through frames at a fixed rate. This rate is measured in frames per second (FPS). At 12 FPS, each frame displays for 83 milliseconds. At 24 FPS, each frame displays for about 42 milliseconds. Furthermore, the eye perceives smooth motion at 12–16 FPS. Lower rates feel choppy; rates above 30 FPS offer diminishing returns for most 2D animations.
Common Animation Frame Rates
| FPS | Frame duration | Best for |
|---|---|---|
| 6 | 167ms | Retro pixel art, simple UI animations |
| 8 | 125ms | Classic arcade games, old-school RPGs |
| 12 | 83ms | Standard 2D character animations, web sprites |
| 24 | 42ms | Smooth character movement, cinematic feel |
| 30 | 33ms | High-quality game animations, UI transitions |
| 60 | 17ms | Ultra-smooth effects, particle systems |
Walk cycles typically use 8 frames to complete one full step cycle. Idle animations often use 4–6 frames with subtle movement. Attack animations vary widely. A snappy punch might use 3 frames, whereas a complex sword swing might use 12 or more. Furthermore, the animation preview lets you test any FPS from 1 to 60 before exporting. This confirms timing is correct before you commit.
Frame Order Matters
The order of frames in a sprite sheet determines the animation sequence. Most game engines read frames left-to-right, top-to-bottom. Frame 0 is at (0,0), frame 1 is at (frameWidth,0), and so on. Furthermore, the wrong order means the animation plays backwards or scrambled. Use the drag-to-reorder feature in this tool to arrange frames in the correct sequence before exporting.
CSS Sprites — Full Implementation Guide
CSS sprites are one of the most effective web performance techniques available. A single sprite sheet loaded once can serve every icon on a page. Furthermore, browsers cache images aggressively. Therefore, subsequent page loads retrieve the icon set from disk with zero network requests.
How the background-position Technique Works
Every HTML element can display a portion of a background image using the background-position CSS property. Set background-image to the sprite sheet and adjust background-position. This controls which region shows through the element. Furthermore, setting element width and height to match the sprite size shows exactly one frame. The effect matches individual images but with one HTTP request.
This tool generates the complete CSS for you. The base class sets the shared background image and background-repeat settings. Each frame class adds the width, height and negative background-position values. Furthermore, negative values move the image left or up to reveal the target frame. CSS background-position describes offset relative to the element.
The Modern aspect-ratio Alternative
Modern CSS also supports the background-size property for responsive sprite scaling. Additionally, the newer CSS clip-path and mask-image techniques can achieve similar results without absolute pixel values. However, the background-position approach remains the most widely supported and performant method across all browsers and device types.
When to use CSS sprites
Use CSS sprites for icon sets, UI elements, toolbar buttons and decorative graphics that appear across many pages. Furthermore, icon sets with 10+ images benefit most — the HTTP request saving becomes significant at that scale.
When to use individual files
Use individual files for hero images, content photography and images that change often. Additionally, SVG icons are often a better choice than sprites for scalable UI elements that need to adapt to multiple sizes.
Game Engine Integration Guide
Every major game engine handles sprite sheets differently. However, all share the same approach: load the PNG, load the atlas, and reference frames by name or index. Furthermore, the JSON atlas uses the TexturePacker JSON Hash format. This is the most widely supported format across 2D game frameworks.
⚡ Phaser 3
Load the atlas with this.load.atlas('key', 'sheet.png', 'sheet.json') in your preload function. Create an animation with this.anims.create({ key: 'walk', frames: this.anims.generateFrameNames('key') }). Furthermore, call sprite.anims.play('walk', true) to start the animation. Phaser supports both JSON Hash and JSON Array formats natively.
🎮 Unity
Import the PNG and set Sprite Mode to Multiple in the Inspector. Open the Sprite Editor and use Slice → Grid by Cell Size to divide the sheet into frames. Furthermore, drag the sliced frames into an Animation window to create an AnimationClip. Unity's Animator Controller can then blend between multiple clips.
🌳 Godot 4
Add an AnimatedSprite2D node and click the Frames property to create a SpriteFrames resource. Import your PNG and add frames by referencing the JSON coordinates for precise boundaries. Furthermore, the AnimationPlayer node can control playback speed and transitions between animations programmatically.
🎯 PixiJS
Load the atlas with PIXI.Assets.load('sheet.json') — PixiJS automatically loads the associated PNG. Access frames via PIXI.Texture.from('frameName'). Furthermore, create an animated sprite with new PIXI.AnimatedSprite(frames) and set animatedSprite.animationSpeed = 0.2 to control playback rate.
🕹 GameMaker
Import the sprite sheet PNG using Sprite → Import Strip Image, setting frame count, width, height and offset. GameMaker reads horizontal strips natively — use H-Strip layout in this tool for direct compatibility. Furthermore, the image_index variable controls frame playback within object step events.
🌐 CSS / Web
Copy the generated CSS, adjust the filename to match your server path, and add class="lss-sprite frame-name" to any element. Furthermore, the base .lss-sprite class can be renamed to match your project's CSS conventions before deployment.
For React, Vue and Svelte, generate the JSON atlas. Then convert the frame coordinates into component props or CSS custom properties. Furthermore, the JSON uses standard x, y, w, h keys. These map directly to background-position and background-size, making integration straightforward.
Sprite Sheet Optimisation — Best Practices
A well-optimised sprite sheet loads faster, uses less GPU memory and produces cleaner renders. Furthermore, consistent rules from the start prevent performance problems. These issues become difficult to fix later in a project.
Padding to Prevent Texture Bleeding
Add at least 1–2 pixels of transparent padding between frames. Without padding, bilinear filtering samples adjacent frame pixels at boundaries. This creates coloured edges and halos around sprites in-game. Furthermore, 2px padding is the recommended default for all rendering targets including WebGL, OpenGL ES and DirectX. This tool sets 2px padding by default. Furthermore, increase it to 4px for very small frames where bleeding is more visible.
Trimming Transparent Borders
Enable the Trim option to automatically detect and remove transparent border pixels from every frame. This reduces the total sheet area. Furthermore, it helps most for frames where artwork occupies a small region within a larger canvas. Furthermore, the JSON atlas records both the trimmed dimensions and the original source size. Therefore, your engine positions trimmed sprites correctly with no visual shift.
Power-of-2 Texture Dimensions
Many GPUs require textures with power-of-2 dimensions (128, 256, 512, 1024, 2048 px) for mipmap generation and optimal memory alignment. Enabling Pow2 in the toolbar pads the output canvas to the next power of 2 in both width and height. Furthermore, this avoids rendering glitches on older OpenGL ES 2.0 hardware. That hardware still powers a large share of low-end Android devices in the mobile gaming market.
Duplicate Frame Detection
This tool computes a pixel hash of each frame after trimming and compares hashes across the entire set. Identical frames are flagged with a DUP badge on the thumbnail. Furthermore, removing duplicates reduces sheet area and file size. In animations where a character holds a pose, duplicates can account for 20–30% of all frames. Click Remove Dupes to eliminate them automatically before exporting.
Format and Colour Depth
Always use PNG for sprite sheets. JPEG compression introduces blocking artefacts that look particularly bad around transparent edges and fine pixel art details. Furthermore, PNG supports full alpha transparency, which is essential for sprites that must composite cleanly over different backgrounds. For large sheets where size matters, run the exported PNG through a tool like pngquant or oxipng after downloading. Additionally, this can reduce file size by 40–60% without visual loss.
Frequently Asked Questions
this.load.atlas('playerKey', 'spritesheet.png', 'spritesheet.json'). This loads both files and registers them under the key you choose. Then create an animation with this.anims.create({ key: 'walk', frames: this.anims.generateFrameNames('playerKey', {prefix:'frame-', start:0, end:7}) }). Furthermore, call sprite.play('walk') on your sprite object to start the animation loop.Related Image Tools
Image Resizer & Cropper
Resize and crop images to exact pixel dimensions. Furthermore, lock aspect ratio to keep frame sizes uniform before packing into a sprite sheet.
→Image Compressor
Reduce PNG and JPG file size without visible quality loss. Additionally, compress your exported sprite sheet to save bandwidth without affecting render quality.
→Image Format Converter
Convert frames between PNG, WebP, JPG and other formats before packing. Furthermore, PNG with transparency is the recommended format for all game sprite sheets.
→Aspect Ratio Calculator
Calculate the correct width and height for uniform sprite frames. Moreover, consistent frame dimensions simplify grid-based animation in every game engine.
→Pixel Art Maker
Draw pixel art sprites directly in the browser. Additionally, export individual frames and combine them here into a complete animation sprite sheet.
→CSS Units Converter
Convert pixel values to rem, em and vw for responsive CSS sprite layouts. Furthermore, scaling sprite sheets in fluid web layouts requires accurate unit conversion.
→