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.

Try a downloadable exampleExplore the next steps

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

1

Upload images

Drop or browse for sprites, icons, or textures. Batch upload supported

2

Configure packing

Choose algorithm, padding, max size, trim, and power-of-two settings

3

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

1

Drop in your images

Add any number of PNGs or other images — individual sprites, UI elements, or tiles.

2

Pick a packing layout

The packer arranges images into a tight atlas; adjust padding, power-of-two sizing, and layout options.

3

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.

Four numbered geometric sprite frames arranged horizontally in a 256 by 64 atlas.
Reference layout · 256 × 64 px

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

  1. 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.
  2. 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.
  3. Pack the images. Download the PNG and choose Generic JSON in the export panel for the frame coordinates.
  4. 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

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