EXPLORING
GRAPHICS FOR THE WEB
Dr. Richard L.
Bowman
Academic Computing, Bridgewater College, Bridgewater, VA,
USA 22812
I. Introduction
Computer graphics are common enough that such terms as
gifs and jpegs are almost an accepted part of American
English. And yet many persons find the associated file
extensions of .gif, .jpg and .bmp bewildering. This
tutorial will de-mystify some of the procedures for
creating and manipulating graphics, particularly when
used on web pages.
Note: If you have not yet
set your computer to show the file extensions, do it now.
Double click on My Computer on your desktop and from the
Tools menu select Folder Options. Click on the View tab
and then locate the Advanced Settings option of
"Hide file extensions for known file types."
Click in the box immediately in front of this item to
deselect this option. Finally, close the Folder Options
window by clicking the OK button. Now the extensions on
all files will be visible when their file names are
visible.
II. Guidelines for Making
Graphics for the Web
1. Use graphics primarily to convey
information. Limit the use of web graphics that
are only for spicing up a web page. Remember that any
graphic on a web page will slow down the loading of that
page, particularly for those uses using a dial-up
Internet connection. However, information is not just
quantitative data; a picture of an author might be useful
to inform and dress up an English literature web page.
2. Keep the size of web graphics as small as
possible. A good rule-of-thumb is to keep all
graphics under 40 kB. In general, they should be around
20 kB or less. However, if an image is the real
information, try the technique of placing a small
thumbnail of the full image on the main web page and link
it to the much larger graphic. Giving the actual size of
the larger graphic next to the thumbnail image would be a
nice user-friendly touch.
3. Check to see how your web page looks in
text-only browsers. Persons with certain visual
handicaps will often use a text-only browser such as
"lynx." Also, persons accessing the web through
slow connections may turn off the loading of graphics in
their browsers.
4. Limit the image formats to either jpg or
gif when using graphics on a web page. Many
browsers can display other formats, too, but none are yet
universally used except for jpg (or jpeg) and gif.
5. Use a quality factor of 85 or 90 for jpg
image files. The jpeg format allows for various
levels of compression of the data necessary to displaying
a particular image at a particular resolution. A value of
100 is the best quality, least compression, possible with
the jpeg format. However, since the algorithms used by
web browsers to display graphics do not show all of this
detail anyway so that graphics can be displayed faster, a
web author can use a quality of 90 or 85 to make smaller
image files that still look OK in a browser. Full size,
high resolution images, that users will use for other
purposes, should be saved with the maximum quality of
100.
6. Copy the final version of any graphic to be
used on the web to the same folder where the web page is
located or will be located. This will ensure
that including that image in the appropriate web page
will be handled easily and correctly by the web authoring
program that generates the web page.
III Getting Acquainted with
Freely Available Graphics Software
Many powerful computer programs exist for working with
graphics. However, much can be done with freely available
programs that already exist on many Windows PC's
or which can be easily obtained and installed. Paint
(a basic component of the Windows operating
system), WordArt
(from with in Microsoft Word) and IrfanView
(a free download from the Internet) are introduced here.
If you work on your home computer, some graphics program
may have come with your printer or scanner. Do learn to
use these, too.
|
Introduction 
