How is this different from GIF-on-Image Compositor?

This is the inverse: here the GIF is the moving background and the static image is the fixed foreground layer painted on top of every frame. GIF-on-Image Compositor instead treats the static image as the fixed background and the GIF as the moving foreground.

Whose canvas size does the output use?

The GIF's size, since it's the animated background. The static overlay image is placed at your chosen offset and clipped if it extends past the GIF's canvas edges.

How many frames does the output have?

The same number of frames as the source GIF, each keeping its original delay, with the static image composited fresh on top of every single one.

Is this a good way to add a watermark or logo to a GIF?

Yes, that's a common use: upload your logo as the static image and position it in a corner, and it stays fixed on top of the animation for the whole loop.

Image-on-GIF Compositor - Overlay a Static Image on an Animated Background

Overview

Introduction

Adding a fixed logo, watermark, or caption graphic on top of an animation means the same static image needs to be layered on every single frame of the GIF. This tool does exactly that.

Both the static image and the GIF are decoded, composited, and re-encoded entirely in your browser.

What Is Image-on-GIF Compositor?

The inverse compositor to GIF-on-Image: it takes an animated GIF background and a single static image, and layers that static image on top of every one of the GIF's frames at a chosen pixel offset.

It uses the same alpha-over blending as this category's other compositing tools, so the static image's transparency is respected wherever it overlaps the moving background.

How Image-on-GIF 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, the static image is alpha-composited on top of that frame at the chosen offset.

The resulting frames are re-encoded into a new GIF, keeping the original GIF's frame delays and loop count.

When To Use Image-on-GIF Compositor

Use it to add a watermark, logo, or caption graphic that stays fixed on top of an animated GIF.

Use it whenever the moving layer should be the GIF and the fixed layer should be a single static image, the opposite of GIF-on-Image Compositor.

Often used alongside GIF-on-Image Compositor, GIF Compositor and GIF Watermark Remover.

Features

Advantages

The static overlay only needs to be composited once per frame using the same simple image, no need to pre-render it into every frame yourself.
Respects the overlay image's transparency with proper alpha-over blending.
Keeps the source GIF's original frame timing and loop count.

Limitations

The static image itself never animates; only the GIF background layer moves.
The overlay is placed at one fixed offset for the entire animation; it doesn't move across frames.
Parts of the overlay image that fall outside the GIF's bounds at the chosen offset are clipped, not resized.

Examples

Watermarking an animated GIF

Input

An 8-frame animated GIF, a small static logo image, offset x:10 y:10

Output

An 8-frame GIF matching the original animation, with the logo composited into the same top-left corner on every frame.

The static logo is re-composited fresh onto each of the 8 GIF frames, so it appears fixed in place throughout playback.

Best Practices & Notes

Best Practices

Use a static image with real transparency around your logo or caption so it reads as an overlay rather than a solid rectangle.
Check the offset keeps the overlay within the GIF's bounds so it isn't clipped.
Keep the overlay image reasonably small relative to the GIF so it doesn't obscure the animated content.

Developer Notes

This tool reuses the exact same `compositeOver` alpha-blend helper `gif-compositor.ts` defines, with the roles of "background" and "overlay" swapped relative to `gif-on-image-compositor.ts`: the GIF's own frame is passed as the base and the static image as the overlay.

Image-on-GIF Compositor Use Cases

Adding a watermark or attribution logo to an animated GIF before sharing it
Overlaying a fixed caption graphic or badge on top of an existing animation
Branding an animated GIF with a static logo without re-authoring the animation itself

Common Mistakes

Expecting the static image to animate too: only the GIF layer moves; the overlay stays exactly as uploaded on every frame.
Choosing an offset that pushes most of the overlay outside the GIF's canvas, clipping it.

Tips

If the watermark looks too prominent, reduce its own image's opacity before uploading it here.
Use GIF-on-Image Compositor instead if you actually want the GIF to be the moving foreground over a fixed background image.

Image-on-GIF Compositor