Overview
Introduction
Cropping a still image is simple, but cropping an animated GIF means applying the same cut consistently across every frame so the animation keeps playing smoothly afterward. This tool does exactly that, entirely in your browser.
It decodes the GIF into its individual composited frames, crops each one identically, and re-encodes a fresh animated GIF from the result.
What Is GIF Cropper?
A client-side GIF cropping tool that reads an uploaded animated GIF, extracts a rectangular sub-region (defined by a top-left x/y coordinate plus width and height) from every frame, and rebuilds a new animated GIF from the cropped frames.
It builds on this category's shared GIF decoder and encoder, so the frame timing and loop count from the original file carry through unchanged.
How GIF Cropper Works
The GIF is fully decoded frame by frame into flat RGBA pixel buffers (each disposal method already resolved into a plain composited image), the same representation an animated GIF player would show at each step.
The tool then validates that the requested rectangle fits inside the source dimensions, copies that rectangle out of every frame's buffer, and re-encodes all the cropped frames back into a single new GIF file with their original per-frame delays intact.
When To Use GIF Cropper
Use it when an animated GIF has unwanted content around the edges (a browser chrome, a black border, dead space) that you want removed from every frame at once.
It's also useful for isolating one moving element out of a larger animated scene, as long as that element stays within the same rectangle across every frame.
Often used alongside GIF Slicer, GIF Fragment Cutter and GIF Canvas Size Changer.
Features
Advantages
- Applies one consistent crop to every frame automatically; there's no risk of frames drifting out of alignment.
- Runs entirely client-side, so the uploaded GIF is never sent to a server.
- Preserves each frame's original delay and the animation's loop count.
Limitations
- Because the shared encoder quantizes colors to a fixed 216-color web-safe palette, the cropped output may show slightly different colors than a delta-aware, direct-color GIF encoder would produce.
- The crop rectangle is fixed for the whole animation; it can't track a moving subject frame-by-frame.
Examples
Best Practices & Notes
Best Practices
- Check the GIF's exact dimensions (shown after upload) before calculating crop coordinates.
- If the subject moves significantly across frames, crop generously enough that it stays within the rectangle for the whole animation.
- Preview the cropped result before publishing to confirm no frame lost important content at the edges.
Developer Notes
cropGif in gif-cropper.ts is the single implementation both this tool and gif-slicer.ts expose under different names; gif-slicer.ts is a thin re-export rather than a duplicated file, so the two tools' behavior can never diverge. The per-frame crop itself mirrors png-cropper.ts's bounds-checked pixel copy, just run once per decoded GIF frame via the category's shared transformGifFrames helper.
GIF Cropper Use Cases
- Removing an unwanted border or watermark area from every frame of an animated GIF
- Isolating one region of interest from a larger animated screen recording
- Trimming a GIF down to just the animated subject before re-uploading it elsewhere
Common Mistakes
- Picking a crop rectangle that fits the first frame but clips content that moves outside it in later frames.
- Expecting the crop to scale remaining content to fill a larger canvas; cropping only removes pixels, it never resizes what's left.
Tips
- Upload the GIF once to see its exact width/height/frame count, then compute your crop rectangle from those numbers.
- If you're not sure whether you need a rectangle or a small centered fragment, gif-fragment-cutter offers a circular option too.