Overview
Introduction
Placing an animated GIF over a fixed photo or graphic, rather than another animation, is a common way to build things like an animated character over a static scene. This tool handles that per-frame compositing for you.
Both the GIF and the background image are decoded, composited, and re-encoded entirely in your browser.
What Is GIF-on-Image Compositor?
A compositor that takes one animated GIF and one static image, and layers the GIF's frames on top of the (unchanging) image at a chosen pixel offset for every frame of the animation.
It uses the same alpha-over blending as this category's other compositing tools, so the GIF's transparency is respected wherever it overlaps the background.
How GIF-on-Image Compositor Works
The GIF is decoded into fully composited RGBA frames; the static image is decoded once (via canvas) into a single RGBA buffer. For each GIF frame, that frame is alpha-composited on top of a fresh copy of the background image at the chosen offset.
The resulting frames are re-encoded into a new GIF with the same frame delays and loop count as the source GIF.
When To Use GIF-on-Image Compositor
Use it to animate a character, sticker, or effect over a fixed photo or illustration.
Use it to add motion to an otherwise static graphic without needing to re-author the background as an animation.
Often used alongside Image-on-GIF Compositor, GIF Compositor and Two-GIF Cross-Fader.
Features
Advantages
- The background never has to be re-drawn per frame; it's applied fresh and identically underneath every GIF frame.
- Respects the GIF's transparency with proper alpha-over blending rather than a flat opaque paste.
- Keeps the source GIF's original frame timing and loop count.
Limitations
- The background image itself never animates or changes; only the GIF layer moves.
- The GIF is placed at one fixed offset for the entire animation; it doesn't move across frames.
- Parts of the GIF that fall outside the background image's bounds at the chosen offset are clipped, not resized.
Examples
Best Practices & Notes
Best Practices
- Use a GIF with real transparency around its subject so it reads as layered rather than as a solid rectangle over the photo.
- Check the offset keeps the GIF's important content within the background image's bounds.
- Preview the background image and GIF separately first to confirm their relative sizes before picking an offset.
Developer Notes
This tool reuses the exact same `compositeOver` alpha-blend helper `gif-compositor.ts` defines, just with a single static `PixelBuffer` standing in for the second GIF's per-frame image, keeping the compositing math identical across all three compositor tools in this category.
GIF-on-Image Compositor Use Cases
- Adding an animated character or mascot over a fixed illustration or photo
- Layering an animated highlight or call-out effect over a static banner image
- Building a simple animated overlay for a poster or thumbnail without animating the whole image
Common Mistakes
- Expecting the background image to animate too: only the GIF layer moves; the background stays exactly as uploaded.
- Choosing an offset that pushes most of the GIF outside the background image's bounds, clipping the visible animation.
Tips
- If the composited GIF looks too large or small relative to the background, resize the source GIF before uploading it here.
- Use the GIF Compositor tool instead if you want to layer two animated GIFs rather than a GIF over a static image.