Using Images on Your Web Pages

Though there are many free images on the Web, and there are CD-ROMs you can purchase with art for use on your Web pages, you may also want to create your own images.

Scanning Images To transform a photograph or drawing into a computer image, you will need a scanner or a digital camera. A scanner reads across the surface of a picture, creating a digital copy, which is stored in a file. A digital camera makes an electronic picture that you copy from the camera to your computer. Scanners have recently become much more affordable (some are under $100), but you can also use scanners at copy and office centers like Kinko's.

Modifying Images There are many image manipulation programs that allow you to work with electronic image files that you have created yourself, as well as those images that you have found. Some of these programs, most notably Photoshop, are expensive, but others are moderately priced; there are even some simple shareware programs available from our Web Site Workshop Tools section.

Formatting and Naming Images Once you've settled on some image files to include on a Web page, you will need to format and name them correctly. Graphic files that appear within a Web document are referred to as "inline images."

Whatever you use to create the inline image, it must be saved in either .GIF or .JPEG file format. Most graphics programs allow you to Save or Export a file in various formats (look in the File menu). Save the file as a Compuserve GIF, or GIF 87/89a, or as a JPEG/JPG. (Refer to your image manipulation program for more information about file formats.)

If the image file is a GIF file, then the filename must end with .gif, as in picture1.gif. Likewise, JPEG files end in .jpeg or .jpg, as in name.jpeg or name.jpg. Remember that filenames are case sensitive, so if you create an image file with a capital letter in its name, you must use this capital letter whenever you refer to the file.

Image Size It is always best to limit the size of your image files. The larger the image file, the longer it takes for someone to display the image on their browser.

Uploading Images Once you have formatted, named, and saved the file on your hard drive, you need to use an FTP program to upload it into your webspace. These files should be uploaded to your webspace as Binary or Raw Data files, not ASCII or Text files.

Calling Images with HTML Tags For your images to appear on your Web pages, you need to refer to or "call" the images by using an HTML image tag. If the Web page that you want the image to appear on and the image itself are in the same folder in your FTP directory, all you need to do is use a tag with the name of the image:

< IMG SRC="name.gif" >

If the image is in another folder, you must use a tag that includes the path to the folder that the image is in. Let us say that you've created a special folder on your Web site for all your image files (this is recommended for larger sites), and you've named this folder "images." You will now call in your images like this:

< IMG SRC="images/name.gif" >

For more information on creating Web pages, browse our Web Site Workshop.