Overview
Introduction
This tool applies a custom transparency mask to a PNG, entirely in your browser, using a second image's brightness as the new alpha channel.
It's a classic image-compositing technique: paint or supply a grayscale mask, and use it to control exactly which parts of another image show through.
What Is PNG Alpha Channel Replacer?
A client-side masking tool that reads two uploaded images, a base image and a mask image, and builds a new image combining the base image's RGB colors with alpha values derived from the mask's luminance.
If the two images differ in size, the mask is automatically resampled to match the base image before being applied.
How PNG Alpha Channel Replacer Works
For every pixel, the tool computes the mask image's luminance at that position using the standard weighted formula (0.299 red + 0.587 green + 0.114 blue), which produces a single brightness value even from a full-color mask image.
That luminance value becomes the new alpha for the corresponding base-image pixel, while the base image's own red, green, and blue values are carried through unchanged.
When To Use PNG Alpha Channel Replacer
Use it to apply a custom-shaped transparency (like a soft vignette, a painted mask, or an exported gradient) to an image that doesn't already have that shape baked into its alpha.
It's also useful for reusing one image's extracted alpha shape (via the alpha channel extractor) as a mask for a completely different image.
Often used alongside PNG Alpha Channel Extractor, PNG Alpha Channel Filler and PNG Resizer.
Features
Advantages
- Runs entirely client-side; neither uploaded image is ever sent to a server.
- Automatically handles mismatched mask dimensions via resampling, rather than requiring an exact size match.
- Works with any mask image, not just ones that already have their own alpha channel.
Limitations
- Uses luminance rather than the mask image's own alpha channel, so a mask that relies on its own transparency (rather than brightness) won't behave as expected.
- Nearest-neighbor resampling of a mismatched-size mask can produce blocky edges if the mask is much smaller than the base image.
Examples
Best Practices & Notes
Best Practices
- Use a genuinely grayscale mask image when possible, for the most predictable and easy-to-reason-about results.
- Match the mask's resolution to the base image's resolution ahead of time for the sharpest possible mask edges.
Developer Notes
The lib function reuses the shared resizeNearest helper to handle mismatched mask dimensions rather than requiring an exact match, and computes luminance with the standard Rec. 601 weighting (0.299/0.587/0.114) rather than a simple average, since that weighting better matches perceived brightness.
PNG Alpha Channel Replacer Use Cases
- Applying a custom vignette or gradient transparency to a photo
- Reusing one image's alpha shape as a mask for a different image
- Combining a painted or generated mask with a separate base image
Common Mistakes
- Uploading a mask image that has its own transparency (alpha) and expecting that alpha to be used directly — this tool reads the mask's brightness (luminance), not its own alpha channel.
- Using a very low-resolution mask against a high-resolution base image and being surprised by blocky mask edges.
Tips
- Export a mask from the alpha channel extractor tool if you want to reuse an existing image's exact transparency shape elsewhere.
- For a hard-edged (non-gradient) mask, use a mask image with only pure black and pure white, no gray.