Image Tags


HEIGHT AND WIDTH ATTRIBUTES Always use Height and Width in your IMAGE tags. A page will load much better with these in the tag. Your browser will make the adjustment for the image and begin to display the text where it belongs. Time is cut because the browser doesn't have to re-adjust the text as the images load.

Also, be sure to edit your image to the size that it appears on the page. If you image is 500 pixels by 300 pixels, don't put just change your Height and Width to 50x30 to make the picture smaller on your page. This will only cause distortion of the picture an slow loading pages.

An image tag should look like this:

<img src="keycross.gif" width="42" height="41" Alt="Crossed Keys" Border="1">


If you want no border around your image, put border="0" in your tag.

The no border image tag would look like this:

<img src="keycross.gif" width="42" height="41" Alt="Crossed Keys" Border="0">


Keep your image size as small as possible.
The larger the graphic...the slower the loading. If a site is too slow to load...a viewer may leave and move on to the next site. If you must use a large graphic, avoid placing it at the top of the page.
Save images as gif files instead of jpg files. This will cut down the size of your file tremendously.

Always include the Alternate Text in your image tag.
Think about what your page looks like if the graphics were not viewed? Some people view pages with graphics turned off or have text only based viewers. Too many graphics would make your page unviewable.

Make the Alternate Text meaningful. The text should reflect what the image is. Anyone not able to view the image will still get your message.

An image tag with Alternate text would look like this:

<img src=" keycrss.gif" height="41" width="42" Border="0">

Also in MSIE and Netscape or Mozilla, when you mouse over an image, the alternate text appears.