Sprite Sheet Generator

Combine frames into a single sprite and export CSS/JSON frame definitions.

Overview

Generate a sprite sheet for web/games in the browser, and export the sprite map with frame coordinates as JSON/CSS.

How to use

  1. Drop same-sized frame images.
  2. Configure rows/cols, padding, and ordering (row/column-major).
  3. Select output format (PNG/WebP) and compression, then save with CSS/JSON.
  4. (Optionnel) Définir un préfixe et une règle de numérotation pour les noms de frame.

Cas d'usage

  • Sprites d'icônes pour animations CSS.
  • Combiner en une seule image des séquences (marche/attaque) de jeux 2D.
  • Boucles légères comme alternative à Lottie/APNG.

Tips & knowledge

  • Sprites reduce HTTP requests and help performance.
  • Trim transparent margins to reduce size.
  • Control animation timing with CSS steps() or JS timers.

Related tools

Sequence to AnimationAdvanced Converter