Answers to Images in HTML FAQs

How do I preload images for my site?

It is easy to preload graphics for your site, but it is not 100% effective. On the page where you want the pre-loading to take place, for example a splash page before your main page, you add all the image files you want to pre-load. However, you make them all 1 high and 1 wide. This means that they become practically invisible to the user. These should be stored in the Temporary Internet Files (Cache) which means the browser does not have to make another trip to the server to download them again for any other page that uses them on your site:

Can I resize and image on the page?

Yes, you can resize graphics on a web page. This is however not recommended. To resize a graphic you can alter the HEIGHT and WIDTH properties of the image tag. You should never make an image smaller than it is in the basic image file. If you do then create a new smaller image. This means that the user won't have to download as much. It is not good to make the image much bigger either. This can make effects which are undesirable on the page. If you want a different size of image it is better to open it in your image editing program and alter its size there. It achives far better effects than resizing via the height and width attributes:

Can I add a little space around the image?

If you want to padd out your image a little so other objects aren't as close to it then you just use the VSPACE and HSPACE attributes. These in effect put a little padding around the image of the width youspecify. This means that contents wrap around at the distance of the padding rather than at the edge of the image. The code for this is:

Can I add a caption to the image?

You can add a small piece of text undeneath an image as a normal paragraph, however you can add alternative text to an image, which acts, in effect as a caption. This ALT text displays in the space where the image is beofre it loads, and pops up in a tool tip box when the mouse is placed over the image (in most browsers). The attribute you use to add the alternative text is the ALT attribute:

How do I add a border to the image?

If you want a border added to an image then just modify the BORDER property. This creates a line (often with shading in the browser) around the image. You set the BORDER attribute to the size you want it to be. The code for this is:

How do I get rid of the border when the image is a link?

When the image is made into a link a border appears around the image in the browser. This border is the color of links on the page and is used to let the person looking at the page realise that the picture is a link. You may however, think that the image doesn't look good with a border, or that the image-link is self-explainatory. You can remove the border by setting the border attribute to "0":

How do I make some areas of an image clickable hyperlinks?

An image can be divided up into clickable areas by using an image map. An image map specifies shapes, such as circles and rectangles to be "masked" over the image. These areas can be clicked on by the mouse and used as hyperlinks. You can find more information on Image maps in the irt.org article "HTML#3 - Making your web pages more exciting"