SpriteSmith: A Free Browser Tool for Animated PNGs, WebP, GIFs, and Sprite Sheets

SpriteSmith: A Free Browser Tool for Animated PNGs, WebP, GIFs, and Sprite Sheets

If you've ever needed to build an animated PNG from a set of frames, tear apart a GIF to grab individual images, or slice a sprite sheet into pieces, you've probably been bounced between a half-dozen tools to get the job done. Some require installs. Some require accounts. Some choke on transparency.

SpriteSmith is a free browser-based animated image toolkit that handles all of it in one place, with zero installs, zero sign-ups, and everything running locally in your browser.

What SpriteSmith Actually Does

SpriteSmith is built around four core workflows, each in its own tab.

Animate: Build APNG or WebP from Frames

Drop in a set of image frames (PNG, WebP, GIF, TIFF) and SpriteSmith assembles them into an animated PNG or animated WebP. You get full control over timing: set a total duration, a uniform per-frame delay, or go into Custom mode and dial in different delays for individual frames.

Choosing WebP? A quality slider lets you balance file size against visual fidelity. Choosing APNG? You pick whether the output file uses a .png or .apng extension based on your pipeline's needs.

Frames are drag-sortable on desktop and have move buttons on mobile, so reordering is fast on any device. A live preview plays your animation back before you download, and you can set a custom output filename.

Extract: Pull Frames from Animated Images

Drop in an animated PNG, animated WebP, or GIF, and SpriteSmith extracts every frame as a full-size PNG. The key detail: every frame preserves the original canvas dimensions. Sub-region frames get composited at their correct position on the full canvas, so you can feed the output right back into an animation tool without alignment headaches.

A naming panel lets you customize your output: set the base filename, separator character, start number, and zero-padding. A live preview shows you the first and last filenames as you adjust. Download options include a ZIP, batch individual downloads, or an HTML gallery with embedded base64 images. The same naming controls appear anywhere SpriteSmith exports individual frames.

Convert: Switch Between Animated Formats

Drop any animated image (GIF, APNG, or WebP), pick your output format, and convert. GIF to APNG. APNG to WebP. WebP to APNG. Any direction works. Original frame timing carries over by default, or you can override with a custom delay. The WebP path gives you lossy compression with a quality slider, which can dramatically shrink file sizes compared to the lossless APNG output.

This is particularly useful when you have legacy GIF assets with transparency artifacts or color banding, or when you need to swap between APNG and WebP for different platforms.

Sprites: Build and Slice Sprite Sheets

The Sprites tab has two modes.

Build Sheet takes a set of frames and packs them into a single sprite sheet PNG. You can drop individual frame images, or drop an animated PNG, WebP, or GIF and SpriteSmith will extract the frames automatically. Choose grid layout (with configurable columns), horizontal strip, or vertical strip, with optional pixel padding between frames. The metadata toggle generates CSS classes with background-position values or a JSON atlas with frame coordinates, dimensions, and grid info. When metadata is enabled, the download bundles the sprite sheet and metadata file together as a ZIP.

Slice Sheet does the reverse. Drop in an existing sprite sheet, specify columns and rows (or frame width and height), and SpriteSmith overlays a grid preview on the source image so you can verify your slice boundaries before cutting. Each cell gets extracted as an individual PNG with full naming controls: base name, separator, start number, and padding.

When to Use Which Format

These formats exist because GIF is technically terrible: 256 colors, no semi-transparency, and bloated file sizes for what you get. People use GIF because everything supports it, not because it's good. Here's when each alternative actually makes sense.

APNG is the go-to for animated stickers and transparent overlays. Telegram, LINE, iMessage, and Facebook Messenger all use APNG for sticker packs. It's the only animated format with full 24-bit color and smooth alpha transparency that works in a plain <img> tag with no JavaScript. That makes it ideal for eLearning too: if you need an animated arrow, pulsing highlight, or step-by-step reveal in Articulate Storyline or Rise, APNG drops in where GIF would have jagged edges. The tradeoff is file size. APNG is lossless, so animations can get heavy.

Animated WebP solves the file size problem. Lossy animated WebP can be 50-80% smaller than the equivalent APNG while keeping transparency. Google pushed it hard, and it's now the default for Android stickers, e-commerce product animations, and any web context where bandwidth matters. If you need animation plus transparency at small file sizes, WebP is the pragmatic choice.

Sprite sheets are for game development and custom HTML interactions. Unity, Phaser, Godot, and most 2D engines consume sprite sheets directly. CSS sprite sheets still see use for icon sets and UI elements. In eLearning, a sprite sheet is lighter and more controllable than loading dozens of separate image files for a JavaScript-driven animation.

GIF is what you're converting away from. SpriteSmith's Convert tab exists specifically for upgrading legacy GIF assets to formats that handle alpha properly.

Why Not Just Use an Existing Animated Image Tool?

Most free options fall into two categories: online tools that upload your files to a server, or desktop apps that require installation.

SpriteSmith runs entirely in your browser. Your images never leave your device. There's no file size limit beyond what your browser can handle, no watermarks, no "upgrade to pro" gates. It works offline once loaded.

The other gap it fills is format flexibility. Most free APNG tools only handle APNG. Most sprite sheet tools only handle sprites. SpriteSmith covers animated PNGs, animated WebP, GIF conversion, and sprite sheets in one workflow, so you're not context-switching between different tools.

Who Is This For?

eLearning developers who need animated overlays with clean transparency. Game developers assembling sprite sheets for character animations. Sticker creators building APNG packs for Telegram or iMessage. E-commerce teams creating product animations that load fast. Anyone converting aging GIF assets to modern formats with proper alpha transparency.

If you've been solving these problems with command-line tools like ImageMagick or ffmpeg, SpriteSmith gives you the same output with a visual interface and live preview.

Try SpriteSmith

SpriteSmith is free to use at natestoker.com/webtools. No account required. Drop your files and go.

Have a feature request or find a bug? Reach out through the site. This tool is actively maintained and new features are added based on community feedback.