'The WebMaster Speaks....' 3-1

WebMaster icon, Lecture 3

Graphics Basics

Colors
Bit Depth
Size

Formats

GIF
JPEG
PNG
PICT
TIFF, PDF, PS, ...

Netscape Cache

Copy Graphics

Prev | Next | Improving Your Home Page with Graphics

In its most basic form, an image can be stored by saving the color of every dot (pixel) in a picture. Thinking in black and white, let a single bit (binary digit) represent the "color" of a dot. Assume a 0 is white and a 1 is black. Thus, to store a 640 x 480 black and white screen, it takes 307,200 bits or (dividing by 8 bits in a byte) 38,400 bytes or 38.4 K bytes. Adding color increases the number of bits per pixel. When you set the number of colors (bit depth) in the Monitors Control Panel you have the following choices:

 
Colors    Bits per pixel     Total bits to store  Total bytes to store 
                              a 640 x 480 screen   a 640 x 480 screen 
Black & White     1                   307,200               38.4K 
    4             2                   614,400               76.8K 
   16             4                 1,228,800              153.6K 
  256             8                 2,457,600              307.2K 
Thousands        16                 4,915,200              614.4K 
Millions         24                 7,372,800              921.6K

What is critical on the net is the amount of time needed to transmit an image. Keep in mind the following table when deciding how large an image to put in your web pages:

 
 Connection    Transfer Time for        Transfer Rate 
    Speed        a 100 K file 
                  
    2,400        8-10 minutes         10-14 K per minute 
    9,600         2-4 minutes         40-50 K per minute 
   14,400          90 seconds         60-80 K per minute 
   56,700          20 seconds       240-300 K per minute

To reduce the size of an image, you can reduce the number of dots or the number of colors in the image. The following icon is 45 x 25 dots with 5 colors:

That image takes up 371 bytes. But 45 x 25 x 5 = 5,625 / 8 = 703 bytes. So what happened? When images are stored in the GIF format, a compression algorithm is applied to reduce the actual information stored. If you think in black and white, if there were a large white (or black) area in a picture, rather than storing all those white dots, you could encode the fact the there are 5,000 white dots rather than storing all 5,000 dots. That compression is the reason the actual image is 371 rather than 703 bytes.

Most browsers can view the two major formats. These formats are GIF (Graphical Interchange Format) and JPEG (Joint Photographic Experts Group). The compression technique used in the GIF format is patented by Unisys but used when CompuServe developed the format. In 1994, Unisys announced that they were going to charge a royalty for use of the format. A huge outcry on the net resulted in Unisys changing its policy and they do not charge for non-commercial, non-profit use on online services. GIF files preserve an image's quality while JPEG images are smaller, but do have some slight image loss (lossey). These formats usually display 256 color images.

A more recent image format is PNG - Portable Network Graphics. This is a lossless format developed in 1995 in reaction to the GIF patent dispute. For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%, not a large enough factor to encourage folks to switch on that basis alone. One GIF feature that PNG does not try to reproduce is multiple-image support, especially animations; PNG was and is intended to be a single-image format only. PNG support is in Netscape and Explorer from version 4 on.

For image editing, either professional or otherwise, PNG provides a useful format for the storage of intermediate stages of editing. PNG's compression is fully lossless. PNG supports up to 48-bit truecolor or 16-bit grayscale--saving, restoring and re-saving an image will not degrade its quality, unlike standard JPEG (even at its highest quality settings).

The main color image format on the Macintosh is PICT. When you do a "screen snapshot" with a Command-Shift-3, the image is stored in PICT format. Most Macintosh graphics programs can store in PICT format.

There are other image formats such as TIFF - Tagged Image File Format, PDF - Portable Document Format (Adobe), PS - PostScript, etc. There are programs that will convert from many of these formats to GIF or JPEG.

Netscape (and most browsers) use a cache to avoid having to reload images and pages over the net. If you use an image more than once (whether on the same page or on other pages), Netscape will retrieve the image from the cache rather than reloading from across the net. The Cache Folder is located in the Netscape folder in the Preferences folder in the System Folder.

Remember that one of the best ways to collect images for your pages is from other pages on the web. If you are viewing a page with a nice icon or graphic, click and hold the mouse on the graphic which brings up a menu that allows you to copy or save the image. Once you have a copy, you can bring it into an image manipulation program and select only part of the image or change it however you desire.

Prev | Next | Improving Your Home Page with Graphics