Animated Frame Preview
Preview frame-by-frame animation from a folder of images (GIF build requires an external encoder).
How to Use
- Drop multiple images into the input area. They'll be ordered by filename — name them frame-001.png, frame-002.png, etc. for predictable ordering.
- Adjust FPS (frames per second) — typical animations run 12–24 FPS; slower for slideshow effects, faster for smooth motion.
- The animation previews live in the right panel.
- To produce an actual .gif file, use the export button (uses gif.js library) or download frames + encode with FFmpeg or another tool.
- Preview only mode is fast; full GIF encoding takes a few seconds depending on frame count and dimensions.
- For best results, all frames should have identical dimensions; the first frame sets the canvas size.
Notes
Frequently Asked Questions
What FPS should I use?
<strong>10–15 FPS</strong> is the sweet spot for GIFs — smooth enough to look animated, low enough to keep file size manageable. Cinema is 24 FPS; modern web video is 30–60 FPS. GIFs above 20 FPS get very large quickly because each frame must be encoded separately. For slideshow effects (1–3 seconds per frame), use FPS 1–2 with frame delay.
Why are GIFs so big?
GIF is an old format (1987) that uses lossless LZW compression and a 256-color palette per frame. Modern alternatives compress much better: <strong>WebP animated</strong> (50% smaller than GIF), <strong>APNG</strong> (similar to WebP, transparent), <strong>MP4 / WebM video</strong> (90%+ smaller). For social media, MP4 is increasingly preferred over GIF because it's smaller and supports audio.
How many frames is too many?
GIF has practical limits around 100–200 frames before file size becomes unwieldy. A 500x500 GIF at 100 frames is typically 5–15 MB; the same content as MP4 might be 500 KB. If you have many frames, consider exporting as video instead.
Will my GIF have transparency?
Only if frames are PNG with transparent backgrounds. JPEG frames will become opaque. GIF supports binary transparency (a pixel is either fully visible or fully invisible — no partial alpha). For partial transparency in animation, use APNG or WebP animated.
What's the difference between GIF and APNG?
APNG (Animated PNG, 2008) uses PNG's much better lossless compression and supports full alpha transparency, 24-bit color (vs. GIF's 8-bit), and smaller files. Browser support is universal in 2026. The catch: many image-hosting platforms still don't accept APNG and re-encode to GIF or MP4.
How do I make a GIF from a video?
Use the GIF from Video tool to extract frames at a chosen frame rate, then bring them into this tool. Or use FFmpeg directly: <code>ffmpeg -i input.mp4 -vf fps=10 frame_%03d.png</code> extracts 10 frames per second as numbered PNGs.
Common Use Cases
Tutorial GIFs
Combine screenshots into an animated walkthrough for documentation, blog posts, or how-to articles.
Stop-motion animation
Combine frame-by-frame photos into a smooth animation — classic stop-motion in browser.
Product demos
Show a product from multiple angles by combining a series of photos taken at intervals.
Reaction images
Combine three or four reaction shots into a quick reaction GIF for chat platforms.
Pixel art animation
Combine sprite frames into an animated character for game development or pixel-art portfolios.
Time-lapse compilation
Combine timelapse photos (sunrise, plant growth, construction progress) into a quick animation.
Last updated: