The alpha channel and transparency

Thiago Santos Figueira
3 min readJun 7, 2023

Greetings!

When defining a color in a computer system, we generally use the RGBA system. Each letter of the acronym stands for the colors red (R), green (G), blue (B), and sometimes an alpha (A) value which represents transparency. “When an image has an alpha channel on it, it means you can adjust the image’s opacity levels and make bits translucent or totally see-through” (Batt, 2021, para. 3). Each element ranges from 0 to 1 or 0 to 255, i.e., R, G, B, A ∈ [0..1]. When the value is close to its maximum, it represents the full color (RGB) or opacity (A). In other words, an alpha channel with a value of 0 represents full transparency and a value of 1 full opacity.

It is relevant to mention that not all image formats support the alpha channel. The JPEG format uses a lossy compression algorithm to eliminate unnecessary information and does not support transparency. PNG, on the other hand, adopts lossless compression and maintains the alpha channel. Of course, this distinction changes the size of the file depending on which compression method it uses (Boatman, 2017). Below we find an example of the same image in the two formats with a transparent background.

Image 1 a — (Boatman, 2017)
Image 1 b — (Boatman, 2017)

Since the alpha channel does not specify the color itself, we can use it to store other types of information when programming shaders, for example. When it comes to color blending, though, the alpha channel is fundamental. Color blending is the process through which we create a third color by mixing two colors: a source and a destination. The level of transparency will tell us which is the predominant color. We can find the third color through two mechanisms.

Conventional (Straight) Alpha

RGB represents the color, and the alpha channel represents transparency. We call the background the destination and the new color source (Jaggo, n.d.). The following expression represents the process:

blend(source, destination) = (source ⋅ sourcealpha) + (destination ⋅ (1 − sourcealpha))

The equation multiples the source’s color by the alpha value of the source and sums it to the destination multiplied by the complementary alpha value. Thus, the transparency is independent of the colors. In other words, if the alpha is one, the predominant new color is the source itself. If it is zero, then the background appears.

Image 2 — (Jaggo, n.d.)

The second method is Premultiplied Alpha

In premultiplied alpha, the color values (red, green, and blue) of each pixel are multiplied by the alpha value before being stored in the image. Again, the blending equation is:

blend(source, destination) = (source ⋅ 1) + (destination ⋅ (1 − sourcealpha))

Premultiplied alpha links the color to the alpha value through the equation below (Jaggo, n.d.). The alpha value of the source obscures the destination’s color.

premulitpliedAlphaColor = (R ⋅ A, G ⋅ A, B ⋅ A, A)

Image 3 — (Jaggo, n.d.)

The advantage of using this method is that the image is already prepared for further processing, such as blending or overlaying on other images, thus reducing the number of required operations.

Thank you for reading.

References

Batt, S. (2021, March 24). What Is the Alpha Channel in PNG Images? MakeUseOf. https://www.makeuseof.com/tag/alpha-channel-images-mean/

Boatman, A. (2017, March 14). JPG vs. PNG: Which Should I Use? | Blog | TechSmith. Welcome to the TechSmith Blog. https://www.techsmith.com/blog/jpg-vs-png/

Jaggo, J. (n.d.). Computer Graphics: Blending. Cglearn.codelight.eu. Retrieved July 2, 2022, from https://cglearn.codelight.eu/pub/computer-graphics/blending

--

--