Image Techniques 1

Image resizing is, in my opinion, the most often overlooked of the techniques available in creating highly graphical web pages. The power of the technique comes in enabing the publisher to re-use images many times on the same page. Images are cached by the user's browser, and can be used again without forcing the user to wait while more graphics are sent over the network.

Image scaling is done with the HEIGHT and WIDTH extensions to the IMG tag. You specify the dimensions of your image in pixels. The above row of ovals are one single picture, generated with the following HTML:

<CENTER>
<IMG HEIGHT=20 WIDTH=100 SRC="circle.gif">
<IMG HEIGHT=40 WIDTH=80 SRC="circle.gif">
<IMG HEIGHT=60 WIDTH=60 SRC="circle.gif">
<IMG HEIGHT=40 WIDTH=80 SRC="circle.gif">
<IMG HEIGHT=20 WIDTH=100 SRC="circle.gif">
</CENTER>

The row of ovals was created with one image that is less than 1K. Saving the entire row as a single image requires about 25K, and slows down your page. The real power in image scaling comes in creating bullets, bars, rectangles, etc, out of similar images.

It is often difficult to place images exacly where you want them. Sometimes text comes to close to an image, sometimes images run together when you don't want them to. You can use the HSPACE and VSPACE tags to tell an advanced browser how much space to put above or below an image. Below is the same circle used before, surrounded by black rectangles (resized versions of a single-pixel black gif).

And here are the same pictures, but with an HSPACE and VSPACE of 10 added to the circle picture:

Notice how the circle is shifted upward as compared to the black bars. This is the result of the "vspace" tag, which caused netscape to treat the circle as if it were 80 pixels high instead of 60. The picture is padded with empty space.