Images in HTML

Most web pages you will come across have an image or graphic of some sort. It is fairly easy to insert images. There are several attributes that, although not necessary, are very useful. There are many issues surrounding the good use of image files, this article won't deal with those, just the HTML parts.

Inserting A Basic Image

There is one noticeable difference between the image tag and most of the tags you have come across so far. The image tag does not need a closing tag. It is one single tag block. The image is inserted by the 'IMG' tag. The choice of picture that is inserted is referred to by the 'SRC' attribute. This is very much like the 'HREF' attribute in link, and needs to point to the image file in the same way. Here is some sample code for a basic image file:

That is all you need to insert a basic image. There are several additional attributes that are explained below that will help you insert images into your page successfully.

Height and Width

You can set the height and width of the image in the HTML. Many people misuse these attributes. When they create 'thumbnails' of the images they just resize the image in the HTML. This does not affect the size of the image that is downloaded, just the size it appears as. Do not use these attributes to resize your images. These tags are used so that the place on the page is reserved on the page for the image and if the image does not download everything is in the same relative position. It is a good idea to use the 'HEIGHT' and 'WIDTH' attributes in your page. It creates good HTML. Here is the same code for creating an image 100 high and 150 wide:

If you are going to create thumbnails make new thumbnail images.

Alternative Text

You can set some text to be visible if the picture is not downloaded. This is useful as the text can describe what is seen in the picture. The alternative text can be seen whilst the picture is downloading and as a 'ToolTip' caption when the mouse is placed over the picture. The alternative text is set by the 'ALT' attribute so the code would be:

If the image is used as a navigation button then you should include in the alt text where the link would take you. If the image is being used as an image map it is hard with alt text to describe where to click. The alt text could ask the user to download the image, but that would only work if the reason for the image not initially downloading were the user settings.

Low Resolution

If you have a very large image file on one of you pages that might take a while to download then it is useful to have a smaller image file load in its place initially. This can de done by using the 'LOWSRC' attribute. What this does is that the browser downloads the 'LOWSRC' picture first and displays it then loads the picture referenced in the 'SRC' attribute:

This is useful as the low-resolution picture gives the user an idea of what the page will look like when the final picture loads, rather than having a long clueless wait. Remember though to use images that are of the same height and width.

Background

Many people want to display a background image on their web pages. This can make the page look very good, or completely unreadable. However, this will be dealt with in a later web design article. You reference the background image file in the 'BACKGROUND' attribute of the BODY tag. It references just like any other link or image:

You must make sure that your background tiles well, this means that as it gets replicated across and down the page that it fits together nicely. There is one other property of the background that can alter how your pages appear. This is whether the background is 'fixed' or not. The default is for the background the scroll with the text. When the background is 'fixed' then the text appears to scroll over the background, like a watermark. If you want the background to be fixed then add the 'BGPROPERTIES' attribute to the BODY tag:

Remember images normally have a larger file size than HTML files. Make sure you don't slow down the loading of your page by using too many images.

HTML TUTORIAL: Next Article - Tables in HTML; Previous Article - Linking in HTML