PNG

PNG is a super popular raster file format for storing pictures. Many people use it because it is widely supported by applications and software. If you're into web design or development or just curious about image files, it's important to know about PNG. Let's quickly review its history and what makes it so popular today.

Birth of PNG

Back in the early days of the Internet, people used GIF a lot for images. But there was a problem: the company that owned the patent for LZW compression used in GIF—Unisys Corporation, wanted people to pay for using it. So, a group of smart folks led by Thomas Boutell came up with a solution. They created during 1995—1996 an open and free alternative—a new format called PNG, which stands for Portable Network Graphics. Also, unofficially, it stands for "PNG is Not GIF". The .png extension identifies files in this format.

To understand how PNG works, let's take a look at how it's organized.

How PNG is organized

As a usual bitmap file format, the PNG has a special part at the beginning called a header or signature, which tells you or a program that it's a PNG image. After the signature, there are a series of blocks called chunks. Each of these chunks holds specific information about the image data. There are two types of chunks: critical and ancillary. The critical ones should always be present in a PNG file.

Let's break them down:

1. The Image Header (IHDR) specifies basic features like image width, height, compression method;
2. The Palette (PLTE) chunk defines a color palette for the image;
3. The Image Data chunks (IDAT) hold the image data compressed with Deflate algorithm. If the image is big, you might see multiple IDAT chunks.
4. The Image End (IEND) chunk marks the end of a PNG file.

Every PNG file has to have the IHDR, IDAT, and IEND chunks. Without them, the PNG file is broken. Check out the picture below for an example of how these chunks are arranged in a PNG file.

So, apart from the critical chunks, there are also chunks called ancillary chunks. They're not really necessary for a PNG file, but they can hold extra info like the background color or other details.

Now, let's dive into the types of images that PNG can store.

Colors, pixels, and channels

Each pixel in PNG can be encoded in bits ranging from 1 to 48, and images can be encoded in various color modes. Here are the main color modes used in PNG:

1. Grayscale. Each pixel in these images has a color value that specifies its intensity. This value is usually 8-bit, ranging from 0 (black) to 255 (white). PNG also supports 16-bit grayscale values for more precise shading.
2. Indexed Color. Indexed color images use a color palette to represent the image. They do it in the same way as BMP and GIF do. Their palette contains a limited set of colors up to 256, and each pixel has an index pointing to a specific color. These images obviously need a PLTE chunk to store the color palette.
3. Truecolor. This mode represents each pixel using three color channels: red, green, and blue (RGB). Each channel is typically represented by an 8-bit or 16-bit value, providing a minimum of 256 levels of intensity per channel. However, PNG doesn't support CMYK (Cyan, Magenta, Yellow, Key/Black) channels commonly used in printing.

Let's talk about how PNG handles transparency. PNG can encode transparency in two ways: by using pixel values in the color palette or by using an additional alpha channel. It encodes the level of transparency for each pixel. The alpha channel is represented by an 8-bit or 16-bit value, where 0 means fully transparent and 255 means fully opaque. This alpha channel can be used with grayscale, truecolor, and indexed images.

• In grayscale, each pixel will be encoded using two values with the same number of bits: one for the alpha value and another one for the pixel intensity value.
• In truecolor images, the alpha channel can be added to the existing three channels — RGB, making it four in total — RGBA.
• For indexed images, either alpha values can be added to the color palette or a separate alpha channel can be used, like in grayscale.

Deflate

The data in the Image Data chunk of a PNG file is compressed using the Deflate compression algorithm. It's a lossless compression, so it doesn't lose any data, and it isn't patented, so there are no fees for using it. The Deflate algorithm is made up of two parts: the LZ77 compression algorithm and Huffman encoding.

LZ77 — a compression algorithm invented by Abraham Lempel and Jacob Ziv. You already know its updated version— LZW, which is used in GIF files. LZ77 is the original version, not updated by Terry Welch. The basic idea is to replace repeated sequences of characters with pointers to those sequences. It works by comparing sequences in a "look-ahead" buffer to sequences in a "search" buffer. When it finds duplicates, it replaces them with pointers that include the distance to the duplicate in the search buffer and the length of the repeated sequence.

Here's an example to help you visualize it.

When you compress data using LZ77, you make it smaller. After that, to make it even smaller, you use Huffman coding. In short, Huffman coding gives shorter codes to things that appear more often and longer codes to things that don't appear as much. That way, you can squeeze the data even more.

In some cases, PNG uses a modified version of LZ77 called LZSS. The main difference here is that in LZSS, you can't make the encoding longer than the original string you're compressing. So, you just skip those cases. And to make things even more efficient, LZSS uses little flags to tell us whether the next piece of data is a pointer or just the uncompressed string itself.

Advantages of PNG

Alright, let's talk about why this file format is so great.

Firstly, PNG uses a lossless compression method that doesn't lose any image data. It's perfect for images that need to look exactly like the original, like drawings, logos, or graphics with sharp edges.

Another great feature of PNG is its support of transparency through the use of an alpha channel. So, you can have transparent backgrounds or pixels that are only partially transparent. Unlike other formats like GIF, PNG lets you have different levels of transparency, not just fully opaque or fully transparent.

PNG can also use various color modes, including grayscale, indexed color, truecolor.

Finally, it is widespread compatibility of PNG. Many different software programs, operating systems, and web browsers can handle PNG files. It's an open-source format, which means it's freely available for anyone to use and improve. That's why it has become a standard format for things like web graphics and digital art.

Disadvantages of PNG

You should know also about its limitations and shortcomings.

First, PNG files tend to have larger file sizes than other image formats like JPEG. This is a common problem for formats with lossless compression. This can be an issue when dealing with large and detailed images. For example, when you use PNG images on the web, it can slow down the loading of web pages because of their large size.

Another thing to note is that PNG doesn't do animations. If you want animated pictures, GIF is still the go-to format for that.

Lastly, It also does not support color models other than RGB. This makes it less suitable for images intended for print production, as they may require conversion to CMYK or another suitable format.

Conclusion

In this topic, we described the PNG format — a popular image format with some neat features.

• A PNG image is made up of the following parts: a signature at the beginning, then, there are chunks. Some chunks should always be in the image, while others are optional.
• It can handle different types of images: grayscale, indexed, and truecolor images.
• It allows transparency in images with the use of an alpha channel or alpha values.
• Furthermore, it uses the Deflate compression algorithm, which combines the LZ77 algorithm and Huffman coding.
• PNG does not support animation and is limited to the RGB color space.

Overall, PNG remains a popular choice for a wide range of applications. It works well with different software and platforms and is great for digital art, icons, and more.