{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Sequence{{ frameCountLabel }} Canvas{{ outputPlanLabel }} Local only
2–24 images · 10 MB each · 40 MB total · PNG, JPEG, or WebP
{{ frames.length ? `${frames.length} source images ready` : 'Drop still images here' }}
{{ validatingFiles ? 'Checking image type, dimensions, and memory limits…' : 'or press to browse local files' }}
{{ formatBytes(totalFrameBytes) }} selected
Use the sample to preview the complete workflow without choosing personal images.
Frame sequence

Set exact playback order and timing before encoding.

{{ formatDuration(computation.ok ? computation.values.duration_ms : 0) }}
  1. {{ frame.name }}{{ frame.width }} × {{ frame.height }} px · {{ formatBytes(frame.bytes) }}
    ms
ms
GIF stores frame delay in exact 10 ms steps.
px
16–800 pixels.
px
16–800 pixels.
Choose how mixed source dimensions share one canvas.
Playback metadata is verified before download.
{{ planTitle }}{{ planLine }}
{{ workflowMessage }}
{{ processingProgress }}%
Use a six-digit hex color for empty canvas areas.
The balanced 128-color default suits mixed still images.
Dithering affects palette mapping, not frame order or timing.
The hard browser output limit remains 25 MB.
GIF preview

This is the exact verified browser-generated file.

Animated GIF generated from the ordered source frames
{{ fact.label }}
{{ fact.value }}

The chart renderer is unavailable. Exact timing remains available in the frame ledger.

FrameSourceDimensionsDelayShareCopy
{{ row.order }}{{ row.name }}{{ row.dimensions }}{{ row.delay }}{{ row.share }}
Video to GIF Converter Turn a short video clip into an animated GIF in your browser with adjustable timing, dimensions and frame rate plus color and looping controls.
Animated GIF Compressor Compress an animated GIF locally by scaling dimensions, reducing colors, or dropping frames while verifying duration and loop behavior.
Image Format Converter Convert one image locally with format, resize, crop, quality, and transparency controls while checking the actual output and byte size.
Image Resizer Resize one image locally, compare fit or crop geometry, and tune format quality against a file-size target before downloading.

A sequence of still images becomes animation through order and time. The first frame establishes the starting state, later frames show change, and each delay controls how long that state remains visible. A missing frame or an unexpected sort order can change the story even when every individual image looks correct.

Animated GIF stores frames on one fixed canvas. Source images with different proportions therefore need a placement rule. Contain keeps every source edge visible and fills unused canvas space with a chosen background. Cover fills the canvas but crops source edges. Neither choice is universally better: diagrams and screenshots usually need complete edges, while photographs may tolerate cropping for a full-bleed result.

Frame delay
How long one frame remains visible. Shorter delays make the sequence play faster.
Palette
The limited color set shared by the animation. Fewer colors often reduce size but can flatten gradients.
Dithering
A pattern that mixes palette colors visually. It can soften banding while adding fine texture.
Looping
Playback metadata that either repeats the sequence continuously or leaves it to play once.

Animation duration is the sum of the frame delays, not the number of images alone. Six frames at 500 ms last 3 seconds, while the same six frames at 100 ms last 0.6 seconds. Hold frames can remain longer than transition frames when the viewer needs time to read a label or notice a result.

GIF is well suited to small demonstrations, status animations, and short frame-by-frame explanations. It is a weak fit for photographic slideshows with many large frames because every frame must be reduced to a limited palette and stored inside a comparatively inefficient animation format.

How to Use This Tool:

Prepare the sequence in its intended reading order. The first selected image becomes the first frame, and later reordering changes playback.

  1. Select 2 to 24 PNG, JPEG, or WebP images. Each file may be up to 10 MB, with a 40 MB combined limit.
  2. Reorder the frames and set each delay in 10 ms steps. Use New-frame delay as the starting delay for images added later.
  3. Set an output canvas from 16 × 16 to 800 × 800 pixels, then choose Contain or Cover and a background color.
  4. Choose looping, palette colors, dithering, and a download-size warning. Create the GIF and review the timing profile before accepting the sequence.
  5. Check the measured size and verification summary. A file above the chosen warning requires an explicit larger-download choice, while anything above the 25 MB hard limit must be rebuilt smaller.

Interpreting Results:

The frame ledger should match the intended order, dimensions, and delay for every source image. The timing profile shows each frame's share of total playback, which helps reveal one accidental long pause that can make the whole animation feel stalled.

  • Use the measured bytes for delivery decisions; the estimate only helps compare settings before encoding.
  • Check cropped edges when using Cover, especially around text, faces, and diagram labels.
  • Preview the last-to-first transition when looping forever. A good sequence can still produce an awkward jump at the loop boundary.

Technical Details:

Every image is decoded with its orientation applied, drawn into one canvas, reduced to a global color palette, and encoded in the chosen order. Empty canvas areas and transparent source pixels resolve against the selected background. Ordered Bayer dithering changes palette mapping but not timing or frame order.

Formula Core:

Total duration and pixel workload are direct functions of the frame delays and canvas size:

T=∑i=1ndi P=W×H×n

T is total duration in milliseconds, d is each frame delay, n is frame count, and P is pixel-frames. Delays must be multiples of 10 ms because GIF records time in centiseconds. The sequence may last up to 120,000 ms, and the canvas workload may not exceed 30,000,000 pixel-frames.

Transformation Core:

  1. Keep the reviewed frame order and convert each delay from milliseconds to centiseconds.
  2. Draw each source onto the common canvas using complete-image containment or edge-cropping cover placement.
  3. Quantize the combined frame sample to 32, 64, 128, or 256 colors and map every canvas to that palette.
  4. Write GIF89a frames, delays, and optional repeat metadata, then inspect the encoded stream for its signature, canvas, frame count, exact delays, loop state, and trailer.

The finished bytes must agree with the reviewed frame count and every stored delay. Loop forever requires a repeat extension with zero repeats; play once omits that repeat extension. These structural checks confirm the file mechanics, but visual review is still needed for crop, color loss, and perceived speed.

Worked Examples:

Four-step interface demonstration

Four 480 × 320 screenshots with delays of 600, 300, 300, and 800 ms produce a 2-second loop and 614,400 pixel-frames. The longer first and last holds give viewers time to recognize the starting state and completed result. Contain placement prevents interface edges from being cropped.

Mixed portrait photographs

Portrait photos placed on a 480 × 320 landscape canvas will either show background beside the images with Contain or lose top and bottom detail with Cover. If faces sit near an edge, use Contain or change the canvas proportions before reducing palette colors.

References: