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:
- raster graphics: the image is described by the
color of each addressable element on the display. The addressable
elements are termed pixels (from "picture elements"). The number
of bits used to describe the color may be variable:
- 1 bit per pixel can
describe two colors (usually black or white)
- 4 bits per pixel can describe 16 colors, usually selected from an
arbitrary palette
- 8 bits per pixel can
describe 256 colors, usually selected from an arbitrary palette, or
alternatively a gray scale with 256 shades
- 24
bits per pixel is generally used to select 256 levels of intensity for each
of three colors (8 bits each), e.g. red-green-blue (rgb), and provides a palette of
about 17 million colors.
Both .gif and .jpg files are raster formats.
- vector graphics: the image is described by geometrical
shapes, for example a line starting at (x1,y1) and ending at (x2,y2).
The advantage of the format is file size (files are much smaller) and
scalability (image size can be modified when the file is interpretted),
but at the expense of flexibility.
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:
- the .gif
compression is "lossless"; the image produced is identical to the
original image and the saving in storage space is entirely due to
efficient representation of the underlying data
- the .jpg compression is "lossy"; the image stored has less detail
than the original at the cost of fidelity. The user controls the extent
of this loss by setting the compression level.
Here are some examples of the different formats, with variable
compression used for the .jpg images:
| original | compression factor 30 |
compression factor 60 |
| 20.2 kb .gif | 12.9 kb .jpg | 7.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-bit | reduced color depth 4-bit |
| 20.2 kb .gif | 14.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
- Questions?, Comments?
- For next week, (soon) provide me with a pointer to the starting URL for
your class project and (before class next week) browse the projects.
- Move to 210 ORB for demonstration of scanner and Photoshop.
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