The PNG File Format

Portable Network Graphic, or PNG (pronounced "ping") is a remarkable image format with a lot of cool features such as: "48-bit" (16 bits per channel) true color or 16-bit grayscale, lossless compression, gamma correction, two-dimensional interlacing, and best of all alpha transparency.

Originally designed to replace GIF (and to some extent, TIFF), PNG is the only truecolor, lossless image format that is both cross-platform and application independent — meaning that, unlike TIFF, any supporting application will be able to read a PNG created by another application. PNG is also patent-free and endorsed by the World Wide Web Consortium  (W3C).

PNG Features

PNG has the capability for both binary transparency (like GIF) and variable transparency, more commonly referred to as alpha transparency or translucency. Stored as RGBA (Red, Green, Blue, Alpha), each pixel is assigned one extra byte of data (or palette entry for 8-bit images) that defines its transparency level from 0 (fully transparent) to 255 (fully opaque). What does all this mean? For one thing, anti-aliased images will look good on any background. Imagine, no more ugly image halos or fringing! You can even apply background-independent effects such as drop-shadows and glows.

PNG Transparency GIF Transparency
Transparent PNG on white background Figure 1.1
A transparent PNG displayed on a white background
Transparent GIF on white background Figure 1.2
A transparent GIF (matted to white) displayed on a white background
Transparent PNG on blue background Figure 1.3
The same PNG from above, displayed on a blue background
Transparent GIF on blue background Figure 1.4
The same GIF from above, displayed on a blue background

Figure 1: As you can see, PNG's superior alpha transparency ensures accurate image rendering even on different colored backgrounds (left), unlike GIF's limited binary transparency (right).

PNG also has an optional seven-pass, two-dimensional interlacing scheme (named Adam-7, after developer Adam Costello), which progressively displays the image both horizontally and vertically. The first pass in a PNG contains only 1/64th of the image data, whereas GIF's first pass contains 1/8th of the image data. This means that in addition to displaying sooner, PNG will have completed four passes by the time GIF's first pass is done. And, because at this point the PNG is only stretched by a factor of 2:1 compared to GIF's 8:1 ratio, the PNG is typically readable in about half the time. Note that enabling interlacing does add slightly to the file size, regardless of which format you use.

PNG vs. GIF interlacing

Figure 2: After just one pass, an interlaced PNG is completely visible (left), whereas the equivalent GIF is only 1/8th visible (right).

(Click on the image to restart the animation.)

Another great feature of the PNG format is gamma correction. Often, gamma differences between platforms can make an image appear darker or lighter. The PNG format, however, stores the original gamma information to ensure that the image is displayed correctly in any gamma-aware environment in which it is viewed.

Arguably PNG's biggest advantage is its phenomenal compression algorithms. In most circumstances, PNG produces smaller files sizes than either GIF or TIFF (typically between 5% and 30% smaller, but up to 60% in some cases). And because PNG is a lossless format, you can edit and save your images as often as you like without compromising image quality, unlike standard JPEG (even at maximum quality). That said, JPEG is still the preferred format for saving photographic imagery on the Web, as it produces much smaller files due to its lossy compression.

The table below summarizes the results achieved by saving a GIF and an equivalent PNG using Photoshop's Save for Web plug-in and SuperPNG  (a freeware plug-in). In this case, the PNG saved with SuperPNG is almost one third smaller than the GIF.

GIF vs. PNG: a comparison of GIF and PNG compression for a typical screen capture (24-bit, 1280×1024)

  File Size
(KB)
Size vs. GIF
(%)
GIF (8-bit, dithered) 66.9 n/a
Photoshop CS: Save for Web, PNG (8-bit, dithered) 44.3 66.2
Photoshop 7: Save for Web, PNG (8-bit, dithered) 53.9 80.6
Photoshop: SuperPNG1 (8-bit, dithered) 44.3 66.2
  1. SuperPNG  is a freeware plug-in (by Brendan Bolles) that greatly enhances Photoshop's PNG capabilities

In the next table, a similar comparison of TIFF versus PNG compression was conducted. Again, the PNG format produces a smaller file size than the various TIFF compression methods — the exception being the lossy JPEG method, which is not really a fair comparison, since PNG is lossless. It's also interesting to note that although PNG's compression algorithm is the same as TIFF's ZIP/FLATE method, PNG's predictors/filters give it a slight advantage.

TIFF vs. PNG: a comparison of TIFF and PNG compression for a typical 4MP digital photo (24-bit, 2288×1712)

  File Size
(MB)
Size vs. Original
(%)
TIFF (Original) 11.2 n/a
TIFF (LZW) 1 4.88 43.6
TIFF (ZIP) 4.85 43.3
TIFF (JPEG, maximum quality) 2 1.67 14.9
Photoshop CS PNG 3 4.14 37.0
Photoshop 7 PNG 3 4.31 38.5
SuperPNG 3 4.14 37.0
  1. The LZW compression algorithm is subject to the same patent restrictions as GIF
  2. JPEG is a lossy compression method that cannot be equally compared to the other formats in this table
  3. By using PNGCrush  (a freeware PNG optimizer), these files may be further reduced in size to 4.13MB

One GIF feature that PNG makes no attempt to replicate is animation, as this would add unnecessary overhead to the single-image format. Instead, a separate PNG-like format called MNG (Multiple-image Network Graphic) was developed. For more information about MNG, visit the official MNG home page .

Photoshop and PNG

While Photoshop has supported the PNG format since version four (1997), it wasn't until version seven (2002) that the majority of its PNG-related issues were finally resolved. Nevertheless, its level of support is still not what one might expect given its price tag. For example:

Fortunately, all but the latter of the above issues can be resolved by using SuperPNG , a freeware plug-in by Brendan Bolles.

Finally, with the release of Photoshop CS (version eight), Adobe addressed nearly all of the remaining PNG issues, however, support for alpha-indexed PNGs was not added. So, regardless of which version of Photoshop you use, you'll still need PNGQuant  (a freeware DOS-based converter) to convert PNGs from 8-bpc RGBA to 8-bit alpha-indexed.

The following table summarizes the bit-depths supported by the PNG format (plus JPEG, GIF and TIFF) as well as Photoshop's ability to read and write them.

Photoshop PNG Support: a summary of PNG-supported bit-depths (compared to JPEG, GIF and TIFF) and Photoshop's compatibility

Format (depth) PNG JPEG GIF TIFF Photoshop 7
PNG support
(read?/write?)
Photoshop CS
PNG support
(read?/write?)
Truecolor 16-bpc RGBA         r1 r / w
16-bpc RGB         r / w2 r / w
8-bpc RGBA         r / w r / w
8-bpc RGB         r / w r / w
Grayscale 16-bpc + Alpha         r1 / w2 r / w
16-bpc         r / w2 r / w
8-bpc + Alpha         r / w r / w
8-bpc     xA   r / w r / w
Indexed 8-bit         r / w r / w
8-bit + Alpha3     xB   r1,2 r1,2
  1. Grayscale may be faked using a 256-color gray palette
  2. Only supports binary transparency (i.e., fully opaque or fully transparent)
  1. Alpha information is ignored in Photoshop, but is displayed correctly in ImageReady CS
  2. Requires SuperPNG plug-in
  3. Since Photoshop is not capable of creating an 8-bit alpha-indexed PNG, use PNGQuant to create one from an 8-bpc RGBA image

Even though the PNG format has lossless compression that is second to none, not all applications write properly optimized PNGs. For example, prior to Photoshop CS, Photoshop was notorious for writing large PNGs. The table below compares the results achieved with SuperPNG, BMP2PNG (a freeware DOS conversion utility), and Photoshop's native PNG plug-in. For comparison, each file was further optimized using PNGCrush.

Optimizing PNGs: A comparison of three alternatives used to save Paul Schmidt's 16.7-million-color test image  (48MB BMP)

  File Size
(KB)
After PNGCrush
(KB)
Photoshop CS PNG 58.4 58.4
Photoshop 7 PNG 126 58.4
SuperPNG 58.2 58
BMP2PNG 58.1 58

To demonstrate PNG's extraordinary compression capabilities, the above example was done with a 4096×4096 image containing all 16.7 million colors of the 24-bit palette (created by Paul Schmidt, a member of the PNG Development Group). As a BMP, this file is 48MB; however, when saved as a PNG, it's only 58 KB. That's right, without throwing away any data whatsoever, this image achieves an unbelievable 845:1 compression ratio! Even at a quality of 0%, the lossy JPEG format is no match for that kind of compression (achieving only 157 KB; a 313:1 ratio).

Browser Support

Technically speaking, PNG is a Web format, and as such, this article just wouldn't be complete without discussing browser support.

According to January 2003 statistics, almost 99% of the Internet population have browsers with at least basic PNG support. In fact, the majority of modern browsers now have near-perfect support for PNG — the notable exception being Internet Explorer for Windows, which does not support alpha-transparent PNGs (see the table below). Unfortunately, Internet Explorer accounts for 92% of the browser population (although this number is steadily decreasing as people adopt newer, more secure browsers such as Mozilla Firefox ).

Browser support

PNG alpha displayed in Firefox PNG alpha displayed in Internet Explorer 6

Figure 3: While the majority of modern browsers support full alpha-transparent PNGs (left), Internet Explorer for Windows substitutes a neutral gray background instead (right).

Browser Support: A comparison of PNG features supported by various browsers

  Mozilla/ Firefox Opera Netscape 7.x Internet Explorer 6 (Windows) Internet Explorer 5.2 (Mac) Safari (Mac)
Basic PNG support            
PNG 1-bit transparency            
PNG 8-bit transparency            
MNG support (animated PNGs) x1 x2 x3 x4    
  1. Native support in Mozilla 1.4 and earlier; Mozilla 1.5+ (and Firefox) require a plugin
  2. No native support; plugin available
  3. Native support mostly available (based on earlier Mozilla code)
  4. No native support; ActiveX control available

While it is anticipated that future versions of Internet Explorer (for Windows) will have complete PNG support, that remains to be seen. In the mean time, you can still achieve full alpha transparency by using the proprietary CSS AlphaImageLoader filter . Here is a simple PNG Transparency Test  page that demonstates how the various browsers handle both 8-bit alpha-indexed and 8-bpc RGBA ("32-bit") PNGs.

Conclusion

It's obvious that PNG has many advantages over GIF and TIFF: Web designers can benefit from smaller file sizes and advanced image blending; graphic artists can distribute artwork while ensuring accurate brightness/contrast and image integrity; and digital photographers can save lossless, compressed 16-bpc color and greyscale images. So why not show your support by signing the Proper PNG in IE Petition  and by incorporating PNG in your workflow.

Related Links and Useful Resources

 

If you enjoyed this article, please consider supporting this site. As always, I welcome your feedback and suggestions.