PNG Compression – 1

The Portable Network Graphics (PNG) is similar to the Bitmap concept, which supports transparency and was improved upon from the Graphics Interchange Format (GIF) as an image-format not requiring a patent license. Basically this is a free-to-use image format. Yes! One generally needs to pay to obtain the standard and then implement it. For eg. Sony pays for the standard DivX to make DVD players.

Before we start of, I would just like to mention that this information (standard) is freely available in totality at this W3C page. Anyways, so without further ado, lets get started on encoding images to the PNG format.

We shall restrict ourselves to the True Colour + Alpha format of images that PNG supports. Also, lets have this at 8-bits/layer which is the most frequently occurring case.

You must have noticed that images on a slow network connection load in successive progressive layers which make the image quality better and better. This image in high probability is a PNG and this property is called the Interlacing and Pass Extraction.

Adam7 Pass Extraction - Cour. Wiki

Adam7 Pass Extraction - Cour. Wiki

The image above is a 16×16 block (just a representation) of how progressive pass extraction is carried out. This is called the Adam7 as it consists of 7 passes. This essentially lets you see a low quality image instead of a half image in case your internet connection is slow.

1 6 4 6 2 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
3 6 4 6 3 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7

The above numbers indicate which layer the pixel is assigned to in every 8×8 block of image. As can be seen, the 1st layer just consists of 1 pixel every 8×8 block of image. The second layer too has 1 pixel, but it gradually increases as 2, 4, 8, 16, and 32 summing up to 64 pixels and increasingly refining the image quality. All these pixels are pulled out layer by layer in an entire image and are called reduced images.

These reduced images are further treated to Scanline Serialization, i.e. picking row-by-row of each reduced image. These rows are called Scanlines and are represented as bytes. (We had mentioned that we’ll use 8-bit per layer which makes it easy to understand the Scanline of bytes concept.) We thus have 4 bytes per pixel (Red, Green, Blue and Alpha).

We shall continue this post on PNG compression..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s