Images to Atlas
Upload multiple images and pack them into an optimized texture atlas.
What this tool supports
Pack separate sprite images into one or more PNG texture atlases, with frame coordinates and optional trimming and duplicate detection.
Formats, controls, browser limits, and file privacy
- Input
- PNG, JPEG, WebP, GIF, and BMP images that your browser can decode. Animated GIFs are treated as a still image here.
- Output
- PNG sheets with Generic JSON, Unity, Godot, Phaser, PixiJS, Starling XML, Spine, or CSS data. Engine setup depends on the selected format; follow the linked import guides.
- Controls
- MaxRects, Shelf, Grid, and Polygon layouts; padding, extrusion, scale, power-of-two sizing, transparent trimming, and optional duplicate detection.
- Limits and browser
- Maximum atlas size presets range from 256 to 8192 px. Available memory and browser canvas limits still apply. Multiple sheets may be needed; reduce a sprite if it exceeds your chosen sheet size.
- File privacy
- Your source files are processed in this browser and are not uploaded for conversion. Site analytics and optional forms use network requests.
Drag & drop your images here
Upload sprites, icons, or textures to pack them into an optimized texture atlas with metadata export.
Or click to browse
PNG, JPEG, WebP, GIF, BMP
How it works
Upload images
Drop or browse for sprites, icons, or textures. Batch upload supported
Configure packing
Choose algorithm, padding, max size, trim, and power-of-two settings
Export atlas
Download PNG + metadata for Unity, Godot, Phaser, PixiJS, and more
Common questions
What image formats are supported?
PNG, JPEG, WebP, GIF, and BMP. Transparency is preserved for PNGs and WebP.
How does the packing algorithm work?
Choose between Shelf, MaxRects, or Grid. MaxRects usually gives the tightest fit.
Is there a limit on image count?
No hard limit. For very large sets, enable multipack to split across multiple atlases.
Does it detect duplicate sprites?
Yes — enable alias detection to merge identical images and save atlas space.
How It Works
Drop in your images
Add any number of PNGs or other images — individual sprites, UI elements, or tiles.
Pick a packing layout
The packer arranges images into a tight atlas; adjust padding, power-of-two sizing, and layout options.
Export atlas + JSON
Download the packed PNG and a metadata file with each sprite's coordinates for your engine.
Pack four PNGs into a predictable strip atlas
Use the same four 64 × 64 frames as the GIF example. Grid packing makes their coordinates easy to inspect; this example demonstrates layout, not a compression benchmark.

Files to follow along
These geometric sample assets are free to use and modify, including in commercial projects. No attribution is required. Sample notes and settings.
Reproduce the result
- Download and unzip the sample frames. Add frame-01.png through frame-04.png in numerical order. The ZIP must be extracted before adding the images.
- Choose Grid (Uniform), maximum size 256, scale 100%, padding 0, and extrusion 0. Turn transparent trimming and duplicate detection off; leave power-of-two sizing on.
- Pack the images. Download the PNG and choose Generic JSON in the export panel for the frame coordinates.
- Compare the output to the reference strip and JSON. Zero padding is used here to simplify the coordinates; choose padding and extrusion appropriate to your game's texture filtering for production artwork.
Expected result
One 256 × 64 PNG with four 64 × 64 regions at x = 0, 64, 128, and 192, all at y = 0. The images keep their original dimensions because scale is 100% and trimming is off.
Follow the same sample through all three tools in our convert, split, and repack walkthrough.
Continue your sprite workflow
- Choose padding for pixel art
Understand scale, spacing, and texture bleeding before changing the example's zero-padding settings.
- Use an atlas in Phaser
Compare uniform sprite sheets with metadata-driven atlas loading.
- Estimate texture memory
Compare sheet dimensions and texture formats before increasing the maximum atlas size.
Frequently Asked Questions
One atlas means one texture bind and fewer draw calls, which is significantly faster for GPUs than rendering from dozens of separate images.
Yes. The rectangle packer places mixed-size images efficiently and records each one's exact position and size in the exported metadata.
Enable duplicate detection to pack identical sprites once. The export can include alias names for the shared region; check how your chosen metadata format and engine loader handle those aliases. Duplicate detection is off by default.
Padding inserts empty pixels between sprites; extrusion copies each sprite's edge pixels outward into that gap. Both fight texture bleeding — the thin seams or neighbor-sprite slivers that appear when the GPU samples across a sprite's edge. 1–2px of each is a good default; increase it if you zoom sprites or use mipmaps.
MaxRects is the best default — it fills gaps between mixed-size sprites for the tightest atlas. Shelf is nearly instant and fine for quick iteration. Grid forces every sprite into a uniform cell, which wastes space but is required by engines that slice by rows and columns instead of reading a data file.
Yes. Trimming crops each sprite's transparent border before packing, and the metadata records the original size and offset so your engine restores exact positioning at render time. The only time to leave it off is when your engine ignores the metadata and expects untrimmed, uniform cells.
2048×2048 for anything targeting mobile or WebGL — it's supported everywhere. Go to 4096 only when you control the hardware floor. If sprites don't fit, it's usually better to split atlases by scene or purpose than to push size: you'll also get finer control over what stays in memory.
Want the full workflow, engine tips, and format details? Read the Texture Atlas Generator guide