1. The primary test is a conceptual one of relevance. Is the image of direct relevance to the content of the display of information? If it isn't, read no further. You shouldn't be using it.
2. If it passes the relevance test, then move on to consideration of distraction. An image may be relevant, but because of its content, may only distract the reader from the text and other elements of the web page. A distracting image may be too strong in its content or simply too large or too centrally placed for the page. On the other hand, the image may be the central focus of the page, and all other elements including text need to complement it.
3. If the image can pass the distraction issue, then address the contrast issue. Does the image go along side text or behind the text? Text along side an image must contrast sufficiently with the color of its background. Dark text requires light backgrounds and vice versa. Text over an image must contrast with dark backgrounds so that it can easily be seen. Otherwise, lighten the background and use darker text.

The more technical issues of how images are added (inserted) into web pages are covered below.

Foreground Images
 

Insert Image command	The many images on this page of screen captures, photographs and clip art demonstrate that images can simply be linked into the page using the Insert Image button to the left that is found in the SeaMonkey Composer tool bar, or the Insert Image command from the menu bar. Always move the image into the web site folder before inserting (linking to) it. The image files should be in the same folder or place where the .html file is located. You can also use the Insert Image command under Insert in the menu bar. Text can also be positioned from the insert graphic commands. Once inserted then select whether the image is to be located to the left or right side of the text. Remember that the image appears to be part of the page but is actually a separate file that is called or linked into place each time the web page is displayed.
The dialog box on the right shows the options available once inserted. More and better control for aligning text and imagery is provided if the images are inserted into a table cell. This picture of the computer screen was converted to a GIF file format and inserted as a graphic into the cell on the right. Notice the Text insert box in the screen on the right. If someone is blind and reading your web pages with a brailler, though the images do not appear, the description of your images allows them to better understand follow your ideas.
	Images can come from a wide variety of applications. But before they can be visible on the web they must be in one of three graphic formats. The clipart image to the left was put in GIF format. Save images you are editing in GIF when the image consists of sections of solid colors. Windows users could use the Paint application for image manipulation including converting clipart to a web format, such as the image on the left, into the GIF format while Macintosh users could work with iPhoto.
	A photograph is made of many continuously changing shadings of color. Save images you are editing in JPG or JPEG when the image is a photograph or consists of many shades of colors.
	An image that looks fine on one type of computer system may look too dark or too light on another kind. Different computer systems provide different standards for the brightness or intensity of an image in the screen or monitor display. The PNG format was designed to take different computer display intensities into account. This image is in PNG format. The ability to display PNG format is not yet the standard across web browsers as GIF and JPG formats are.
	Linking Images and Thumbnails Images can also be linked to other web pages and other images, including larger versions of the same image. Moving the screen pointer over this picture activates the hand icon because it is linked to another web page. An image border that indicates a link is optional and its thickness can be changed. Here it is set to a 5 pixel width.  To see how this was done, save this web page to the desktop and open this page in SeaMonkey or Netscape Composer (File to Edit), then click the image in this cell to the left once to select it. Then, click the link editor and then the image editor buttons in Composer for this cell to see how this was done. That is, the first step to insert an image into a web page means finding the Graphic or Insert Image button. The second step is to click it and select the image. When the dialog box opens (see above), select the Link tab and enter the appropriate file name or web address. This image might be linked to another image file, a web page of images, another web page of text or whatever is linkable.  This image linking process is often used for "thumbnails". The idea behind thumbnails is to have one or more resized or cropped versions of the original image saved as tiny images. The tiny image is linked so that when clicked the viewer goes to a different file name of a much larger version of the same image. (Hunt for "thumbnails" in a web search engine to find many examples or tutorials.)  Clicking on any one of the small images will bring up a much larger image, but this larger image will generally be the only image on its page. The small image will be a very small file, perhaps 5k or less in size, which allows a web page to have several images in it but load and display quickly. Small file images for thumbnails can be made by using graphic editors or graphic converters to scale the image down in size (e.g., the Paint application for image manipulation), reducing image resolution and quality and/or by cropping out and saving a small part of a larger image.

Background Images

A background might be a solid pastel color or it might be an image. The Page Properties commands under Format in SeaMonkey Composer are used to put a background color or image on a web page. Some light color other than white is often necessary to make the images stand out more clearly. However, background colors can make text harder to read. Study these examples carefully to learn how to control the placement and use of color and images. Images can also be inserted as backgrounds into any web page where they will tile themselves across a cell or an entire web page to fill all visible space in the page. The problems of relevance, contrast and distraction remain whether the background color or image is confined to a table or not.
 

Backgrounds Within a Cell

Background for an Entire Web page

The same general concern as stated above for finding proper contrast applies to entire web pages as well. For details on how to insert an image across the background of an entire web page, see the Backgrounds section of the Comprehensive View of the Web Design Process page.

It is rare to find a background image behind an entire page whether done in print or on a professionally done web site. When it is done, parts of the background image have been especially prepared to be cleared so that surface text is readable. That says something about professional standards for good communication. There are just too many problems with placing large quantities of text on top of a busy image. Instead, use the image command to insert pictures in ways to support the text. In this way, images and text can both do their job successfully without interfering with each other. That said, pastel background colors are often useful.

Tools for Image Manipulation

The more recent versions of computer operating systems generally come with with a program that can carry out such operations. Macintosh computers may have Appleworks or iPhoto or later which contains draw and paint programs which handle these tasks. Windows computers will have the Paint application. A set of Paint screen movies cover all the basic techniques needed for adjusting images for Web pages. Windows users may also may have Photo Editor. See their Help commands on how they operate. If your own computer does not have one of these programs or if more features are needed than what you have, consider obtaining shareware programs. There are many but only two examples are provided. There are also many commercial programs such as Photoshop and Corel Draw that can handle these image operations and many more.

The shareware for Windows systems described below, PhotoLine 32 for Windows, is only useable for 30 days before it will cease to operate until you purchase it. The Mac program, GraphicConverter for Mac, can be used indefinitely, but you are asked to purchase the program if you continue to use it. Descriptions of these programs are taken from an excellent site to find shareware applications, www.download.com, where the files were acquired:

     "PhotoLine 32 for Windows is professional imaging software that includes OLE2 support, image calibration before printing, and variable undo steps. The program supports most graphic file formats (TIFF, PhotoCD, GIF, PNG, JPEG, BMP, PCX, ESM, IFF, TGA, GEM), and it can facilitate HPGL output of vector graphics. It supports plug-in filters and offers drawing with customized brushes, Water, Filter, Brighter, and Darker options, 8-bit masks, automatic selection of parts of the image, and lassos for cutting and copying. It allows you to rotate pictures, reduce colors, draw along vector paths, and see pictures projected onto 3D surfaces. Version 6.04 adds several new features, detailed here. After the 30-day trial, a nag screen will appear every five minutes. The cost to register is $69."

"GraphicConverter for Mac is an all-purpose image editing program that opens and saves images in just about any graphics format. The program includes high-end editing tools for graphics manipulation as well as the ability to use Photoshop-compatible plug-ins. It offers batch-conversion capabilities, a slide show window, and more. GraphicConverter can import 96 file formats and export 38 file formats. This version contains a number of improvements and bug fixes. "
 

Summary