Does this blur the whole image?

No. Only pixels sitting directly on a hard 0/255 alpha boundary (a 'jagged' transition) are touched; pixels whose neighborhood is uniformly opaque or uniformly transparent are left completely unchanged.

How is this different from the GIF Edge Feather tool?

This tool only smooths existing jaggies into a subtly anti-aliased edge: it doesn't intentionally create new transparency. The GIF Edge Feather tool instead deliberately fades a whole band of pixels into a gradient, which is a much more visible, stylistic effect.

Will this fix a GIF that was quantized through a limited color palette?

It can help smooth the jagged silhouette that often results from hard-cutoff alpha thresholding during quantization, but it doesn't restore lost color precision: GIF's palette limitation is a separate constraint this tool doesn't work around.

What does the 'radius' setting control?

It controls how wide the transition zone is and how large a neighborhood is averaged for each edge pixel: larger values smooth more aggressive jaggies but can also soften fine silhouette detail.

GIF Edge Refiner - Smooth Jagged Alpha Edges on an Animated GIF

Overview

Introduction

This tool smooths jagged, staircase-like alpha edges on every frame of an animated GIF, entirely client-side, using a small blur confined strictly to the alpha transition zone.

It's designed to fix the hard, aliased edges that GIF's binary (fully-transparent or fully-opaque) alpha model tends to produce, without touching flat interior or background areas.

What Is GIF Edge Refiner?

A client-side GIF edge-smoothing tool that detects, per frame, which pixels sit directly on a hard alpha boundary (a neighbor is fully transparent while the pixel itself is opaque, or vice versa) and averages their alpha and premultiplied color over a small neighborhood, producing a genuinely anti-aliased edge instead of a jagged one.

Pixels that aren't on a transition (the vast majority of a typical frame) are left completely untouched.

How GIF Edge Refiner Works

For each pixel, its 3x3 neighborhood is checked for any neighbor whose 'is fully transparent' status differs from its own; if so, it's classified as an edge pixel.

Edge pixels have their alpha and color averaged (weighted by neighbor alpha, to avoid dark color fringes from formerly-transparent neighbors) over a `radius`-sized window, then this smoothed value replaces the original hard-cutoff value.

When To Use GIF Edge Refiner

Use it on a GIF whose silhouette looks visibly 'staircased' or pixelated along curved or diagonal edges, often a side effect of GIF's hard alpha cutoff during encoding.

It's also a good pre-processing step before adding an outline or stroke, since a smoother source edge produces a smoother outline.

Often used alongside GIF Edge Feather, GIF Edge Cleaner and GIF Outline Adder.

Features

Advantages

Only touches genuine transition pixels, leaving flat areas completely unaffected.
Produces a subtler, more natural-looking result than a full-image blur.
Runs entirely client-side; the uploaded animation is never sent to a server.

Limitations

Can't fully undo aggressive aliasing from a very low-resolution source; there's only so much a small local blur can recover.
Doesn't address GIF's limited color palette: only the alpha edge's smoothness is improved.

Examples

Smooth a pixelated circular badge

Input

A 100x100 animated GIF of a rotating badge with visibly jagged round edges, radius 2

Output

A 100x100 animated GIF with the same badge, now with softly anti-aliased edges instead of a staircase pattern

Only the boundary pixels around the badge's silhouette are touched; the badge's interior colors and the background stay unchanged.

Best Practices & Notes

Best Practices

Start with a radius of 1 or 2; larger values can start to soften genuinely intended sharp corners.
Apply this before an outline, stroke, or background-removal pass, since a cleaner source edge improves those downstream operations.
Compare the result against the original at 100% zoom, since the effect is subtle by design.

Developer Notes

refineGifEdges in gif-edge-refiner.ts maps refineFrameEdges (a pure per-pixel edge classifier plus a bounded, alpha-weighted neighborhood average) across every frame of a DecodedGif. This is intentionally a different algorithm from gif-edge-feather.ts (which creates a deliberate distance-based fade) and gif-edge-cleaner.ts (which only snaps near-threshold alpha values, never blurring or blending color); all three address a different edge-quality problem.

GIF Edge Refiner Use Cases

Smoothing a visibly jagged or 'staircased' silhouette edge left over from GIF's hard alpha cutoff
Preparing a cleaner source edge before adding an outline or stroke
Improving the visual quality of a small or low-resolution animated icon's edges

Common Mistakes

Expecting a large visual change: this tool is intentionally subtle and localized to genuine transition pixels.
Using a very large radius and losing fine silhouette detail as a side effect.

Tips

If you want a deliberate, visible soft fade instead of subtle anti-aliasing, use the GIF Edge Feather tool instead.
Run the GIF Edge Cleaner afterward if the source also has stray semi-transparent fringe pixels unrelated to genuine jaggies.

GIF Edge Refiner