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 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|
A transparent PNG displayed on a white background
A transparent GIF (matted to white) displayed on a white background
The same PNG from above, displayed on a blue background
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.
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)
|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|
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)
|Size vs. Original
|TIFF (LZW) 1||4.88||43.6|
|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|
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:
- PNG compression remains slow, and produces unusually large file sizes (using the "Save for Web" is better, but still not great).
- Although Photoshop 7 supports images with 16-bpc, including PNGs, it is incapable of writing a PNG with 16-bpc. Additionally, due to a bug in Photoshop 7's 16-bit support, alpha information is ignored when loading a 16-bpc image.
- Text annotations (image description, creation date, copyright information, etc) are also not supported.
- Photoshop 7 has no support at all for 8-bit alpha-indexed PNGs.
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
|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||A||r / w||r / w|
|Indexed||8-bit||r / w||r / w|
|8-bit + Alpha3||B||r1,2||r1,2|
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)
|Photoshop CS PNG||58.4||58.4|
|Photoshop 7 PNG||126||58.4|
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).
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 ).
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)||1||2||3||4|
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.
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
- PNG Home Page – everything you ever wanted to know about PNG
- MNG Home Page – information about the "animated PNG" format
- SuperPNG – freeware plug-in that enhances Photoshop's PNG capabilities
- PNGCrush – freeware PNG optimizer (DOS)
- PNGQuant – freeware; converts 8-bpc RGBA to 8-bit alpha-indexed (DOS)
- BMP2PNG – freeware BMP to PNG converter (DOS)
- PNG Test Page – a test page for comparing browser PNG support
- A List Apart – Cross-Browser Variable Opacity with PNG
- Mozilla – Mozilla, Firefox and Thunderbird home page
- W3C – World Wide Web Consortium home page