Study Guide: Web Design - Using Graphics

Graphics often make the difference between a good site a great site. Now that you can create text and links, let’s add images to the page.

One of the main concerns with images on the web is file size. The larger the image file size, the longer it takes to load. You do not want your pages to be slow, especially if people access your pages from home using a modem. Therefore, your image file sizes should be no larger than they need to be. Their resolution should be 72 dpi (dots per inch), which is the best that can be displayed on a monitor.

Images on a web page should be in one of two file formats: GIF or JPEG. JPEG, in general, is a better compression method for photos, while GIF generally does better for graphic elements, especially those with a limited number of colors. Also, if an image has a transparent area or background, it must be stored in GIF format.

If you will be creating a lot of graphic elements for your pages, you will probably be using a graphics editor such as Photoshop. If you will be using photos from a digital camera, a photo disk or cd, or if you will be scanning images in, you will need to use some image processing application to save your images in the proper resolution and format.

You can also get images from the web. Be sure to observe copyright laws when doing so. To take this image:

simply right click (if you are using a PC), or click and hold (if you are using a Mac) on the image and choose Save this image as from the list. Pick a place on your hard drive to store it. You might want to store it in the same directory with your html files, or you might want to create an images folder in that directory and put the image inside the image folder. All of your images should have the proper jpg or gif extension, depending on their file format.

Here's the image tag with some of its attributes:

The image tag is also one of the few tags that does not have a closing tag. You do not need to put a </IMG> tag in your code. Here are some examples of an image tag:

<IMG SRC="fluffy.jpg">

<IMG SRC="/images/fluffy.jpg" border="6" alt="My cat Fluffy.">

In the first example, the image fluffy.jpg is in the same directory as the referring html file.

In the second example, fluffy.jpg is in a subdirectory called images.

The image has a 6 pixel border around it, and the alt tag shows the words

"My cat Fluffy" when the mouse is moved over the image in a web page, or

when the image is not displayed for some reason.

An image can also be inside an anchor tag, allowing you to make a link out of an image:

<A HREF="http://www.greatcats.com"><IMG SRC="fluffy.jpg"></A>

In this example, clicking on the image of fluffy would take you to www.greatcats.com.

Exercise: Put an image into your web page. You can use the image you just took from this web page. You might want to experiment with the vertical and horizontal spacing. As always, save your work, view your page in the browser and see if you like your results.