How to Create a GIF from Images: Complete Step-by-Step Tutorial
GIFs turn a sequence of still images into a looping animation — no video player needed, no autoplay permission required. Here is how to make one from scratch, optimize it for any platform, and keep the file size under control.
Step 1: Prepare Your Images
A GIF is a sequence of frames played in order. The quality of your output depends entirely on the frames you start with. Here is what to get right:
- Use consistent dimensions. All frames should be the same width and height. If they are not, the GIF maker will need to crop or stretch them, which degrades quality. Use Vizua's Resize Image tool to match all frames to the same size before you start.
- Choose the right number of frames. For a smooth 2-second animation at 15 fps, you need 30 frames. For a simple slideshow with long pauses, 5-10 frames are enough. More frames means larger files.
- Use PNG or high-quality JPEG. Start with the best quality source you have. The GIF format will reduce colors anyway, so you want clean source material. Avoid starting from images that are already heavily compressed.
- Name files in order. Most GIF makers sort frames alphabetically or by filename. Naming your files
frame-01.png,frame-02.png, etc. ensures the correct sequence.
Step 2: Create the GIF
Open Vizua's GIF Maker, drag your image files into the drop zone, and configure these settings:
- Frame order. Drag frames to rearrange them if needed. The first frame is what viewers see before the animation starts (on platforms that don't autoplay).
- Frame delay. This controls how long each frame is displayed. The GIF format measures delay in hundredths of a second — a delay of 10 means 100ms (0.1 seconds), which equals 10 fps. Common settings:
- 7 (≈14 fps) — smooth animation for medium motion
- 10 (10 fps) — standard for simple animations and slideshows
- 50 (2 fps) — slow slideshow, good for before/after comparisons
- 100 (1 fps) — one frame per second, for step-by-step demonstrations
- Loop count. Set to 0 for infinite loop (standard for web GIFs), or specify a number to stop after N plays.
- Output size. Resize during export to reduce file size. 480px wide covers most use cases.
Vizua processes everything in your browser — your images are never uploaded to a server.
Step 3: Optimize for File Size
A raw GIF can be massive. A 30-frame animation at 800px wide with 256 colors easily tops 10 MB. Here is how to bring it down:
| Technique | File size impact | Quality impact |
|---|---|---|
| Reduce dimensions (800px → 480px) | ~40-60% smaller | Minimal on mobile screens |
| Reduce colors (256 → 128) | ~20-30% smaller | Usually invisible for illustrations |
| Reduce colors (256 → 64) | ~40-50% smaller | Noticeable on photos, fine for graphics |
| Remove duplicate frames | Varies (can be 10-50%) | None — identical frames add nothing |
| Apply lossy compression | ~30-60% smaller | Some noise/dithering, often unnoticeable |
| Cut unnecessary frames | Proportional to frames removed | Animation becomes slightly less smooth |
The most effective approach: resize first, then reduce colors, then apply lossy compression. In most cases, you can cut file size by 60-80% while keeping the GIF visually identical at normal viewing size.
Platform Size Limits and Recommendations
Each platform has its own rules. Here are the current limits you need to know:
| Platform | Max file size | Recommended dimensions | Notes |
|---|---|---|---|
| Twitter/X | 15 MB (web), 5 MB (mobile) | 480-720px wide, 16:9 or 1:1 | Auto-loops in timeline. Aim for under 5 MB for universal compatibility |
| Discord | 25 MB (file upload), 256 KB (emoji) | Any size for uploads; 128×128px for emoji | Emoji GIFs need extreme optimization to fit 256 KB |
| Slack | 128 KB (custom emoji) | 128×128px for emoji | The strictest limit — use minimal frames and heavy optimization |
| 15 MB (web), 5 MB (mobile) | 480px wide minimum | Shared as video on mobile | |
| GIPHY / Tenor | 100 MB (upload) | 480px wide, under 200 frames | 15-24 fps recommended, under 6 seconds for best engagement |
The safest target for general sharing: 480px wide, under 3 MB. This loads fast on any device, works on every platform, and still looks sharp on mobile screens.
Working with Existing GIFs
Sometimes you already have a GIF and need to modify it. Two common tasks:
- Extract frames from a GIF. Use Vizua's GIF to Frames tool to split any GIF into individual images. This is useful for editing specific frames, removing unwanted content, or repurposing frames for a new animation with different timing.
- Resize an existing GIF. If your GIF exceeds a platform's size limit, use Resize Image to reduce the dimensions. Shrinking from 800px to 480px can cut file size by half or more.
For more on optimizing images for specific platforms, see our guide on social media image sizes.
Frequently Asked Questions
What is the best frame rate for a GIF?
For most use cases, 10-15 frames per second (fps) hits the right balance between smoothness and file size. Simple animations like rotating logos work at 10 fps. Medium motion like walking or talking looks good at 15 fps. Fast motion or video clips may need 20-24 fps. Going above 50 fps is pointless — browsers will default to 10 fps playback if you try.
How do I keep my GIF under 5 MB for Twitter?
Reduce the number of frames (aim for under 60), lower the dimensions to 480px wide or smaller, reduce the color palette to 128 colors or fewer, and use lossy compression. Every frame in a GIF stores a full color table, so fewer frames and fewer colors directly reduce file size. Vizua's GIF Maker lets you control all these settings before export.
Can I make a GIF from just 2 images?
Yes. A GIF with two frames alternating creates a simple before/after or toggle effect. Set the delay to 500-1000ms (0.5-1 second) per frame so viewers can see each image clearly. This is a popular format for product comparisons, makeover reveals, and A/B demonstrations.
Why is my GIF file so large?
GIF file size depends on three main factors: number of frames, pixel dimensions, and color complexity. A 100-frame GIF at 800px wide with 256 colors can easily exceed 10 MB. To shrink it: reduce dimensions (480px is often enough), cut unnecessary frames, limit colors to 64-128, and apply lossy compression. Removing 20% of colors typically saves significant space with no visible quality loss.
What is the maximum number of colors in a GIF?
Each frame in a GIF can use up to 256 colors from a palette. This is a hard limit of the GIF format. For photographic content with gradients and subtle tones, this limit causes visible banding. For illustrations, logos, and text-based animations, 256 colors are more than enough. Reducing to 64 or 128 colors often cuts file size substantially with minimal visual impact.
Create your GIF now
Turn images into animated GIFs — free, private, runs in your browser.