Skip to the tool
CALCPARK

GIF Maker

Make an animated GIF from JPG, PNG or WebP images in your browser: delay per frame, frame order, size, loop count, palette size and an optional transparent background.

Files stay on your device
Loading the tool…

How to use it

  1. Drop the images in the order you want them to play; drag the cards or use the arrows to reorder.
  2. Set one delay for all frames and apply it, or tune single frames (a long pause on the last frame is common).
  3. Choose the size, loop setting, colour count and background. The preview plays with the chosen timing.
  4. Press Make GIF and download animation.gif. Changing anything afterwards re-enables the button.

Example

Six 1,920 × 1,080 px screenshots at 500 ms each, width Medium (800 px), 128 colours, loop forever: the canvas is 800 × 450 px, one loop lasts 3.0 s, and the GIF is roughly 600–900 KB depending on the content (photos cost more than flat UI). The same frames at 480 px and 64 colours come out around 150–250 KB.

How the GIF is made

Every image is decoded with createImageBitmap(EXIF orientation applied), drawn centred with “contain” scaling on one canvas whose width follows the size setting and whose height is the tallest scaled frame, so no frame is cropped. The RGBA pixels are transferred (not copied) to a web worker runninggifenc, which quantises each frame to its own palette (rgb565 for opaque frames, rgba4444 with a transparent index when transparency is on) and writes the frame with its delay. GIF has 1-bit transparency, so soft edges become hard; delays are rounded to 10 ms.

The loop count is written once, in the NETSCAPE 2.0 application extension of the first frame: 0 means forever, no block means a single play, and N means N additional repetitions – which is why “play 3 times” stores 2. Encoding runs off the main thread, so the page stays responsive; a 200-frame 800 px GIF needs about 200 × 800 × 600 × 4 ≈ 380 MB of frame memory, which is the practical limit on phones.

Sources: GIF89a specification (Graphic Control Extension, delay time), NETSCAPE2.0 application extension (loop count), gifenc on GitHub.

Tips for smaller GIFs

  • Width is the biggest lever: 480 px is a quarter of the data of 960 px.
  • Fewer colours (64–128) hardly show on screenshots and drawings; photos and gradients need 192–256.
  • Fewer frames with longer delays beat many near-identical frames; for video sources use the Video to GIF tool, which can de-duplicate frames.

Questions

Why does my GIF play one extra time?
Viewers interpret the NETSCAPE loop count as repetitions after the first play. This tool stores plays − 1, so "3 times" really plays three times; GIFs from tools that store the raw count play once more than intended.
Can I use an existing animated GIF as a frame?
Only its first frame is used: browsers decode GIFs on a canvas as a still image. Export the frames you need first, or use the Video to GIF tool for clips.
Why do transparent edges look jagged?
GIF supports only fully transparent or fully opaque pixels. Semi-transparent anti-aliased edges are snapped to one or the other; use a white or coloured background for smooth edges.