Adding Images to the Web

Background

The text

This is <img src="images/check.gif" alt="check">ed.

gives the result

This is ed.

And we already know that we can right align images, as

<img src="images/check.gif" alt="[check]">There is a right-aligned check on this line.

to give

There is a right-aligned check on this line.

The advantage or aligning things to the left or right is that it allows text to flow around the image (or object), allowing a nice elegantly-formatted feel for the document. With this type of alignment, we might want

1. to add space to the sides of the image (or aligned object): this is done with the hspace and vspace attributes of the img (and table) tag(s), as

   <img align="right" src="images/check.gif" alt="[check]" hspace=5 vspace=5>

   hspace specifies the number of pixels between the side of the image and the surrounding text; vspace the number at the top and bottom.

2. to make sure that some text after the image never wraps around it: this is done with the clear attribute of the br tag:

   <br clear=right>

   specifies that everything after the break tag will be below any right-aligned image above it. The clear attribute may be set to right, left, or all.

Sources of Images

1. Other Web sites
2. Drawings from drawing program
3. Screen-capture
4. Scanned Images

Images from Other Sites

Getting images from other Web sites is easy: surf the Web until an attractive image is found, and then

1. Click on the image with the mouse and hold the mouse button down (on a PC or UNIX box, click and hold the right mouse button); a pop-up menu will appear.
2. From the menu, select Save this image as...
3. A selection box will appear---make sure that it says Format for saved document: Source, and give it a file name and location to save it.

And Voíla! the image is ready to be referenced in an img tag.

Drawing Programs

For drawing, I use xfig (a freeware Unix application); other options include Paintbrush or something like Adobe Freehand. Poke around on whatever computer you're using and look for a simple drawing program. After you've got a picture, it needs to be converted to a format that can be used on the Web -- the safest formats are GIF and JPEG (sometimes known as JPG). On a Mac, Graphic Converter is a Shareware program that does the trick nicely. In Unix, ImageMagick will do much of the same things (and it's free). You can also use xv and the awesome Gimp. I don't know what to look for for Windows systems.

Screen Capture

Sometimes you want a picture of something on the screen that you're looking at. This is easily done with something like Flash-It on the Mac, or ImageMagick or xv in Unix. Again, I don't know what's out there for Windows. I use these two utilities, and then edit the images with either ImageMagick (if I'm in Unix) or Photoshop (on the Mac).

Scanned Images

The most popular way of translating images (e.g., photos) into pictures on the Web is by scanning them. This is not intended to be a scanning tutorial, but here are a number of tips that may be useful if you go to scan things in:

1. To get started, look for a "Scan" option in the scanning application (on a Mac, the application might be something like OFoto, or ColorIt, or Epson Scan, or even Photoshop), probably under the "File" menu.
2. Then look for a "Preview" option. This gives an overview of what the scanner sees.
3. Once you have a preview image, try selecting the part of the image that is interesting by clicking and dragging the mouse. This will allow you to save only the portion of the image that you want. Once you've selected the region,
4. Look for "Size" and "Resolution" options. For the Web, 72 DPI is quite sufficient a resolution, and you may find it useful to reduce the image size as well -- otherwise you may end up with a huge image that takes ages to load.
5. Once you've done this, "Acquire" or "Scan" the image. This will take longer than the preview did...
6. Some scanner applications allow you to then manipulate the image -- if so, they may offer features similar to those in Adobe Photoshop, an overview of which is our last Imaging stop. If you are going to manipulate the image in another program, save it as a generally accessible file format: on Mac, as "Macintosh PICT", or "JPEG" (high resolution) or "GIF". If you are going to use the image on the Web, save it as "JPEG" or "GIF".
7. Saving, part 2: If you save the file as JPEG, chose some medium compression/quality if the image is going to the Web, or low compression/high quality if you're going to play with the image later.