Adding graphics to your Web page

In previous columns I have discussed some of the simpler techniques that we use in producing Web pages. In this one, I look at a few of the basic techniques for adding graphics in the form of in-line images. One of the caveats in using images is that these files have to be transported across the Internet and downloaded into your computer before they can be seen. I tend to use images sparingly and, if I need a large image, I try to place it on a page that does not have to be viewed in the early sequence of a set of pages. The size of image files can be minimized by choosing a minimal color depth -- four bits per pixel for 16 colors.

PREVIOUS COLUMNS.   For those of you who want to look back at previous columns, here is a short index of my Web-writing-related articles (the Web address follows in double quotes in case you want to view them on the IEEE web server): Producing Web pages -- August 1995 " www.institute.ieee.org/INST/aug95/inf_hwy.html ", Producing Web pages, part II -- October 1995 " www.institute.ieee.org/INST/oct95/inf_hwy.html ", Web page writing with Corel's WordPerfect 7 -- November 1996 " www.institute.ieee.org/INST/nov96/inf_hwy.html ". For those of you who wish to browse on-line, I have put together a linked index of all of the columns I have written (Nov./Dec. 1992 on) at "power.eng.mcmaster.ca/alden/ti.html".

THE IMAGE TAG.   In the August 1995 column, I described the concept of a tag, which is really a command in the hypertext markup language (HTML). The tag for displaying an image is of the form where are the beginning and ending delimiters of the image tag, align=left is the positioning attribute, and src="file_name" is the image source identifier. Other positioning attributes such as center or right can be used. If the file is not stored in the same directory as the HTML file, then the appropriate path specification or complete URL (uniform resource locator) must be included. The image to be displayed is contained in a file with the extension ".gif". This implies a certain file format. Two image formats are recognized by Web browsers -- gif and jpeg.

IMAGE FILE FORMATS.   There are different types of file formats that are designated by specific file extensions. Since some programs recognize some and not others, the file format is important, may be confusing, and may lead to incompatibility. Here is my list of graphic file formats, listed alphabetically by the file name extension and followed by some brief comments to help you distinguish them:


  *   BMP -- Bitmap is a Microsoft Windows or OS/2 pixel by pixel palette dump format without any data compression;
  *   EPS -- Encapsulated PostScript is part of the Adobe postscript language
  *   GIF -- Graphics Interchange Format from Compuserve is another uncompressed pixel by pixel format in two versions, GIF87a and GIF89a -- the latter has the capability for transparent backgrounds.
  *   JPEG -- Joint Photographers Expert Group (JPEG) is a pixel by pixel format but with data compression so that the files are smaller than BMP and GIF but some information is lost. Jpeg is used for larger graphics -- especially photographs.
  *   PCX -- Zsoft created this pixel by pixel format which has some compression but no loss of information (in between BMP and JPEG)
  *   TGA -- Truevision Targa is an uncompressed pixel by pixel format.
  *   TIFF -- TIFF is the Aldus Tagged Image File Format and can be either compressed or not.
  *   WMF -- Windows Meta File, the format used in the Windows clipboard and the Word word processor, contains both vector (line-art-based) and bitmap (pixel-based) images
  *   WPG -- WordPerfect Graphic, the format used in the WordPerfect word processor and WP Draw applet, contains both vector and bitmap images.

SOURCES OF IMAGES.   There are several main sources of files: you may create your own file using a graphics program or by scanning an existing print or photograph; you may receive files that are sent to you on a disk or via FTP (file transfer protocol); or you might download a file from the Web. The format of the file you have will likely depend on how it was created. You may wish to change the size or appearance of the image and thus you will need to import your file into some program to make those changes. So we need to know what kind of software (programs) to use, what formats these programs can use, and how to change from one format to another.

SOFTWARE.   Here are some examples of software I use to create Web images.

Paint (part of the usual Microsoft Accessories package) is an image creation/editing program that I use to create some image files, add color to others, and add a border to an existing file. Paint recognizes PCX and BMP formats. I saved my files in BMP format and used Lview to convert them to GIF.

Lview is an image file editor/viewer available in freeware or licensed versions based (in part) on the work of the JPEG (I am using Lview for Windows version 3.1). The freeware version I use recognizes JPEG, BMP, GIF and Targa file formats. The commercial version (LviewPro) also recognizes TIFF format. I use Lview to view files, convert between BMP and GIF formats, and change the size or color balance of images. The software can be downloaded from "www.shareware.com".

Tif2pcx is a file format converter distributed with PaintShow Plus that converts TIFF formatted files to PCX format, and is one example of small utility programs that exist to enable format conversions. I had a number of TIFF files that I wanted to use so I used tif2pcx to convert them to PCX and then I used Lview to convert to GIF.

GIFAnimator is a Microsoft tool for creating animated GIFs available from "www.shareware.com". (I have not yet used this product but it looks interesting.)

IEEE LOGOS.   These are available at " www.ieee.org/copyright/logos.html " in TIFF, GIF, JPEG, and EPS formats for use by IEEE volunteers for recognized IEEE entity activities.

FILES FROM THE WEB.   Any time you view a Web page, the files are copied from the computer where the page is stored into a cache directory. In my case, the path is C:\Program Files\Netscape\Navigator\Cache\. This location is determined at the time that you install your browser. The files that are copied include not only the HTML files but also the image files, so you can copy any of these files from your cache directory to another directory to use that file for your own purposes. For example, you might want to use someone else's home page as a template to help you create your own. Or you might want to copy and use a graphic file.

There are some legal and moral implications involved. Some files contain content which is copyrighted and may not legally be used without express written consent of the owner. Some files are in the public domain and may be copied and used legally. Some may be legally used by another person as long as certain restrictions are respected -- giving credit to the owner, not changing the content, and so on. Let's look at how one copies and uses a image file that can be legally copied and edited.

Unfortunately, these files are stored with people-unfriendly file names so you usually need to do some detective work to figure out which file is which. One useful trick is to empty the cache just before you view the page. In reality you view the page, empty the cache and reload the page. To empty the cache -- using Netscape Navigator Version 3 as an example -- click on Options, then Network Preferences, and Clear Disk Cache Now.

If you look in the cache directory before and after this operation, you will see that the directory is emptied (except perhaps for a file allocation table dummy entry which you can ignore). I did exactly this while viewing my home page, which contains two small images -- a McMaster University logo and an IEEE logo.

When I looked in the cache directory after clearing and reloading I saw three files with the file names "M0PAR40Q", "M0PAR41C.GIF", and "M0PAR41D.GIF". By viewing the first one -- with no extension -- using a text editor/viewer, I realized it was my home page HTML file, so I could copy and rename it as "my_home_page.html", for example. To identify the GIF files, I used Lview by clicking on File, then Open, then I selected GIF format, and the cache directory. I then saw the two GIF file names in the file display window and selected one of them --with the 41C.gif ending. Lview displayed the IEEE logo. I then could copy that file and rename it as, for example, "ieeelogo.gif".

So there we are -- several ideas for sources of images, a few tools to make the necessary changes and format conversions, and a simple HTML tag to insert these images into our Web page. For more information you can look over any of the excellent books on creating Web pages, or use search engines like Lycos, Yahoo, and so on and search on strings like GIF, TIFF, etc. Happy imaging!