IMAGE RESIZER / TRANSPARENT EDGES
Why does a resized transparent image have a dark edge?
A dark fringe can appear when resizing mixes the hidden black RGB values of transparent pixels into a visible edge. Alpha-aware filtering weights colors by opacity before averaging. Keep a transparent format, then compare the exported edge over both light and dark backgrounds. A solid black rectangle is a different symptom from the narrow fringe tested here.
Transparency does not erase stored color
An RGBA pixel stores red, green, blue and opacity. Completely transparent pixels can still contain RGB values. Those invisible values should not contribute like opaque colors when an image is filtered. Export settings, old matte colors and background removal can also cause fringes; this page isolates one filtering mistake.
A downloadable orange-square test
We created a 64 × 64 transparent PNG with black RGB values in its empty area. An opaque orange square occupies coordinates 9 through 54 on both axes. Its color is RGB (240, 120, 40). We reduced the grid to 32 × 32 by replacing each non-overlapping two-by-two block with one output pixel. This is a deliberately simple box-filter experiment, not a test of a commercial image resizer.
Two versions use exactly the same input blocks and output dimensions. The intentionally incorrect version averages straight red, green, blue and alpha independently. The alpha-weighted version first multiplies each color by opacity, averages those products and opacity, then divides the color products by the averaged opacity wherever it is nonzero. Both are rounded to eight-bit integers only at the output.
| Output location | Straight-channel baseline | Alpha-weighted version |
|---|---|---|
| Corner (4, 4) | 60, 30, 10, 64 | 240, 120, 40, 64 |
| Top edge (10, 4) | 120, 60, 20, 128 | 240, 120, 40, 128 |
| Interior (10, 10) | 240, 120, 40, 255 | 240, 120, 40, 255 |
Why the corner turns darker
The block producing output coordinate (4, 4) contains one opaque orange pixel and three fully transparent black pixels. Independent averaging divides the orange RGB values by four, producing (60, 30, 10), while opacity becomes 63.75, rounded to 64. The alpha-weighted calculation divides its averaged color products by the same quarter opacity, recovering (240, 120, 40). The two saved pixels have equal opacity but different visible colors.
The top-edge block contains two orange pixels, so its opacity rounds to 128. The wrong baseline halves the color channels as well. Inside the square, all four samples are opaque orange, and both methods agree. That combination explains the location of the fringe: the center can look correct while boundary pixels darken.
These previews enlarge each saved output pixel tenfold without smoothing. Their white backgrounds are baked into preview copies only. The downloadable output PNGs retain transparency. A transparent image viewed against a black canvas may look different again, so the background is part of the comparison, not a property inferred from the thumbnail.
Reproduce the comparison with the exact files
Download the 64 × 64 source, straight-channel output and alpha-weighted output. Compare the same corner on a white surface and a dark surface. Our dark baseline preview and dark alpha-weighted preview use background RGB (32, 32, 32). The test keeps geometry fixed so a changed edge color cannot be explained by a different crop.
This calculation operates directly on stored color values; it does not perform linear-light color conversion. It demonstrates alpha weighting only. Other filters, color-management settings and rounding choices may produce different numeric edge values. We do not claim these particular numbers describe your app.
Can I fix this by switching to JPEG?
JPEG removes transparency by flattening against a background. That can hide the symptom on one matching surface while creating a visible box elsewhere. Keep the transparent original when the image must work on several backgrounds. Compare an alpha-aware export rather than flattening merely to conceal an edge.
What if the original already has a fringe?
Inspect the original on contrasting backgrounds before resizing. A matte already embedded in partially transparent pixels will not necessarily disappear when the next resize handles alpha correctly. That requires a different cleanup decision. Our fixture begins with a clean opaque square and transparent surroundings, so it does not test removal of an existing matte.
Compare the edge, opacity and background together. A matching center and matching dimensions do not establish that transparent boundaries survived the resize.
Explore more resizing diagnostics →