The Powerful PNG for Web Graphics|part 4

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 for Web Graphicspart 4

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.

The-Powerful-PNG

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

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

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.

WA RNING

Multiple levels of transparency are not supported by Internet Explorer 6 and earlier for Windows.

Progressive-display

Progressive display 

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.

Compression

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

Color depth can range from 1 to 64 bits per pixel.

ancillary chunks

PNG supports metadata—this may be useful for editing, but unnecessary for viewing, as on websites.

interlacing

As each pass of the Adam7 algorithm is separately filtered, this can increase file size.

filter

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.

compression

With additional computation, DEFLATE compressors can produce smaller files.

Lossy-PNG-compression

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.

Next Tutorial

          Coming Up … …

Previous Tutorial