Convert MP4 to an Animated GIF or APNG, in the Browser

I generate a lot of short clips that need to end up as small looping animations. An AI tool spits out a four-second MP4 of a creature idling, or I screen-capture a shader doing something, and now I need that motion as a tidy loop I can drop into a wiki page, a Discord, an itch.io devlog, or straight into a 2D game as a sprite. For years my reflex was to open some heavy editor or, worse, paste the file into a website and wait for it to upload, process on someone's server, and hand me back a watermarked download. That routine is unnecessary. A modern browser can decode the video and encode a GIF or APNG locally, and that is exactly what the Video Frame Extractor does.

Nothing leaves your machine. The video is read by the page, the frames are pulled in the canvas, and the encoder runs in your tab. No upload, no signup, no "your file is 14th in the queue." For a creature loop you may not want to publish yet, that locality is the whole point.

The quick version

Here is the entire workflow, start to finish, in the tool:

1. Load the video. Drop your MP4 (or WebM, or MOV) onto the page. It plays back in the browser; nothing is sent anywhere.
2. Pick the loop range. Scrub to where the motion should start and hit Set Start. Scrub to the end of the cycle and hit Set End. You want one clean cycle here — the bit that will tile against itself when it loops.
3. Set the fps. Choose how many frames per second to sample out of the range. For a small game creature I usually live somewhere between 8 and 15; higher looks smoother but every extra frame is weight in the final file.
4. Export. Click Export GIF (loop) or Export APNG (loop). The encoder runs in the tab and downloads the result. That's it.

The honest part of step 2 is that getting a seam-free loop is its own small craft — the wrong start/end pair gives you a visible hitch every cycle. If that's biting you, I wrote up the fixes in the seamless sprite loop guide. Here I'm assuming your range already loops cleanly and the question is just which format and what settings.

GIF or APNG — they are not the same animal

The tool gives you both export buttons for a reason. They solve different problems, and picking wrong is the most common way people end up unhappy with the output.

GIF: maximum compatibility, minimum color

GIF is the format that plays literally everywhere. Every browser, every chat app, every old phone, and — the part people forget — the Windows photo viewer will happily animate a GIF when you double-click it. That ubiquity is its superpower. The price is the color budget: GIF caps out at 256 colors per frame, and its transparency is 1-bit, meaning a pixel is either fully opaque or fully gone. There is no soft edge.

For pixel art this is a non-issue and often an advantage — your sprite probably uses a handful of colors anyway, and hard-edged transparency is exactly what you want around a crisp silhouette. For a quick preview, GIF is the path of least resistance. Where it falls apart is anything photoreal or smoothly shaded: gradients color-band into ugly stair-steps, and a soft, anti-aliased outline gets a jagged fringe because there's no partial transparency to feather it.

APNG: full color, soft edges, heavier file

APNG is the quality option. It carries full 24-bit color plus a real alpha channel, so you get smooth gradients and soft transparency — clean, feathered edges that sit nicely on any background. If your loop is rendered, shaded, or has a glow that needs to fade out rather than clip, APNG is the one to reach for.

Two catches. First, it uses the .png extension, which fools Windows: double-click an APNG and the default viewer shows a single still frame, because as far as the OS is concerned it's just a PNG. The animation is real — open the file in a browser and it plays. This trips up nearly everyone the first time; it is not a broken export. Second, APNG is heavier than GIF for the same content, because it is essentially lossless. That's a feature when you want quality and a problem when you want a 40KB file, which brings me to the part that actually matters day to day.

Keeping the file small (this is where most of the win is)

The single biggest lever on file size is not the format — it's resolution. A loop exported at 512×512 when you'll display it at 96×96 carries roughly 28× more pixels than you need, every frame. Downscale the export to the size you actually use. If the creature renders at 64px tall in your game, export it near that size. This one habit does more than every other trick combined. After that:

• Drop the frame count. Fewer fps and a tighter loop range both directly cut weight. A creature idle rarely needs more than 8–12 frames to read as alive.
• For APNG, drop the color count. APNG can be lossless, but it doesn't have to be. For pixel art, 64–128 colors is usually indistinguishable from the full palette and far lighter than true lossless. I reach for this constantly — it gets you APNG's clean edges without APNG's full bulk.
• Trim dead frames. If the first and last few frames are nearly identical, tighten your Start/End so you're not paying to store a pause.

My default for a small game creature: downscale to display size, 10–12 fps, APNG at 96 colors if I need soft edges, plain GIF if the silhouette is hard-edged pixel art. That covers most of what I make.

Where this sits in the bigger workflow

A looping GIF or APNG is the delivery format — a self-contained animation you hand to a person or a webpage. It is not always what your game engine wants. Most 2D engines prefer individual frames or a packed sheet so they can control timing and atlas the art. If that's your target, pull a PNG sequence instead — every frame as its own file, ready to import.

If your clip came off a green or blue screen, knock the background out before you export, or the matte color travels straight into your loop; the remove the background guide walks through the chroma key. And if you're still on the fence between GIF, APNG, and a sprite sheet, the GIF vs APNG vs sheet comparison lays out the tradeoffs in more detail than I can fit here.

FAQ