Web Authoring: Images

Including Images


They say a picture is worth a thousand words....

So what do you expect from seven?

There are two parts to including images in your document.

Getting the Image

The first part is the hard part. So, we are mostly going to ignore it. Basically, this is the part where you take an image (somehow....) and turn it into a file (in the appropriate format, of course).

This includes: downloading the image from an on-line archive; copying it from a CD-ROM of clip art; creating it yourself by hand with a draw or paint program; capturing an image on-screen, or capturing the output of a plotting program; using a digital camera and saving the image to disk; or scanning in an image from a drawing, photograph, or slide. This may also include converting the image file from one format to another, resizing or cropping the image, and so on. There are lots of possibilities--enough to make a whole seminar (or three) in themselves.

Essentially, what you need to know is that somehow, your iamge must become a file in a certain format. There are two formats that are most widely supported by the various browsers, and so for most purposes you should stick to one of those two. They are: GIF, or Compuserve's "Generic Image Format"; and JPEG, a format created by the Joint Photographic Experts Group.

Including the Image "In-line"

This is the easy part. Inline images are created using the IMG- (pronounced image-) tag. This has the keyword IMG, followed by other keyword-value pairs, of which the most important is the SRC= parameter, which specifies the name of the image file. So the tag looks like this:

<IMG SRC="some-file.gif">

Every icon, image, diagram, picture, and button in this presentation (such as the ones at the top and bottom of this page) is produced by a tag that looks pretty much like this.

Another parameter that is a good idea to include when you use the image tag is the ALT= parameter. This specifies some text that will be substituted if the browser is unable to display the image (such as when the browser is Lynx, for example). This looks like the following:

<IMG SRC="some-file.gif" ALT="Man eating fish">

Of course, if you aren't any more careful in choosing your words than I was, the reader may be unsure whether the picture was of a diner in a seafood restaurant, or a great white shark.

Netted fish


 Home  Next  Back
SDR, 15 Jun 1995.