Sprite Sheet Generator

About Sprite Sheet Generator

Last updated: May 2026

OptiPix Sprite Sheet Generator combines multiple images into a single optimized sprite sheet, with ready-to-paste CSS, JSON coordinates, and SCSS variables. Pick a layout: horizontal strip, vertical strip, grid (custom column count), or packed (bin-packed for minimum wasted space). Set padding between sprites to prevent edge bleeding. The output is a single PNG sprite sheet plus generated CSS for every sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), a JSON coordinate map, and SCSS variables. Retina @1x and @2x scaling supported. Each sprite is named after its source filename. Everything runs locally - your images never leave your device. Built for game developers, web developers using CSS sprites, and anyone who wants to bundle small icons into a single network request.

How It Works

Each input image is loaded into memory; the chosen layout algorithm (strip, grid, or shelf bin-pack) computes per-sprite (x, y, w, h) coordinates; the sprite sheet is rendered onto a canvas; CSS / JSON / SCSS are generated from the same coordinate map.

Use Cases

• •Bundle UI icons into a single PNG + CSS sprite sheet
• •Create a sprite atlas for a 2D game in Phaser or Pixi
• •Combine social media icons into one CSS sprite for a faster site
• •Pack character animation frames into a horizontal strip
• •Build a retina-ready @2x sprite sheet from source images

You Might Also Like

If you find Sprite Sheet Generator useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.