Portable Network Graphics

PNG (abbreviations in English of Portable Network Graphics, Portable Network Graphics) is a graphic format based on a lossless compression algorithm for bitmaps not subject to patents. This format was developed in large part to overcome the deficiencies of the GIF format and allows images with a greater contrast depth and other important data to be stored.

PNG images use the extension .png and have obtained a MIME type (image/png) approved on October 14, 1996.

Technical details

A PNG file starts with an 8-byte signature, whose hexadecimal values are: 89 50 4E 47 0D 0A 1A 0A, decimal values are: 137 80 78 71 13 10 26 10; each value is there for a specific reason.

File segments

Following the header are a series of segments, each of which stores certain information about the image. Segments are self-declared as critical or ancillary points so that a program that encounters an auxiliary segment and doesn't understand it can safely ignore it. The segment-based structure is designed to be able to extend the PNG format while maintaining backwards compatibility.

Each of the sections has a header that specifies its size and type, immediately followed by the data and the checksum of the data. Sections have a 4 letter name that is case sensitive. The use of upper or lower case in such a name provides decoders with information about which sections are not recognized.

If the first letter is capitalized this indicates that the section is essential, otherwise it will be auxiliary. The essential sections are necessary to read the file, if the decoder finds an essential section that it does not recognize it must abort the read.

In case the second letter is capitalized this will mean that the section is public in the specification or registry of special purpose sections, otherwise it will be private (not standardized). This case sensitivity ensures that there are never any conflicts between public and private sections.

The third letter must be uppercase to meet PNG specifications and is reserved for future expansion.

The fourth letter indicates if it is safe to copy the section in case it is not recognized, if it is in lowercase it is safe to copy the section regardless of the amount of modification that the file has undergone, if it is uppercase it should only be copy if there are no critical sections that have been modified.

Essential Sections

A decoder must be able to understand these sections to read and render a PNG:

• IHDR, it must be the first section, it contains the header.
• PLTE contains the palette (color list).
• IDAT, contains the image that should be divided into multiple IDAT sections, making this increase the image size slightly but makes it possible to generate PNG images in streaming.
• IEND, mark the end of the image.

Metadata Sections

Other attributes that can be stored in a PNG image are: gamma values, background color, and textual information. PNG also supports color correction using color management systems such as sRGB.

• bKGD: contains the default background color, it is used when there is no better color available to display, as in an image viewer but not in a web browser.
• cHRM: white balance.
• gAMA: specific gamma.
• hIST: save the histogram or total amount of each color in the image.
• iCCP: ICC color profile.
• iTXt: contains text (UTF-8) compressed or not.
• pHYs: contains the expected pixel size and/or image ratio.
• sBIT: (significant figures) indicate the accuracy of the colors in the image.
• sPLT: suggests a palette to use in case the full range of colors is not available.
• sRGB: indicates that the sRBG color space standard is used.
• tEXt: stores text that can be represented in ISO 8859-1 with a name=value for each section.
• tIME: stores the date of the last modification.
• tRNS: contains information on transparency. For indexed images store the alpha channel for one or more pallets, for real color images and gray scales stores the information of a single pixel that should be considered completely transparent.
• zTXt: contains compressed text with the same limits as tEXt.

The first lowercase letter of these sections indicates that they are not required in the PNG specification, the last lowercase letter indicates that they are safe to copy even if the application in question does not understand them.

Other attributes that can be stored in a PNG include gamma correction values, background color, and metadata. PNG also uses color correction used by color management systems such as sRGB. Some programs like Adobe Photoshop have this system.

Color Depth

PNG images can be palette-indexed images or consist of single or multiple channels. If there is more than one channel, all channels have the same number of bits per pixel (also called bit depth per channel). Although the official PNG specification lists the bit depth per channel, usually editing programs name only the total number of bits per pixel, that is, the color depth.

The number of channels depends on whether the image is grayscale or color and whether it has an alpha channel (also called a transparency channel). The combinations allowed by PNG are:

• Grey scale (1 channel).
• Grey and alpha channel scale (2 channels).
• Red, green and blue channels (RGB, 3 channels, also called true color or Truecolor).
• Red, green, blue and alpha channels (RGB + alpha, 4 channels).

On the other hand, indexed images have a maximum of 256 colors. This color palette is stored with a channel depth of 8 bits. The palette cannot have more colors than those marked by the bit depth, that is, 2⁸=256 colors, although it can have less (for example, an image with 50 colors will only store 50 entries, avoiding storing data that is not used).

The table on the right indicates the color depth for each image format that PNG supports. This is taken from the bit depth per channel and multiplied by the number of channels. The boxes in red represent unsupported combinations. The standard requires decoders to be able to read all available formats, but many image publishers can only output a small subset of them.

Transparency in the image

PNG offers a wide variety of transparency options: with true color or grayscale, even a single pixel can be declared transparent or an alpha channel can be added. For images that use palettes you can add an alpha channel to the palette entries. The number of such stored values can be less than the total number of entries in the palette, so the rest of the entries will be considered completely opaque. Searching for pixels with binary transparency should be done before any color reduction to prevent some pixels from being accidentally made transparent.

Unlike the transparency offered by GIF, which can only take 2 values (fully transparent or fully opaque), PNG's alpha channel allows you to use higher bit depths to achieve semi-transparency effects, typical of translucent objects. For example, with a depth of 8 bits for transparency you can get 2⁸ = 256 different degrees of transparency, just like a color.

Compression

The compression method used by the PNG is known as deflation (in English "Deflate algorithm"). There are also filtering methods. In specification 1.2, a single type of filter is defined, which includes 5 pixel value prediction modes, which is very useful for improving compression, where a prediction method is chosen for each line of the image (scanline). filtering that predicts the color of each pixel based on the colors of the previous pixels and subtracts the color of the current pixel from the predicted color. The five methods are: None, Sub, Up, Average, and Paeth.

These filters can greatly reduce the final file size, although it is highly dependent on the input image. The compression algorithm can take care of the appropriate choice of the method that offers the greatest reduction.

The MIME media type for PNG is "image/png" (approved on October 14, 1996).

Animation

APNG is an extension of PNG that supports animation. This format supports viewing a single image in case the decoder does not understand the file. It is accepted by multiple browsers and has the extension .png.

On the other hand, MNG is an image format that supports animation and is based on the ideas and some sections of PNG, but it is a complex system and does not allow viewing a single image in case there is no full support in the relevant image viewer.

Technical comparison with other formats

Comparison with GIF

• In most cases, PNG compresses better than the GIF format, although some implementations (see Photoshop) perform a poor selection of filtering methods and generate larger files.

• The PNG supports, like the GIF, indexed images with 1-bit or "binary" transparency. This type of transparency does not require an additional channel and only admits that a palette color appears transparent to 100%.

• The PNG supports formats with a color depth of millions of colors (true color) and alpha channel, which provides a much richer and more accurate color range than the GIF and has intermediate transparency values. Unfortunately, this allows the PNG to be mistakenly compared with the indexed GIF (256 colors).

• GIF supports animation and PNG is not. (see animation section).

Comparison with JPEG

Composite picture comparing JPEG and PNG: Note the artifices in the JPEG image versus the solid color background for the same image in PNG.

PNG and JPEG are formats that are designed for different functions, so only a general comparison can be made:

• JPEG has an enormous compression ratio to the detriment of image quality, ideal for large images and photographs. No transparency.

• PNG is a format without loss of quality with excellent compression, ideal for images formed by large areas of flat color or with few color variations. It supports alpha channel and some extra attributes such as gamma correction. However, it does not support CMYK mode, so it is not entirely useful for printing designs.

PNG on the web

• Although the technical and compression characteristics make PNG an ideal format to replace GIF, its adoption has been very slow, due in part to erroneous comparisons and some technical disadvantages:
• It is not supported by some very old browsers (such browsers, however, entered into disuse in the first decade of the centuryXXI).
• the color management failed in some browsers (easily avoidable for the previous reason).

Color issues

Some versions of some web browsers display gamma correction values even when they are not specified in the PNG. Known browsers with PNG display issues:

• Internet Explorer 5.5 and 6.
• Netscape 7.0 to 7.2.
• Opera (versions prior to 7.50).

The end effect is that the color displayed in the PNG does not match the color scheme of the rest of the web page. An easy way around this is to re-encode the PNG by truncating certain attributes. Some utilities for this purpose:

• PNGOUT is a free DOS utility that uses an exclusive algorithm to repress a PNG and reduce file size to a minimum, without losses.
• Superpng, is a free Photoshop plugin that allows the optimization of PNG files.
• OptiPNG is a free utility that rewards a PNG, reducing its size without loss.