Introduction
With this page, I will teach you how to add graphics to your webpages. There a few points that I would like to make before showing you how to add graphics though.

The first point I would like to make is that there only two graphic formats that are generally used and supported on the web. These two graphic formats are GIFs and JPEGs. Some file formats that generally aren't supported include Photoshop PSDs, Illustrator EPS files, TIFFs and Fireworks PNGs.

The next point that I'd like to make is that you should always be aware of your file sizes. If you use graphics to add some spice to your Web site, make sure they are small file sizes and try not to use to many. The reason for this is because the greater the size of the files or the greater amount of images on your page means a longer load time. If your page takes to long to load, most people will decide to leave your site and most won't return. One way to cut down on file size is to use the "Save For Web" command in Adobe Photoshop, the "Save As Optimized" command in Adobe ImageReady or to use Macromedia Fireworks which I believe automattically saves your images as optimized. Any three of these options remove unneeded colors from your image while keeping the quality of your image.

^^-Return to Top-^^

The Image Tag
Now I will introduce the code used to add graphics to a webpage. To insert an image, you would use the <img> tag with the src attribute. This tag has several additional attributes which I will discuss a little later. Here is how you would insert an image:

HTML Code

<img src="../images/sample_image.gif">

Result

So what is this code saying? The first piece of it - <img src=" - is saying look for the image at this location. The next piece of code - ../images/sample.gif - is telling the browser to look for an image called sample.gif within the images folder. Now, since this page is located within a folder called web_design and this folder resides within the root directory, the "../" basically tells the browser to move one level up to the root directory - or back out of the web_design folder so that you are in the root directory - and then go into the images folder, which also resides within the root directory, and look for the sample.gif image. The last piece of code - "> - closes the tag. This tag is one of the few tags that doesn't have a closing tag.

Now let's look at the attributes for the <img> tag. The first two attributes we will discuss is the height and width attributes. These two attributes aren't really necassary but they tell the browser what size the image should be. If you don't include either attribute, the browser will still show the image at it's proper size. There is one note I would like to make about these attributes though. You should never use these attributes to resize your image. If your image is to big, use a graphics program such as Adobe Photoshop or Macromedia Fireworks to resize it. If your image is to small, you will have to recreate it. Using the size attributes for an image or using a graphics program to enlarge an image will ruin the quality of your image by blurring or streching it.

For an example of using the the height and width attributes, I will again use the sample.gif image. The image's width is 74 and it's height is 28. Below is a sample displaying the use of the height and width attributes. Below that, I will also provide examples of resized images using said attributes so you can see the result.

HTML Code

<img src="../images/sample_image.gif" width="74" height="28">

Result

What Not To Do:
An example of an image sized down with the height and width attributes

HTML Code

<img src="../images/sample_image.gif" width="54" height="18">

Result

An example of an image enlarged with the height and width attributes

HTML Code

<img src="../images/sample_image.gif" width="94" height="48">

Result

Another attribute that is used with the <img> tag is the alt attribute. This attribute is used to provide a name or description of the image in case the image doesn't load. The alternate text can appear in two ways.

The first way the alternate text may appear is either when the image is loading or if the image can't be found. In this case, the text will appear where the image is supposed to be but may be cut off depending on the size of the image and the length of the alternate text.

The second way occurs when you hold the mouse pointer over the image for a few seconds. A little note window will appear next to or over the image containing the alternate text.

There are a few reasons why an image won't load. An image will not load if the user has his/her image loading capabilities disabled to speed up download time. Another reason could be that your source code is pointing in the wrong place for the image or you may have forgotten to upload the image to the server.

Here is how to use the alt attribute.

HTML Code

<img src="../images/sample_image.gif" width="74" height="28" alt="Sample Image">

Result (with Image showing)

Result (without Image showing)

There is also an attribute used to align the image. The align attribute is very useful for wrapping text around an image. This attribute has several options. The most common options are Left, Center, Right, Top, Bottom and Middle.

The Left, Center and Right options are used to position the image horizontally. The Left option positions the image flush left, Center places the image in the center of the browser window and Right places the image flush right. The Left and Right options are also used for wrapping text around an image.

The Top, Bottom and Middle options position the image vertically. The default option is Bottom which aligns the bottom of the image with the bottom of a line of text. Top aligns the top of the image with the top of a line of text. The Middle option aligns the middle of an image with the middle of the line of text.

The border attribute is used when you make an image a link. It species the size of the border, if any, that will surround the image. The border attribute is inserted into the <img> tag the same way as the other attributes listed above.

Two other attributes that can be used with an image are the vspace and hspace attributes. The vspace attribute controls the amount of vertical space around an image by setting a specified number of pixels of vertical white space (on top and bottom) around an image. The hspace attribute is used to control the amount of horizontal space (left and right) around an image. These two attributes can be used to set a small margin between an image and text or an image and another image.