The PNG Format @ OWDC - LESSON 1-07-05

LESSON 1-07-05: The PNG Format

Web Design Lessons > Lesson 1-07-05: The PNG Format

Previous Lesson | Lesson Index | Next Lesson

This section covers the PNG image file format, which was developed as an advanced alternative to the GIF format.

PNG (pronounced "ping") stands for "Portable Network Graphics" and it is a highly advanced image file format destined to make a big impact in the world of web design. However, the lack of support from popular web browsers like Internet Explorer and Netscape Navigator has prevented PNG from reaching the level of popularity it deserves.

The Advanced Features Of PNG

This section has been paraphrased from Jennifer Niederst's Web Design in a Nutshell [pp 291, 1999]

8-bit color depth (256 colors) support like GIF, as well as 16-bit greyscale and up to 48-bit RGB support (which is 281 trillion colors!!!)
A lossless compression technique for indexed color palette images which is better than the one GIF uses
Text storage capabilities for storing meta data (like copyright information, image description, etc.) inside the image file
Uses 2D progressive display method instead of GIFs 1D interlacing method.
Supports "alpha" transparency, which can contain up to 16-bit transparency data enabling PNGs to have up to 65,000 "shades" of transparency - not just on-and-off like GIF, which only have two shades of transparency (black and white).
Contains gamma correction information.
Includes file integrity control and corruption prevention methods.
Has no licencing restrictions whatsoever, so everyone can use the PNG format.

Browser Support Issues

Older browsers had little or no browser support for PNG images. In the early days of Internet Explorer and Netscape Navigator, designers had to use the <embed> tag and not the <img> tag to be able to put PNGs into their HTML documents, and browsers required users to download plugins to be able to view PNG images. Internet Explorer 4 and Netscape Navigator 4.04 implemented some support for PNGs to be viewed as images, but they did not support the advanced features of alpha transparency and gamma correction.

Right now, only a negligable portion of internet surfers use browsers that lack PNG support, so it is fairly safe to use PNGs instead of GIF images.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Next, we'll learn how to use spacer images in our HTML documents. Let's head on to Lesson 1-07-06 now.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!

The Advanced Features Of PNG

Browser Support Issues