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. Prepare all frames on the same canvas so their alignment and crop are intentional. Use Vizua's Resize Image tool to create suitable copies before you start, and inspect any resampling.
- Choose the right number of frames. A two-second sequence sampled at 15 fps contains 30 frames. A slideshow may need far fewer. Additional distinct frames usually add data, but encoder optimization and how much changes between frames also affect size.
- Use a clean source. Start with the best available originals. GIF palette conversion can add banding and dithering, while an already compressed source can carry artifacts into every frame.
- Name files in order. A pattern such as
frame-01.png,frame-02.png, and so on makes the intended sequence easier to preserve and audit, even when an interface also supports manual reordering.
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) — a faster starting point, subject to browser delay clamping
- 10 (10 fps) — a moderate starting point for simple motion
- 50 (2 fps) — a slow slideshow starting point
- 100 (1 fps) — one frame per second for content that needs reading time
- Loop count. Set to 0 for infinite loop (standard for web GIFs), or specify a number to stop after N plays.
- Output size. Export near the largest size at which the GIF will actually be displayed. A smaller canvas can reduce file size substantially, but the correct width depends on the destination and viewing context.
Vizua builds the GIF from the selected images in your browser and does not send them to our image-processing server. The page can still use the network for required code and site services.
Step 3: Optimize for File Size
Animated GIF can become large because it combines many indexed images and timing information. Optimize against the actual source and destination instead of assuming a frame count or width guarantees a particular size.
| Technique | File size impact | Quality impact |
|---|---|---|
| Reduce dimensions (800px → 480px) | Often a large reduction; source-dependent | Removes spatial detail and may soften text or edges |
| Reduce colors (256 → 128) | Can reduce palette and coding cost | May add banding or dithering; inspect the loop |
| Reduce colors (256 → 64) | Can help more on suitable artwork | More likely to alter gradients, photos, and antialiasing |
| Remove duplicate frames | Depends on encoder optimization and frame disposal | None if timing and displayed pixels truly remain equivalent |
| Apply lossy compression | Source- and encoder-dependent | Can introduce visible noise, color changes, or edge damage |
| Cut unnecessary frames | Proportional to frames removed | Animation becomes slightly less smooth |
A practical order is to crop and resize first, remove unnecessary frames, then test palette reduction and any lossy option. Change one variable at a time and compare the complete loop at its intended display size.
Platform Size Limits and Recommendations
Upload limits and animation handling can vary by account, plan, app, surface, and date. This table, reviewed on July 17, 2026, tells you what to verify rather than freezing volatile numbers into a permanent preset.
| Platform | Max file size | Recommended dimensions | Notes |
|---|---|---|---|
| Twitter/X | Verify in the current web or mobile composer | Match the intended post crop and display size | Web and mobile upload paths can behave differently |
| Discord | Depends on account, server, and upload type | Use the current emoji or attachment specification | Custom emoji and ordinary attachments have different rules |
| Slack | Verify the current custom-emoji limit | Prepare a small square canvas for emoji use | Workspace settings and product changes can affect acceptance |
| Verify in the intended publishing surface | Match the current placement and crop | The service may transform or present animation differently | |
| GIPHY / Tenor | Check the current creator or upload documentation | Use the destination's current quality guidance | Search, moderation, and delivery requirements differ by service |
There is no single file that is guaranteed to work everywhere. Keep a high-quality source, make destination-specific exports, and test the actual upload path before producing a large campaign.
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 prepare a smaller canvas where supported. The saving depends on frame content and encoder behavior, so verify the exported file rather than assuming a fixed percentage.
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?
There is no universal best rate. Ten to 15 frames per second is a useful starting range for many web animations, while slideshows can be much slower and fast motion may need more frames. Preview the actual loop on its target device: browsers can clamp very short GIF delays, and extra frames increase file size.
How do I make a GIF fit a social platform's upload limit?
Check the platform's current limit in the exact app or composer you will use, because limits and GIF handling can change. Then reduce pixel dimensions, remove unnecessary frames, simplify the palette, or use a shorter loop until the file fits. Inspect motion, text, gradients, and edges after every export instead of relying on one fixed preset.
Can I make a GIF from just 2 images?
Yes. Two alternating frames can create a before/after or toggle. A delay of 500–1000 ms per frame is one readable starting range, not a rule; adjust it for the content and test whether viewers have enough time to understand both frames. Avoid rapid flashing that could create an accessibility hazard.
Why is my GIF file so large?
Pixel dimensions, frame count, changed area between frames, palette complexity, dithering, and encoder choices all affect GIF size. Start by cropping and resizing to the actual display size, then remove unnecessary frames and test a smaller palette. The saving and visible impact depend on the animation, so compare the result with the source.
What is the maximum number of colors in a GIF?
A GIF color table can contain up to 256 entries. A file can use a global table and frames can have local tables, but each indexed image still selects from at most 256 entries. Photographs and gradients may show banding or dithering; graphics with few flat colors often need fewer entries. Test the palette rather than assuming 64, 128, or 256 will look the same.
Create your GIF now
Build an animated GIF in your browser for free; the selected files are not sent to our image-processing server.