Transparency Concept in PNG

On January 18, 2015, in Other Online Technology, by James Liu

Transparency is fully supported in PNG, but it is very complicated to manipulate in program. PNG supports three main types: truecolor(rgb or 24-bit), grayscale, and palette-based(8-bit). All of them can have alpha information, but it’s most commonly used with truecolor image. The truecolor (RGB) PNGS, are supported in only two depths: 8 and 16 bits per sample (for each pixel, generally 8 bits or 16 bits are used for each channel), corresponding to 24 and 48 bits per pixel. Normally, the truecolor is 24 bits per pixel. The truecolor png with alpha channel is known as RGBA (32-bit). This transparency feature is important to create special effects such as making a central oval region fully opaque, the outer regions fully transparent, and the transition region that varies smoothly between the two extremes. A real case is a square picture with a solid red ball with shadow. The solid red ball is fully opaque, the shadow is transition region, the rest of space is fully transparent.

Truecolor PNG Example

Truecolor PNG Example

The RGBA image has critical problem, the file size. The palette-based PNG or indexed-color PNG is more efficient in file size. Palette-based PNG has four different types of pixel depths, 1, 2, 4, and 8 bits. Therefore, palette-based PNG support maximum 256 colors. The palette-based PNG is using a simple way to support alpha. It adds a transparency palette after color palette. It may contain as many transparency entries as there are palette entries.

PNG Subatomic Structure

PNG Subatomic Structure

The truecolor PNG have another way to support transparency besides alpha channel. It is using transparency palette to implement a simple transparency feature. The type of PNG (RGB with Transparency) will define a RGB color as transparent color, so that the corresponding RGB pixel in PNG image will be treated as fully transparent. (I guess the PHP function imagecolortransparent() is building this type of PNG with transparency.)

Extra Reading:

PNG Basics
A Basic Introduction to PNG Features: Alpha Channels Section

What’s Color Depths?

Color depth, also known as bit depth, is either the number of bits used to indicate the color of a single pixel. For indexed color PNG, it is typically a number representing the index into a color map or palette. The palette-based (indexed-color) PNG is supported in four pixel depths: 1, 2, 4, and 8 bits, corresponding to a maximum of 2, 4, 16, or 256 palette entries (colors).

  • 1-bit color (21 = 2 colors): monochrome, often black and white
  • 2-bit color (22 = 4 colors)
  • 4-bit color (24 = 16 colors)
  • 8-bit color (28 = 256 colors)

When referring to a pixel the concept can be defined as bits per pixel (bpp), which specifies the number of bits used. For a 8-bit color per pixel, 3 bits are for R component; 3 bits are for G component; the 2 remaining bits are for B component. In this way, it will be able to represent 256 (8 x 8 x 4) different colors. According to Wikipedia, the reason for only allocating 2 bits for B component is because:

The normal human eye is less sensitive to the blue component than to the red or green (two thirds of the eye’s receptors process the longer wavelengths[8]), so it is assigned one bit less than the others.

When referring to a color component the concept can be defined as bits per channel (bpc), bits per color (bpc), or bits per sample (bps). For example, the normal RGB PNG has 8-bits depths per channel or 8-bits depths per sample, which means each R component, G component, and B component is represented by 8-bits.


Leave a Reply

WordPress Blog