Oceanography 549--Communicating Ocean Science--Spring Quarter 1996

Working with Images

Working with images for use within web pages is part art, part science. The goals for this session are to illustrate how to create images and translate them into a format that will be effective in the WWW environment. We particularly will emphasize aspects of image storage that have an effect on the response of a client connecting to the Internet by modem.

There are seemingly endless formats for graphic images (e.g. .gif, .bmp, .pcx, .tga, .jpg, .tif, .ps, .pict, .pcd, .ppm). The origins of most are various painting programs which saved drawings in proprietary file formats. Two of these formats (and the ones most commonly implemented in web clients)--.gif and .jpg (or .jpeg)--compress the image and so minimize transmission time across a network. There are many sources of detailed information on the internal workings of these file formats, for example on this site sponsored by POV-Ray.

Computer graphics are of two kinds:

There are meta formats which combine these two forms of graphics, for example using a raster to depict a photorealistic image, with annotation added in a vector format.

As mentioned above, both .gif and .jpg formats are compressed formats. However the nature of the compression is different:

Here are some examples of the different formats, with variable compression used for the .jpg images:
originalcompression factor 30 compression factor 60
20.2 kb .gif12.9 kb .jpg7.5 kb .jpg

The loss of fidelity is hardly discernable (although Netscape's scheme for displaying images makes the comparison difficult!), with a saving of nearly a factor of three in the file size.

An alternative strategy for reducing the file size is to reduce the color depth. The original file mark.gif has 75 unique colors, requiring an 8-bit representation. If it is reduced to 16 colors, requiring just 4 bits per pixel, the result is:

original 8-bitreduced color depth 4-bit
20.2 kb .gif14.3 kb .gif

The degradation of the images is much more noticeable than with the .jpg encoding; but there is some saving in the file size.

Are .jpg files always preferable to .gif files? Not necessarily. Large areas of individual colors are generally more compact in .gif form, for example:

2.7 kb .gif
8.6 kb .jpg

The Bandwidth Conservation Society (yep!) offers more complete guidelines on when to use gifs and when to use jpegs. Summarizingly briefly: gifs are preferable for small images like icons and logos, for images with single color graphics and text, and for images with a large areas of individual colors, and for portability between browsers (support for gifs by browsers is more universal than for jpegs); jpegs are preferable for photographic images and images with lots of colors.

The .gif format offers an additional characteristic which is useful in web pages: interlaced images. Interlacing means for example that in an image 50 pixels high, the order in which lines are stored might be 1-11-21-31-41, then rolling back to 2-12-22-32-42, then 3-13-23-33-43, and so on. Watch carefully as these examples load: non-interlaced and interlaced. The non-interlaced image loads from the top and delays seeing anything about the image. The interlaced image loads sequentially, with more and more detail appearing.

What are some tools for working with images? Adobe Photoshop is a well-regarded commercial program and is available on the Macintosh located in 210 ORB (the one attached to the scanner). I use a shareware program Paint Shop Pro with Windows 3.1. On Unix workstations the program xv is the standard (though it does not give particularly good control of .gif options).

We'll demonstrate PSP and xv now....we'll go up to 210 ORB in awhile to demonstrate the scanner.
A final useful feature of the .gif format is transparency, where one color is made transparent so that the background shows through. This example shows two images that differ only in one having the color white set to be transparent.

One way of making a color within a .gif image transparent is to use the the appropriate setting when saving an image with Adobe Photoshop or Paint Shop Pro. There is also a utility on tsunami, transgif that performs the task. To set the color white to be transparent, I used:

transgif -rgb white logo.gif > logotw.gif

The options available can be reviewed with the command:

transgif -help

Update 5/2/96

Here are the links for web engines that help create code for color palettes and for tables:

Ocean 549 Home 7/24/97