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.

Drag & drop 2+ images, anywhere on the page
or click "Choose Files"

Preview

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 10) 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 — height scales automatically to keep the room from stretching. You want each photo to hold for about a second, so you set Frame delay to 900 ms. You leave Quality at 10 for a balanced 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. Each source frame is redrawn to your chosen width (height scaled to match its own aspect ratio) before encoding, so mixed-size inputs still combine into one consistent animation.

Privacy

Your images are processed in your browser where supported. Decoding, resizing, and GIF encoding all happen on your own device using the canvas and a Web Worker — the picture files you add are not uploaded to a server, and the finished GIF is generated locally.

There is no account, no sign-up, and nothing is stored after you leave or reset the page. The only network request the tool makes is to fetch the gif.js encoder script itself from a public CDN; that download contains no information about your images. If you want to be fully offline, load the page once so the script caches, then the encoding step still works on your own machine.

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 10 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.

Best practices and tips

Pick a width that matches where the GIF will live — 480 px is plenty for chat and README images, while 800-1000 px suits a hero or banner. Smaller widths encode faster and produce far lighter files.

Match frame delay to the content: 700-1000 ms reads well for before/after and step screenshots, while 100-300 ms feels like fast motion for slideshows or reaction loops. The watchable range usually sits between roughly 5 and 12 frames per second.

For the sharpest result, prefer source images with flat areas of solid color (UI screenshots, logos, line art) over gradient-heavy photos, since those survive the 256-color palette best. Do a quick pass at the default quality, check the preview, then fine-tune width, delay, and quality and rebuild — each rebuild is non-destructive, so you can iterate freely before downloading.

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.

Does a lower Quality number make a better or worse GIF?

Better. In gif.js a lower quality value means more careful color sampling, so the GIF looks nicer but takes longer to encode. A higher value (up to 20) encodes faster with more visible compression. The default is 10.

Can I control the order the images animate in?

Yes — frames play in the exact order you add them. If the order is wrong, reset and re-add the files in sequence, or name them with numeric prefixes like 01, 02, 03 and select them together so they sort correctly.

Will my pictures be uploaded to a server?

No. Decoding, resizing, and encoding all run in your browser, and your images are not uploaded to our servers for routine operations. The only thing fetched from the network is the gif.js encoder script itself, which carries no data about your files.

Why is my output GIF so large, and how do I shrink it?

GIFs grow fast with more frames and larger dimensions. Reduce the Width (for example to 480 px), use fewer frames, or raise the Quality number to compress harder. Each of these noticeably cuts the file size.

Can I add sound or export a video instead?

No. GIF has no audio and is limited to 256 colors per frame. If you need sound or photo-realistic color and motion, convert your frames with the Image to Video tool instead.

Last updated: June 2026