The Motive Web Design Glossary
portable network graphics (PNG)
A PNG is a bitmap image file format.
The PNG format was developed as a patent-free replacement to the GIF format created by CompuServ in 1989 (as in the ‘GIF 89A’ export function in early versions of Photoshop).
Features of the PNG file format
The new standard supports a range of features not available in the GIF format:
- alpha transparency: allowing ‘clean’ matting against colour backgrounds and image-wide opacity
- gamma and chromaticity correction: information about the originating platform is stored in the image file allowing it to compensate for a range of displays [1]
- metadata: the file can contain text information on the image title, author, description and copyright
- smaller file size: PNG files average 30% smaller than their index colour GIF counterparts, and 30-40% than the equivalent RGB TIFF
- quicker display: due to an advanced interlacing scheme a preview of a PNG image is available after downloading on 1/64th of the image data compared with 1/8th for GIF files
The PNG format is best suited for images containing large areas of flat colour. It is not suitable as a file type for photographic images. (For photographic images prefer the use of the JPEG format.)
References and further reading
- [1] PNG factsheet W3C
- Creative use of PNG transparency in web design (Jeff Croft, Digital Web Magazine)
Transparency/opacity and masking using PNG images. - Cross-browser variable opacity with PNG: A real solution (Michael Lovitt, A List Apart)
A major bug-bear is that PNG alpha (24-bit) transparency, which allows for semi-transparent pixels, is not supported by Internet Explorer (up to and including version 6). - PNG FAQ (Greg Roelofs)
Includes notes Microsoft Office Ineternet Explorer printing bug (does not print PNG files depending on the printer driver used). - The sad story of PNG gamma correction (Henri Sivonen)
Results may vary if attempting to match colours in PNG files with colours in other image file formats or CSS-specified colour values.
Glossary A-Z