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. (Opsional) Atur prefiks dan aturan penomoran nama frame.

Kegunaan

  • Sprite ikon untuk animasi CSS.
  • Menggabungkan urutan berjalan/menyerang game 2D menjadi satu gambar.
  • Loop ringan sebagai alternatif 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