Video to GIF
Convert video clips to animated GIFs with custom FPS, dimensions, and timing.
Video to GIF turns short clips into animated GIFs with controls for Start Time, Duration, FPS (5–30, default 10), and Width (240–1024px, default 480). A Performance Notice asks you to keep the tab open while the local pipeline runs. The hint accepts MP4, WebM, MKV, MOV — any video format the browser can decode.
Frames are decoded in a Web Worker with mediabunny (WebCodecs), then encoded by gif.js workers. Progress shows frame counts during extraction and Encoding N frames to GIF… in the second phase. Output downloads with the original basename as .gif.
How it works
Phase 1: worker decodes with hardwareAcceleration no-preference, draws samples to OffscreenCanvas → ImageData, honors trim {start, end}, discards audio, and caps MAX_FRAMES at 500. Frames post to the main thread.
Phase 2: gif.js (workers: 2, quality: 10, workerScript /gif.worker.js) redraws each frame with delay = round(1000/fps) and renders the GIF blob. Progress maps extraction to 0–70% then encoding 70→100. Time fields accept HH:MM:SS, MM:SS, or plain seconds.
How to use
- Open Video to GIF and note the Performance Notice (keep tab visible).
- Drop a video (hint: MP4, WebM, MKV, MOV — any video format).
- Preview the source; click Remove to swap files.
- Set Start Time and Duration (HH:MM:SS; defaults 00:00:00 and 00:00:05).
- Pick FPS (5–30, default 10) and Width (px) (240–1024, default 480).
- Click Convert to GIF and watch Decoding: N frames… then Encoding… progress.
- Review the animated GIF preview (Converted to GIF + size badge).
- Download (.gif keeps basename) or Start Over.
Tips
- MAX_FRAMES is 500 — e.g. 5s × 30fps = 150 frames; longer/higher FPS hits the cap.
- GIF size scales with width × fps × duration; 480px @ 10 fps is the tuned default.
- Audio is always discarded; Start Time 00:00:00 means no start trim.
- GIF’s 256-color palette inflates size vs video — lower FPS/width when the badge shows growth.
Video to GIF FAQ
Does it upload my video?
No — decoding (mediabunny/WebCodecs) and encoding (gif.js) both run in the browser.
What formats can I drop in?
Anything video/* the browser can decode — the hint lists MP4, WebM, MKV, MOV.
Why did conversion fail with no frames?
Usually an undecodable codec or a zero-length trim; the pipeline throws No frames extracted from video.
Can I choose the exact segment?
Yes — Start Time and Duration accept HH:MM:SS, MM:SS, or seconds; duration 00:00:00 means to the end.
Why is my GIF huge?
GIF has a 256-color palette; lower FPS/width (e.g. 480px @ 5fps) shrinks it — compare with the result size badge.
Credits
- mediabunny — Hardware-accelerated frame extraction in a Web Worker
- gif.js — Worker-based GIF palette quantization and encoding