How to Create an Animated GIF from Images
Animated GIFs are used everywhere — product demos on landing pages, step-by-step tutorials, social media posts, reaction memes, and website banners. Creating one from a sequence of images used to require Photoshop or specialised desktop software. Now you can make a GIF in your browser in under a minute, with full control over frame order, frame delay, and output dimensions. The most important settings: frame delay controls playback speed (100ms = 10fps for smooth motion, 200–500ms for slideshow-style transitions); canvas size should stay under 800px wide for social media to keep file sizes reasonable; and frame count of 15–30 frames is the sweet spot between smooth animation and manageable file size. GIF is limited to 256 colours per frame, so photos with gradients may show colour banding — for photorealistic animations, use the Video to GIF tool to convert an MP4 clip instead, which produces far better colour fidelity. For image sequences like product mockups, logo reveals, or step-by-step annotations, GIF from images is the simplest and most universally compatible approach.
Quick Answer
Animated GIFs are used everywhere — product demos on landing pages, step-by-step tutorials, social media posts, reaction memes, and website banners. Creating one from a sequence of images used to require Photoshop or specialised desktop software.
Try it now — free, no signup
Your images stay on your device. Nothing is uploaded to any server.
Step-by-Step Guide
6 steps · takes under 1 minute
Prepare your frames
Each image you upload becomes one frame in the GIF. For a smooth animation, use images of the same size and format — JPG or PNG work best. If you're converting a video clip to GIF, use the Video to GIF tool instead.
Open the GIF Maker
Go to the GIF Maker tool. It runs entirely in your browser using gif.js — no upload, no account.
Upload your images
Drag and drop all your frame images at once, or click to browse and select multiple files. The images appear in upload order.
Set the frame delay
Frame delay is the pause between each frame, measured in milliseconds. 100ms = 10 frames per second (fast). 200ms = 5 fps (standard animation). 500ms = 2 fps (slow slideshow). Start with 200ms and adjust.
Reorder frames if needed
Drag the frame thumbnails to reorder them. Make sure the sequence flows correctly before generating.
Generate and download
Click Generate GIF. The browser processes all frames — larger images take longer. When complete, preview the animation and click Download GIF.
100% Private — Zero Uploads
ImgToolkit runs entirely in your browser using the Canvas API. Your images are never sent to a server, never stored in the cloud, and never seen by anyone else. This makes it safe for sensitive documents, client work, medical imagery, and confidential screenshots.
Pro tip
Use 75–85% quality for web images — you get 60–80% smaller files with no visible difference at normal screen sizes.
GIF vs Modern Formats — Size Comparison
Why converting from GIF dramatically reduces file size
| Format | Quality | File Size | Notes |
|---|---|---|---|
| GIF (original) | 256 colors | 820 KB | Limited palette, large for photos |
| JPG (converted) | Full color | 180 KB | −78% · Full 16M colors |
| WebP (converted)BEST | Full color | 120 KB | Smallest, best quality |
Based on a 1080×1080px photo. Results vary by image content and complexity.
Related Free Tools
All tools run in your browser — no account or upload needed
Frequently Asked Questions
8 questions answered