PNG File: The Main Features

What image format appears on more Web pages than any other? Not JPEG, as you might have guessed, but PNG. According to Web Technology Surveys, 74.8% of all pages have at least one PNG image, and the percentage goes up every month.

PNG is well-suited for solid-color images without shading, though it can handle any RGB image. It's commonly used for banners, decorations, graphs, and cartoons. Its flexible alpha-channel transparency lets it blend smoothly with other content on a page.

Before everyone was using the Internet, GIF images were popular on services like CompuServe. People could use it to create small image files, which was important when 2400 bps was considered a fast connection. But then Unisys started demanding license fees for the use of its patented compression algorithm.

This got people angry. They weren't going to pay Unisys to post their graphics. JPEG didn't work well on the computers of the nineties. TIFF was so loaded with features it had the same problem.

A group of developers vented their frustration by creating a new, license-free format that was simple but powerful. They called it PNG, meaning Portable Network Graphics. You can pronounce it "P-N-G" or "ping." Unlike GIF, which is limited to 256 colors, it supports full color and grayscale.

The first version of the format definition came out in 1996. The file type uses the extension .png.

In 2003, the format became an ISO standard, with some minor revisions in 2004. It's basically the same as PNG 1.2. Since then the format hasn't changed.

All Web browsers that support graphics will display PNG files.

Exactly what is a PNG file? It's an image file using a lossless compressed image format. "Lossless" means that the compression is fully reversible. The original bits of each pixel can be recovered, bit for bit, by decompressing the file. This is different from formats like JPEG, which lose some low-order data bits for the sake of smaller file sizes. It still compresses well when the image consists of solid chunks of color. Photographic images and drawings with delicate color shadings won't benefit as much from PNG compression. The compression method, called "Deflate," is the same as a widely used ZIP compression method.

A PNG file is made out of "chunks." They include the image data, information needed to draw it, and metadata describing the file. The metadata can include the title, author, copyright, source, creation time, and more. File creators can define new metadata keys. They can even define new chunk types for their own use, and PNG readers that don't recognize the chunks will ignore them.

The image height and width can be as much as 2,147,483,648 pixels. It's hard to imagine a case where this wouldn't be enough.

Images may optionally be interlaced. An interlaced PNG image reorders the data so it can be drawn in two or more passes while processing the data in sequence. This feature isn't used as often today as it was in the days of slow connections and processors. It lets the computer draw a low-resolution version of the image to start with, then add detail on subsequent passes until the user sees the highest quality image.

The PNG format supports several color models:

• Indexed color. Each pixel is an index into the color palette. The maximum pixel size is 8 bits, so there can be up to 256 colors. Indexed color produces very small files when the image only needs a few colors.

• Grayscale. Each pixel holds a single color value, representing a shade of gray. The largest available pixel size is 16 bits.

• RGB color. Each pixel contains three values of 8 or 16 bits each, representing a value of red, green, and blue respectively.

A grayscale or RGB image can have an alpha channel associated with it. The alpha value for each pixel represents not a color, but a degree of transparency. This allows two kinds of effects.

• A partial transparency level, such as 50%, lets one image seem to show through another. This is useful for drawing backgrounds.

• Making some of an image's pixels 100% transparent means nothing will be drawn for those pixels. This lets you create an image that is shaped like a circle or oval, has holes in the middle, or has a completely irregular shape.

It's also possible to specify, without an alpha channel, that a particular pixel value means the pixel is 100% transparent. This method requires less file overhead.

PNG supports ICC color profiles, gamma correction, and white point. These features help to get accurate, consistent color on any calibrated monitor.

RGB is the only full-color model PNG supports. It doesn't support CMYK or spot color, so it's less than ideal for preparing print jobs.

Every image file format works best in certain cases and is less suited for others. The PNG format is most suited for still images with solid colors (as opposed to continuous tones) on a computer screen. It's not as good a choice for printing, and it can't do animation. It's great for logos, banners, charts, and freehand drawings. We can compare PNG with some other popular formats.

• GIF is still around for just one reason: It lets you create simple animations and movies with small file sizes. It's limited to 256 colors, and it doesn't support color profiles. The biggest image is 32,767 pixels in width and height. The patents on it have long since expired, so you can use it for free.

• JPEG is designed for continuous-tone images such as photographs. It uses lossy compression, so it's not a good archival or editing format, but the files are reasonably small. Solid-color images may be blurry, especially at the lower quality levels.

• TIFF supports both lossy and lossless compression and allows multiple images (e.g., thumbnail and full-size image) in one file. It includes features to produce professional-quality color for printing work. It isn't supported by most Web browsers.

• SVG is used for drawings. It describes the image as a set of shapes rather than an array of pixels. A typical SVG file is very small yet looks good at any scale. The format is unsuited for photographs and freehand art.

• WebP is a relatively new image format with good compression in both lossy and lossless modes. Not all browsers support it.