The Complete Guide to PNG (Portable Network Graphics)

PNG (Portable Network Graphics) is a widely used raster image format known for its lossless compression, transparency support, and rich color depth. Developed in the mid-1990s as an open-source alternative to the then-patented GIF format, PNG has since become a fundamental part of web design and digital graphics. In this comprehensive guide, we‘ll explore the ins and outs of PNG from a technical, practical, and historical perspective.

History and Development of PNG

PNG was born out of necessity in 1995 when Unisys, the company holding the patent for the LZW compression algorithm used in GIF, began enforcing its patent and requiring royalties from software developers. A group of developers led by Oliver Fromme, Thomas Boutell, and Tom Lane set out to create an open, patent-free image format that could replace GIF.

The first version of the PNG specification, PNG 1.0, was released on October 1, 1996, after a period of intense discussion and development on the PNG mailing list. The format quickly gained traction and was supported by major web browsers within a year of its release.

Over the years, PNG has undergone several revisions and improvements. The latest version, PNG 1.2, was released in 1999 and is widely supported by modern software and web browsers.

How PNG Works: Technical Details

PNG is a raster image format, meaning that it represents images as a grid of pixels. Each pixel in a PNG image is described by a color value and, optionally, an alpha (transparency) value.

Compression Algorithms

One of the key features of PNG is its use of lossless compression algorithms. Unlike lossy formats like JPEG, which discard some image data to achieve smaller file sizes, PNG‘s compression is entirely reversible, meaning that the original pixel data can be perfectly reconstructed from a compressed PNG file.

PNG uses a two-stage compression process:

Pre-compression: Prior to compression, PNG applies a series of filters to the image data to make it more compressible. There are five types of filters defined in the PNG specification (None, Sub, Up, Average, and Paeth), each of which uses a different algorithm to predict pixel values based on the values of neighboring pixels. The filter that yields the smallest output size is typically chosen for each scanline (row) of the image.
DEFLATE compression: After filtering, the image data is compressed using the DEFLATE algorithm, which is a combination of LZ77 and Huffman coding. DEFLATE is a widely used, general-purpose lossless compression algorithm that is also used in ZIP files and gzip compression.

The combination of filtering and DEFLATE compression allows PNG to achieve significant size reductions while maintaining perfect image quality.

Color Formats and Depth

PNG supports a variety of color formats and depths:

Grayscale: PNG can store grayscale images with 1, 2, 4, 8, or 16 bits per pixel.
Truecolor: PNG can store color images with 8 or 16 bits per sample (24 or 48 bits per pixel).
Indexed color: PNG can store color images with a palette of up to 256 colors (8 bits per pixel).
Grayscale with alpha: PNG can store grayscale images with an alpha channel for transparency, with 8 or 16 bits per sample (16 or 32 bits per pixel).
Truecolor with alpha: PNG can store color images with an alpha channel for transparency, with 8 or 16 bits per sample (32 or 64 bits per pixel).

This flexibility allows PNG to be used for a wide range of image types, from simple black-and-white graphics to high-color-depth photographs.

Transparency

One of PNG‘s major advantages over formats like JPEG is its support for transparency. PNG offers two types of transparency:

Indexed transparency: In indexed-color PNGs, one of the palette entries can be designated as transparent. Pixels with this palette index will be fully transparent.
Alpha channel: In grayscale+alpha and truecolor+alpha PNGs, each pixel has an alpha value ranging from 0 (fully transparent) to 255 (fully opaque). This allows for smooth, partial transparency and anti-aliasing of edges.

PNG‘s transparency support makes it ideal for logos, icons, and other graphics that need to be overlaid on backgrounds of varying colors.

PNG Compression: Stats and Comparisons

To get a sense of PNG‘s compression performance, let‘s look at some stats and comparisons with other image formats.

PNG vs GIF

Compared to GIF, PNG generally achieves better compression for images with many colors, gradients, or photographic content. In a study by WebReference, PNG yielded an average file size reduction of 29% compared to GIF for a set of test images[^1].

Format	Average File Size
GIF	21.7 KB
PNG	15.4 KB

However, for simple graphics with few colors, GIF can sometimes outperform PNG due to its simpler compression algorithm.

PNG vs JPEG

For photographic images, JPEG‘s lossy compression typically results in much smaller file sizes than PNG‘s lossless compression. However, the trade-off is a loss of image quality, particularly at high compression levels.

In a comparison by KeyCDN[^2], a sample photograph compressed as a JPEG at quality level 90 (considered high quality) was 84% smaller than the same image compressed as a PNG. However, the JPEG exhibited visible compression artifacts, while the PNG maintained perfect quality.

Format	File Size	Quality
JPEG	54.3 KB	Slight artifacts
PNG	341.2 KB	Lossless

For graphics with sharp edges, text, or large areas of solid color, PNG is often the better choice, as JPEG‘s compression artifacts can be quite noticeable in these cases.

PNG on the Web: Usage and Best Practices

PNG is widely used on the web for graphics, logos, icons, and other design elements. As of 2021, PNG is used on 74.3% of all websites[^3], making it the second most popular image format after JPEG.

When using PNG on the web, there are a few best practices to keep in mind:

Use PNG for graphics, not photos: As a general rule, use PNG for images that contain text, line art, or graphics with sharp edges, and use JPEG for photographic images.
Optimize PNGs: While PNG is already a compressed format, there are tools that can further optimize PNG files without losing quality. Tools like OptiPNG, pngquant, and TinyPNG can often reduce PNG file sizes by 10-70%[^4].
Use the appropriate color depth: If your image only uses a few colors, consider using an indexed-color PNG (PNG-8) instead of a truecolor PNG (PNG-24) to reduce file size. For images with many colors or smooth gradients, use PNG-24.
Sprite your PNGs: If your web page uses many small PNG images (e.g., icons or buttons), consider combining them into a single "sprite sheet" image and using CSS to display only the relevant portion of the image. This reduces the number of HTTP requests needed to load the page, improving performance.

Tools and Libraries for Working with PNG

There are many tools and libraries available for creating, editing, and optimizing PNGs. Here are a few notable ones:

libpng: The official reference library for reading and writing PNG files, written in C.
pngquant: A command-line utility and library for lossy compression of PNGs.
OptiPNG: A PNG optimizer that uses PNGOUT‘s optimization algorithm.
TinyPNG: A web-based and API-based PNG optimization service.
GIMP: A free and open-source raster graphics editor that supports PNG.
Adobe Photoshop: A widely used commercial raster graphics editor with PNG support.

Common Issues and Pitfalls with PNG

While PNG is a robust and widely supported format, there are a few issues and pitfalls to be aware of:

Large file sizes: For photographic images or graphics with many colors, PNG file sizes can be quite large compared to JPEG. Be sure to use appropriate optimization techniques or consider using JPEG where appropriate.
Lack of animation support: Unlike GIF, PNG does not support animation. For simple animations, GIF is still the best choice. For more complex animations, consider using a video format like MP4 or WebM.
Compatibility issues with older browsers: While PNG is widely supported by modern browsers, some older browsers may not fully support all of PNG‘s features, particularly transparency. Be sure to test your PNGs in your target browsers to ensure compatibility.

PNG and Patents

One of the motivations for creating PNG was to avoid the patent issues surrounding GIF‘s LZW compression algorithm. PNG was designed to be patent-free, and to the best of the authors‘ knowledge, it does not infringe on any patents.

However, in 2004, the company Forgent Networks claimed that it held a patent (US Patent 4,698,672) on the DEFLATE compression algorithm used in PNG. This claim was controversial and was disputed by many in the software community. In 2006, Forgent‘s patent was invalidated by the US Patent and Trademark Office[^5], effectively ending the legal threat to PNG.

The Future of PNG

PNG has been a vital part of the web and digital graphics for over 25 years, and it shows no signs of going away anytime soon. However, there are some areas where PNG could be improved or extended:

Better compression: While PNG‘s compression is quite good, there is always room for improvement. Researchers continue to work on new compression algorithms that could yield even smaller file sizes without sacrificing quality.
Animation support: Adding support for animation to PNG, similar to GIF or APNG (Animated PNG), could make it an even more versatile format.
Progressive rendering: PNG images are currently rendered from top to bottom as they load. Adding support for progressive rendering, where a low-quality version of the image is displayed while it loads, could improve perceived performance.
Metadata support: PNG currently supports a limited set of metadata through its "text chunks". Expanding this to support more types of metadata (e.g., camera information for photos, copyright data, etc.) could make PNG more useful in certain applications.

Looking further into the future, it‘s possible that PNG may eventually be supplanted by newer formats that offer better compression, features, or performance. One potential candidate is AVIF (AV1 Image File Format), which uses the AV1 video codec for compression and claims to offer significant size reductions compared to JPEG and PNG[^6].

However, given PNG‘s widespread adoption, compatibility, and status as an open standard, it is likely to remain an important part of the digital graphics landscape for the foreseeable future.

Conclusion

PNG is a powerful, versatile image format that has played a crucial role in the development of the web and digital graphics. Its combination of lossless compression, transparency support, and wide color depth have made it the go-to choice for graphics, logos, and illustrations online.

By understanding PNG‘s technical details, best practices for usage, and tools for optimization, developers and designers can make the most of this venerable format. And while PNG may eventually be surpassed by newer formats, its impact and legacy will endure.

[^1]: WebReference. "PNG vs. GIF: A Comparative Analysis". www.webreference.com.
[^2]: KeyCDN. "PNG vs. GIF vs. JPEG: A Comprehensive Guide on Image Formats". www.keycdn.com.
[^3]: W3Techs. "Usage statistics of PNG for websites". w3techs.com.
[^4]: TinyPNG. "TinyPNG: PNG Compression". tinypng.com.
[^5]: Wikipedia. "DEFLATE#Patent issues". en.wikipedia.org.
[^6]: Cloudinary. "What is AVIF? The New Next Gen Image Compression Format". cloudinary.com.