GIF Maker
Pick two or more images and turn them into an animated GIF. Control frame delay, output size, and quality. Files stay in your browser.
What GIF Maker is useful for
The tool shines whenever you have a small set of stills that should play in sequence. A common case is a before/after comparison: add the 'before' photo and the 'after' photo, set a delay of around 800-1000 ms, and you get a clean two-frame toggle that loops on its own — handy for editing, cleaning, renovation, or fitness posts.
It is also good for short step-by-step demos. Take three or four screenshots of a process (open menu, click setting, confirm), add them in order, and the result is a lightweight animated walkthrough that plays inline in chat apps, issue trackers, and forums where a video file would be awkward.
Other practical uses include simple product turnarounds from a handful of angle shots, animated logos or badges built from a few frames, slideshow-style photo loops for a profile or banner, and quick reaction GIFs assembled from meme stills. Because you control the width, you can target a specific size for a Slack emoji, a README image, or a social thumbnail.
How to use it
Add at least two images, decide how fast and how large the animation should be, then build and download. The Build GIF button only enables once you have two or more frames, and Download enables once encoding finishes.
Frames play in the exact order you add them, so arrange your files before selecting them if order matters. The defaults (200 ms delay, 480 px wide, quality 8) are a sensible starting point you can adjust on each rebuild.
A practical example workflow
Say you want a before/after GIF of a room you repainted. You have two photos, before.jpg and after.jpg, both 4000 px wide off a phone. You open GIF Maker and drag both files onto the drop zone; the panel shows '2 frames ready' with small thumbnails confirming order.
A 4000 px GIF would be huge, so you set Width to 800 px. The first photo sets the animation's aspect ratio, and later frames are fitted inside the same canvas without stretching. You want each photo to hold for about a second, so you set Frame delay to 900 ms. You leave Quality at 8 for a detailed first pass.
You click Build GIF. The status shows 'Decoding frames…', then 'Encoding GIF…' with a percentage as the Web Worker runs. When it reads 'Done • 2 frames' with a file size, the looping result appears in the Preview box. If the file feels too large, you raise the Quality number to 15 and rebuild; if you want a snappier flip, you lower the delay to 600 ms and rebuild. Once happy, you click Download to save animation.gif.
Supported input and output
Input is two or more still images. Standard web image types work, including JPG, PNG, and WebP — anything the browser recognizes as an image/* file is accepted, whether chosen with the file picker or dropped onto the page. Non-image files are ignored automatically.
Output is always a single animated GIF, saved as animation.gif. The first source frame sets the output aspect ratio at your chosen width. Every later frame is scaled to fit and centered on that same canvas, with white space where the aspect ratios differ, so the image is not stretched or cropped.
Quality and limitations
GIF is a palette format limited to 256 colors per frame. For photographs with smooth gradients — skies, skin tones, soft shadows — you will see some banding or dithering. That is a property of the GIF format, not a flaw in the tool; no setting removes it entirely because the format cannot store more than 256 colors at once.
The Quality control trades encoding speed against appearance: a lower number (toward 1) samples colors more carefully for a better-looking result but takes longer, while a higher number (toward 20) encodes faster with more visible compression. The valid range is 1-20, with 8 as the default.
GIF files can also grow large quickly, especially with many frames or a wide output. There is no audio and no true 24-bit color, so for photo-realistic motion a real video format is usually a better fit. Frame delay accepts 20-5000 ms and width accepts 32-2000 px; values outside those bounds are clamped.
Common problems and fixes
Build GIF stays greyed out: you have fewer than two images. The button only enables at two or more frames — add another image and the status will read 'X frames ready'.
The animation plays in the wrong order: frames render in the order they were added. Reset, then re-add the files in the sequence you want, or rename them with a numeric prefix (01, 02, 03) and select them together so they sort predictably.
Colors look banded or grainy: this is the 256-color GIF limit on gradient-heavy photos. Lower the Quality number for a cleaner encode, reduce the width so fewer pixels need approximating, or use flatter, higher-contrast source images.
The file is too big to upload or attach: reduce the output width, use fewer frames, or raise the Quality number to compress harder. A 480 px or smaller GIF is dramatically lighter than a full-resolution one.
It says the GIF library or worker failed to load: this means the encoder script could not be fetched from the CDN. Check your connection, disable any script-blocking extension for the page, and retry the build.
Frequently asked questions
How many images do I need to make a GIF?
At least two. The Build GIF button stays disabled until you have added two or more images, and the status line tells you how many frames are ready.
What do the frame delay numbers actually mean?
Frame delay is how long each image is shown, in milliseconds, before the next one. 200 ms is the default; 1000 ms holds each frame for a full second, while 100 ms produces fast, near-video motion. The accepted range is 20 to 5000 ms.
Why does my photo GIF look banded or grainy?
GIF stores only 256 colors per frame, so smooth gradients in photos get approximated and show banding. That is the GIF format itself. Lowering the Quality number or reducing the width helps, but flat-color images like screenshots and logos always come out cleanest.
Related tools and guides
Image to Video · Image Resizer · Compress Image · Crop Image