Bridgewater College Logo Academic Computing at Bridgewater College
     
Introduction
Guidelines
Graphic Software

Working with Graphics

Printable Version
(total tutorial)

 

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.


    Return to Academic Computing Homepage
Bridgewater College Home Page 1997, 2004, Richard L. Bowman
Last modified: 13-Jul-04; by R. Bowman,
rbowman@bridgewater.edu