IN THIS TUTORIAL
Getting familiar with the PNG
Advantage of PNG
Support for PNG
Compression of PNG
JPG, GIF, and PNG are the most commonly used graphics file formats for putting graphics on the World Wide Web, but PNG really has many advantages over GIP and JPG
The Powerful PNG
PNG (Portable Network Graphics) is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet. Despite getting off to a slow start, PNGs are now supported by all browsers in current use and are becoming many developers’ first choice in web graphics formats.
PNGs offer an impressive lineup of features:
- The ability to contain 8-bit indexed, 24-bit RGB, 16-bit grayscale, and even 48-bit color images
- A lossless compression scheme
- Simple on/off transparency (like GIF) or multiple levels of transparency
- Progressive display (similar to GIF interlacing)
- Gamma (brightness) adjustment information
- Embedded text for attaching information about the author, copyright, and so on
- Full color support.
- Full alpha channel support.
- Efficient lossless compression. (And by the end of this article, smaller than an equivalent GIF!)
- Patent free and open source.
Editor Support for PNG
The PNG format is widely supported by graphics programs, including Adobe Photoshop, Corel’s Photo-Paint and Paint Shop Pro, the GIMP, GraphicConverter, Helicon Filter, ImageMagick, Inkscape, IrfanView, Pixel image editor, Paint.NET and Xara Photo & Graphic Designer and many others. Some programs bundled with popular operating systems which support PNG include Microsoft’s Paint and Apple’s iPhoto and Preview, with the GIMP also often being bundled with popular Linux distributions.
Multiple image formats
The PNG format was designed to replace GIF for online purposes and TIFF for image storage and printing. A PNG can be used to save many image types: 8-bit indexed color, 24- and 48-bit RGB color, and 16-bit grayscale.
8-bit indexed color images
Like GIFs, PNGs can store 8-bit indexed images with a maximum of 256 colors. They may be saved at 1-, 2-, and 4-bit depths as well. Indexed color PNGs are generally referred to as PNG-8.
RGB/Truecolor (24- and 48-bit)
In PNGs, each channel (red, green, and blue) can be defined by 8- or 16-bit information, resulting in 24- or 48-bit RGB images, respectively. In graphics programs, 24-bit RGB PNGs are identified as PNG-24. It should be noted that 48-bit images are useless for the Web, and even 24-bit images should be used with care. Because it is lossless, 24-bit PNGs are nearly always significantly larger than a lossy JPEG of the same image.
Transparency of image
PNG offers a variety of transparency options. With true-color and grayscale images either a single pixel value can be declared as transparent or an alpha channel can be added (enabling any percentage of partial transparency to be used). For paletted images, alpha values can be added to palette entries. The number of such values stored may be less than the total number of palette entries, in which case the remaining entries are considered fully opaque.
Multiple levels of transparency are not supported by Internet Explorer 6 and earlier for Windows.
PNGs can also be coded for interlaced display. When this option is selected, the image displays in a series of seven passes. Unlike interlaced GIFs, which fill in horizontal rows, PNGs fill in both horizontally and vertically. Interlacing adds to the file size and is usually not necessary, so to keep files as small as possible, turn interlacing display off.
PNG uses a 2-stage compression process:
- pre-compression: filtering (prediction)
- compression: DEFLATE
PNG uses a non-patented lossless data compression method known as DEFLATE, which is the same algorithm used in the zlib compression library.
File size factors
PNG files vary in size due to a number of factors:
Color depth can range from 1 to 64 bits per pixel.
PNG supports metadata—this may be useful for editing, but unnecessary for viewing, as on websites.
As each pass of the Adam7 algorithm is separately filtered, this can increase file size.
As a precompression stage, each line is filtered by a predictive filter, which can change from line to line. As the ultimate DEFLATE step operates on the whole image’s filtered data, one cannot optimize this row-by-row; the choice of filter for each row is thus potentially very variable, though heuristics exist.
With additional computation, DEFLATE compressors can produce smaller files.
Lossy PNG compression
Even though PNG has been designed as a lossless format, PNG encoders can pre-process image data in a lossy fashion (so as to reduce colors used) to improve PNG compression.
When to use PNGs
PNGs pack a lot of powerful options, but competition among web graphic formats nearly always comes down to file size.For web purposes, JPEG is still the best choice for photographic and continuous tone images. PNG is your only option and may be worth a slightly heftier file size.
Coming Up … …