Bruce's Web Lab

Working with Images

Images

One of the simplest ways to add information and design elements to web pages is by incorporating graphic images. The HTML IMG tag allows placement of any digitized image on your page, including photographs, icons, graphs, flow charts, and even simple animations.

IMG Tag Syntax

To work on the web, images must be in either GIF or JPEG file formats. Adobe has an excellent discussion of the different advantages and uses of the GIF and JPEG formats.

Preparing Images for the web

Image Archives

Randy's Icon and Image Bazaar is an archive of... things, like and and .

Color Points

Here is a set of color points, which are 1 pixel by 1 pixel GIF images in some common colors. Color points are useful for adding colored lines, bullets, and blocks to your web pages. The image on the far right, shown with a border, is transparent.
To download one of these images to your local computer, click on the image and hold the mouse button down until your web browser gives you an option like "Save to Disk," or "Save This Image as..."

These tiny images, shown above at 20 times their actual size, are useful because with a tiny fast-loading file, you can create a larger image without modifying the GIF graphic image.

This only works when your web page is viewed using a web browser that recognizes the WIDTH and HEIGHT attributes of the IMG tag (e.g., Netscape, Internet Explorer).

For example:

is created using the following code:

<IMG SRC="images/blue-lt-pt.gif" WIDTH=10 HEIGHT=10 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=20 HEIGHT=20 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=40 HEIGHT=40 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=60 HEIGHT=60 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=80 HEIGHT=80 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=100 HEIGHT=100 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=80 HEIGHT=80 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=60 HEIGHT=60 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=40 HEIGHT=40 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=20 HEIGHT=20 ALIGN=MIDDLE>
<IMG SRC="images/blue-lt-pt.gif" WIDTH=10 HEIGHT=10 ALIGN=MIDDLE><BR>

As another example, a horizontal rule:

is made with the following code:

<IMG SRC="images/magenta-pt.gif" WIDTH=300 HEIGHT=2>

The transparent color point can be useful for creating blank space in text blocks; for example, the following paragraph starts with the transparent color point, set to 1 pixel high by 24 pixels wide:

The first line of this paragraph has been indented using a transparent color point image. The dimensions for the color point have been set using the attributes "WIDTH=24" and "HEIGHT=1" in the IMG tag for the image. The HTML markup for this paragraph is as follows:

<P> <IMG SRC="images/trans-pt.gif" WIDTH=24 HEIGHT=1>The first line of this paragraph has been indented using a transparent color point image. The dimensions ...

*Note that all of the above HTML image references are to image files located in a directory (folder) named "images," which is in the same directory as the HTML file the above code would appear in. This is why you see <IMG SRC="images/tube-04.gif"... You don't have to put your images in a separate directory; it's just convenient when there are lots of images in your site.

More Image Resources

Some Sites with more info about colors and image processing (updated 4/26/98):
[Back to the Web Lab Home Page] [Ask Bruce]