Online Tool Store
· 5 min read
How to Turn a Video Clip Into an Animation File
Heshan Fernando
Co-founder & COO
You have a four-second screen recording showing a UI interaction, and you want to drop it into a document or a README where a video player would be overkill. A GIF is the reflex answer, and then you look at the result: the gradient in your interface has turned into visible banding, and the file is 6MB anyway.
That’s the specific situation where an animated PNG is a better fit — and also the situation where a lot of people don’t know it’s an option.
What APNG actually is
APNG is an extension of the PNG format that stores multiple frames with timing information, producing an animation. Crucially, it inherits PNG’s properties: full 24-bit color and real alpha transparency.
The comparison that matters is with GIF. GIF is limited to a 256-color palette per frame and only supports fully-on or fully-off transparency. For photographic content or anything with gradients, that palette limit is exactly where the banding and dithering come from.
APNG has no palette limit and supports partial transparency, so a soft shadow over a page background actually looks soft. The trade-off is file size: for content with lots of color detail, an APNG can be considerably larger than the equivalent GIF, because it isn’t discarding color information to get small.
Why people get stuck here
- Assuming GIF is the only option. It’s the default in most people’s heads, and often the wrong one for interface recordings.
- Frame rate and length. Animation formats store every frame. Ten seconds at 30fps is 300 frames, and the file size reflects that.
- Dimensions. A full-screen recording exported at native resolution produces an enormous file for something displayed at 600px wide.
- Expecting video-like compression. Video codecs compress across frames very aggressively. Animation formats do far less of this, so they’re always larger for the same clip.
- Where it’ll be displayed. Some platforms handle animated PNGs well and others fall back to showing only the first frame.
| Format | Best For | Strength | Watch Out |
|---|---|---|---|
| APNG | UI recordings, gradients, transparency | Full color and real alpha | Larger files than GIF |
| GIF | Simple graphics, flat colors | Supported essentially everywhere | 256 colors, hard-edged transparency |
| Video (MP4/WebM) | Anything over a few seconds | Far smaller for the same content | Needs a player, not inline everywhere |
What good preparation looks like
Trim ruthlessly first
Every frame costs size. A four-second clip that says the same thing as a twelve-second one is three times cheaper, and usually clearer.
Resize to display size
Export at the width it’ll actually be shown at, or at most twice that for high-density displays. Converting at 1920px wide for a 600px slot wastes most of the file.
Drop the frame rate
Interface recordings are usually fine at 12–15 frames per second. Halving the frame rate roughly halves the frame count, and for screen content the difference is often barely noticeable.
Common mistakes to avoid
- Converting a long clip. If it’s more than about five seconds, a video file is almost certainly the right answer.
- Keeping the original resolution. This is the single biggest driver of oversized output.
- Expecting transparency to survive from a video source. Most video formats don’t carry an alpha channel, so a video source generally can’t produce a transparent animation.
- Not testing where it’ll be posted. Check that your target platform actually animates it rather than showing a still.
- Using it for photographic footage. Real-world video has too much color variation per frame; the file size becomes impractical.
How to do it with Video to APNG Converter
Online Tool Store’s Video to APNG Converter prepares video clips for APNG-style animation export in your browser — the file is processed locally and never uploaded, which is worth knowing for unreleased product recordings.
- Trim the clip first, to the shortest version that still communicates the thing.
- Resize to the width it will actually be displayed at.
- Reduce the frame rate — 12 to 15 is usually plenty for screen recordings.
- Convert, then check the resulting file size before you commit to it.
- If it’s still too large, go back and cut the length rather than the quality.
- Test it in the destination — the document, the README, the page — before considering it done.
The Video Trimmer, the GIF Maker, and the Video to WebP Converter cover the neighbouring options in the tools directory.
Frequently asked questions
When should I use APNG instead of GIF?
When color fidelity or soft transparency matters — interface recordings with gradients, anything with a drop shadow, anything where GIF’s dithering is visible. For flat-colored simple graphics, GIF is smaller and equally good.
Why is my output file so large?
Almost always resolution or length. Animation formats store frames rather than compressing across them, so file size scales directly with pixels times frames. Halve the width and halve the frame rate and you’ll typically cut the size by roughly three quarters.
Is my video uploaded to a server?
No. The converter runs entirely in your browser, so the clip is processed on your own machine with no upload and no account.
Final thought
Trim it, shrink it, drop the frame rate — in that order. If the file is still too big after all three, what you have is a video, and it should be one.