What does splitting a PNG produce?

Four separate grayscale images, one for each of the red, green, blue, and alpha channels, where each image's brightness at a pixel represents that channel's original intensity there.

How is this different from the RGB Components Splitter tool?

That tool splits into just the three color channels (red, green, blue). This one includes the alpha channel too, giving you all four channels that make up a PNG's pixel data.

Why is the alpha channel image useful?

It shows exactly which parts of your image are transparent, semi-transparent, or opaque as a grayscale map, which is useful for debugging masks and cutouts.

Do the output images keep the source's transparency?

No, each channel output is forced fully opaque so its grayscale value is always visible regardless of the source's own alpha.

PNG Splitter - Split a PNG into Its RGBA Channels

Overview

Introduction

This tool splits a PNG into its four individual RGBA channels, computed entirely client-side, producing four separate grayscale images.

It's useful for inspecting exactly how much information lives in each channel of your image.

What Is PNG Splitter?

A channel-splitting tool that isolates each of a PNG's red, green, blue, and alpha channels into its own grayscale image, reusing the site's existing single-channel extractor once per channel.

Each output image's brightness directly represents that one channel's intensity at every pixel.

How PNG Splitter Works

For each of the four channels, the tool copies that channel's byte value into the red, green, and blue slots of a new image (forcing full opacity), producing a neutral grayscale rendering of just that channel.

Running this once per channel produces the four separate outputs together.

When To Use PNG Splitter

Use it to check whether an alpha mask lines up correctly with the visible edges of a sprite or cutout.

It's also handy for debugging unexpected color casts by inspecting each color channel in isolation.

Often used alongside PNG Parts Splitter and PNG Multiplier.

Features

Advantages

Runs entirely client-side; your image never leaves the browser.
Reuses a single, well-tested channel-extraction function for all four channels.
Includes the alpha channel, unlike a plain RGB-only split.

Limitations

The four outputs are separate images; there's no single combined preview strip generated automatically.
Very large source images produce four equally large outputs, which can use noticeable memory in the browser tab.

Examples

Inspect a sprite's alpha mask

Input

A 256x256 PNG sprite with transparent edges

Output

Four 256x256 grayscale images; the alpha one shows a white silhouette on a black background

The alpha channel output makes it easy to visually confirm the mask's shape matches the sprite's visible edges.

Debug a color cast

Input

A 100x100 PNG photo with an unexpected red tint

Output

Four grayscale images where the red channel output looks noticeably brighter overall than green or blue

Comparing the three color channel outputs side by side reveals which channel is dominating.

Best Practices & Notes

Best Practices

Compare the alpha channel output against the transparency checker tool's report for a fuller picture of an image's transparency.
Use this before debugging color-grading issues to see each channel's contribution in isolation.

Developer Notes

This tool's lib function calls the existing single-channel extractor once per RGBA channel rather than re-deriving the per-channel copy loop; each call operates on a plain Uint8ClampedArray pixel buffer with no DOM dependency.

PNG Splitter Use Cases

Verifying an alpha mask matches a sprite's visible silhouette
Debugging a color cast by inspecting each RGB channel separately
Teaching how RGBA channels combine to form a final image

Common Mistakes

Expecting a single combined output image — this tool produces four separate channel images.
Forgetting that each output is forced opaque, so the alpha channel's own image doesn't show transparency, only a grayscale representation of it.

Tips

Use the alpha output as a quick visual mask-debugging tool before running an alpha-based effect like a stroke or shadow.
Download all four channels if you need to reconstruct or manipulate them individually in another tool.

PNG Splitter