Troubleshooting Images and HTML Image Tags 
Courtesy of Chris Stern/Reflections of an Artistic Mind

red pencil

Please do not copy any of the images on this page.
They are here only for your viewing pleasure and to as an aid for this tutorial


This page was created to help you understand images as the relate to the WWW. It includes explanation of various graphic formats suitable for web use, as well as simple steps to including images on your own web pages.

GIF:
Which stands for Graphic Interchange Format is a compressed graphic format first used on-line by CompuServe. This format uses a form of compression and usually takes up less space and transfers quickly. The limitations are the amount of colors that can be used. Unlike the JPG files which can support 16.7million true colors the GIF only supports 256. There are two versions of GIF: 87a and 89a. Both can be interlaced or non interlaced. When an images saved as interlaced it is saved by making four passes instead of one. These graphics appear on the net as the complete image first in low resolution, gradually improving until the entire image is loaded and displayed. Non-interlaced images appear in bands from top to bottom. 89a will support transparencies, while 87a will not.

JPG or JPEG:
This is another compression format frequently found on the net. Is a file compression format. The letters are abbreviation which stands for Joint Pictures Experts Group. The method of compression involves getting rid of information it doesn't think important therefore you sometimes get an image that is not as high a resolution as when it was created.

BMP:
This format allows for 256 colors and while this format used in may Windows application including Desktop Wallpaper, the file sizes make it unsuitable for webpages.

Special Note for Backgrounds: If you're making your own images to be used as backgrounds on your web pages, and you want to save them in the GIF format, be sure to save them as non interlaced. While interlaced can be useful in viewing graphics before they have been totally sent, they also take longer to load. When used as a background, you want a fast load, to insure your viewers can get on with reading the text on your page. All the decorative backgrounds on this site have been saved as non interlaced.

How to copy an image from a web page to your own computer:
Point your mouse directly over the image you want to copy and hit your right mouse button, when the drop down menu appears, select save as. This will open up a another window so you can choose the directory you want to save the image to.

Placing an image on your web page is very easy. The command to do this is:
<img scr="path and name of the image you want to use.gif">
Example: <IMG SRC="csdgraph.gif" ALT="CS Designs Logo" height=58 width=238> has placed the following image on this page. Remember that in order for this to work, you must make sure that you have given the proper path for where your image may be found.

Making an image a link:
The following code will create a link
<A Href="This is where you put the path to the page or site you want to go to when the image is clicked"><img scr="This is where you place the path and the name of the image you want to display and make linkable"></a>
Example:<A href="http://welcome.to/csdesigns"><IMG SRC="csdgraph.gif" ALT="Link to CS Designs height=58 width=238></a> will give you the following:

Height and Width Dimensions:
Always be sure to include the Height and Width dimensions of your graphics in your HTML code, as this will make your page load faster, than if your browser has to figure this out. The Height and Width dimensions, are the size your image will appear on your page. While you can change the way an image looks, by specifying different dimensions than, that of the original image, I do not recommend it as it tends to deteriorate the quality of the images and brings out the jags in transparent images. Since I have taken great pains to ensure that the size and resolution of the final image will enhance your pages instead of detract from them, I also do not appreciate finding them stretched and mangled on someone's web site. Please keep this in mind when using my work on your pages.

The Alt Command:
You should always add the Alt="" for your images. It is an alternate description incase the images on your page are not available. It is an aid for visitors to your site that do not have a graphics enabled browsers, instead of an image they see a short description of what it should be. The ALT may be the only thing that tells someone the difference between a simple decorative image or an image that also happens to be a link.

Important Note for AOL users.
If you are building a site on AOL and are using a AOL browser to copy and save images to your hard drive, turn off the "Use Compressed Graphics" option. under your Preference menu. If you do not, the images will be saved in a AOL proprietary format and may appear as broken images to anyone visiting your site with a browser other than the AOL browser.



 
ANIMATION:
animated smoking pipe
Animation is created by putting several different pictures together in sequence. The result is one moving picture. Once you've created your graphics there are programs that will make your files in to one moving one. You can be as simple or elaborate as you want. You can find a list of programs to help you create, view and catalogue your own images and animation's on my Resource Page.

If you are using WebTV, and need assistance, uploading images, you will find a few useful Transloader links on my Resource Page listed above.


I hope this tutorial has helped you in some way.
No matter what you decide to do with your pages, remember to have fun.:)

Back to Main Tutorials Menu  [E-Mail]

Page created on October 27, 1998. Last revised on October 27, 1999

All images on this page were created by Chris Stern of CS Designs and may not be copied without written permission.
Chris Stern/ CS Designs © Copyright All Rights Reserved April 1997