Images to Animated GIF

about this tool

Drop a set of images, put them in the order you want, and get one animated GIF. The images are decoded, drawn and encoded by code running in this page — nothing is uploaded.

The speed you ask for is not always the speed you get

A GIF stores the gap between frames in hundredths of a second. That is coarse enough to matter on its own — 12fps is a delay of 8, which is really 12.5 — but the sharp edge is at the other end.

No browser honours a delay below 2. All three engines say so, in words WebKit wrote in 2010 and Blink later inherited: "Many annoying ads specify a 0 duration to make an image flash as quickly as possible. We follow Firefox's behavior and use a duration of 100 ms for any frames that specify a duration of <= 10 ms." The comment credits Mozilla, which had been doing it since the early 2000s for a less cynical reason of its own: broken authoring tools wrote zeros when they meant "default". Safari's threshold is one millisecond looser, which for a GIF — whose delays are whole hundredths — makes no difference at all.

So a GIF asking for 100fps is played at 10fps. Not slightly slow — ten times slow, and in the opposite direction from the one intended. A delay of 2 is the smallest that means what it says, which puts the real ceiling at 50 frames a second.

This tool will not write a delay it knows will be ignored: ask for 100 and it writes 10, because 10 is what you would have got. The frame-rate box stops at 50 for the same reason — between 51 and 66 you get 50 anyway, and at 67 the whole animation collapses to 10. Where rounding changes the speed at all, it says so before you build.

256 colours, shared by every frame

That is the other thing the format decides for you. One palette is chosen for the whole animation, by median cut over a sample of every frame.

Two hundred and fifty-six is the format's ceiling; the working number here is 255, because one palette entry is spent on the transparency that stores only what changed between frames. It means line art, screenshots, logos, diagrams and pixel art come out exactly right — they have far fewer colours than that to begin with. Photographs do not, and the reduction shows as banding across skies and skin. Dithering scatters the error into neighbouring pixels to disguise the bands, which works, at the cost of a noisier picture and a bigger file.

If the source is photographic, a short MP4 or WebM will be smaller and look better. That is not a failing of this tool; it is a format from 1990 being asked to do something it was never for.

Transparency goes the same way. A GIF can mark one palette entry transparent, and that entry is spent storing only what changed between frames. How much that saves depends entirely on the pictures: a still background behind a small moving subject can drop the file by ninety per cent, while frames that share no pixels at all — which is the ordinary case for a folder of different stills — save nothing, and can come out slightly larger. Either way, soft PNG edges are flattened onto the background colour you choose rather than left as a fringe.

Order, and the way computers count

The frames play in the order shown, which starts as the order they arrived.

Sort by name uses numeric collation, so shot-2 comes before shot-10. Sorting those as plain text puts 10 second, which is the usual reason a folder of exports animates in the wrong order and the usual reason people assume the export was broken.

There and back plays forwards then backwards, so a loop has no jump at the join. It does not repeat the end frames — 1 2 3 2, not 1 2 3 3 2 1 — because holding either end for two frames is a visible stutter at the turn. Six images become ten frames, and the panel says so before you commit to it.

Sizes that do not match

The canvas is taken from the widest and the tallest of your images, so nothing is cropped by accident. Each image is then centred in it: whole image fits each one inside the frame — enlarging the small ones, which can look soft, and leaving background around anything of a different shape. Fill the frame scales up until there is no background left and loses the overhang, which can be most of a picture when one image is tall and another is wide. A GIF has one screen size for the entire animation, so something has to give — this is only a choice about which.

Everything is held in memory while the palette is chosen, so there is a ceiling on frames and on total pixels, and the tool refuses past it rather than taking the tab with it.

One thing the format cannot do: a single image gets no loop block at all, because there is nothing to loop. It is a still, and every viewer shows it as one whatever the setting says.

If what you have is a video rather than a folder of stills, video to GIF, trim & convert does that end — it shares this encoder. To get the stills out of a video in the first place, the video frame extractor does that, and the image compressor will shrink the results before they become frames.

questions

Why will it not let me go faster than 50 frames a second?

Because a GIF cannot. The delay between frames is stored in hundredths of a second, and no browser honours the smallest values — Chromium’s source says it uses 100ms for any frame asking for 10ms or less, following Firefox, because broken tools wrote zeros and adverts abused it. So a GIF claiming 100fps is played at 10fps: not a little slow, ten times slow, from a request to go faster. A delay of 2 is the smallest that means what it says, and that is 50fps — so the box clamps there, and asking for more is corrected rather than quietly punished. The words are WebKit’s, from 2010; Blink inherited them and they credit Mozilla, which had been doing it since the early 2000s.

Why does my photo look blotchy?

A GIF holds 256 colours for the entire animation, chosen once and shared by every frame — and the working number here is 255, because one entry is spent on the transparency used to store what changed. Line art, screenshots and pixel art have far fewer and come out exact. A photograph has tens of thousands and has to be reduced, which shows as banding in skies and skin. Dithering disguises it at the cost of a noisier, larger file. Photographs are the case GIF is worst at.

What order do the images go in?

The order you see, which starts as the order they arrived. Sort by name uses numeric collation, so shot-2 comes before shot-10 rather than after it — plain text sorting is the usual reason a folder of exports animates in the wrong order. You can also move any frame with the arrows, or drop it entirely.

What does "there and back" do?

It plays the frames forwards and then back again, so a loop has no jump at the join. It does not repeat the two end frames — 1 2 3 2 rather than 1 2 3 3 2 1 — because holding either end for two frames is a visible stutter at the turn. Six images become ten frames, and the panel says so before you build anything.

Are my images uploaded?

No. They are decoded by your browser, drawn onto a canvas, and encoded to GIF89a by code running in the page. Nothing in this page sends them anywhere. That also means a large set costs no upload time, though it does cost memory — every frame is a full bitmap while the palette is being chosen.

Why is the file so large?

Size grows with width times height times the number of frames, so halving the width takes roughly three quarters off. Fewer colours and fewer frames help too. Storing only what changed helps enormously when a still background sits behind a small moving subject — and not at all when consecutive frames are unrelated pictures, which is the usual case for a folder of stills, so do not count on it here.

What happens to transparency?

It is flattened onto the background colour you pick. A GIF can mark one palette entry transparent, and that entry is spent storing only what changed between frames — which is where most of the size saving comes from. So a PNG with soft edges gets those edges drawn against your background rather than a fringe of half-transparent pixels.

Can I use images of different sizes?

Yes. The canvas is taken from the widest and the tallest so nothing is cropped by accident, and each image is then centred inside it. Whole image fits every picture in, which means enlarging the small ones — they will look soft. Fill the frame crops instead, and when one image is tall and another wide that can lose most of a picture. A GIF has one screen size for the whole animation, so something has to give.

Does the loop setting really loop forever?

Yes, when it is on. Looping is not part of the original GIF specification at all — it is an application extension block whose meaning Netscape defined for Navigator 2.0, and which viewers have honoured ever since. Turn it off and no such block is written, which is read as playing through once. A single image never gets one either, since a one-frame GIF is a still picture.