The ability to be able to add pictures, drawings & etc. to your web pages is the greatest aid to making them appear interesting and attractive. (I write that comment on a site which is almost all text!)

It is all made possible by the <IMG> tag, together with various attributes that tell the browser what to do and where to do it. This tag is one of those rule-breakers that does not have a matching pair (i.e. there is no </IMG> tag).

Any graphic that a browser can interpret can be placed in a web page. However, if the file is large then the download time will be long and the computer may not have enough spare memory to display the graphic. To avoid this situation it is best to stick to the "web friendly" formats which, basically, means JPEG (.jpg) GIF (.gif) or PNG (.png) files. JPEG images can have 16.7 million colours but, through compression (and saving at less than 100% quality - 85% is usually sufficient) these can be quite small files. GIF images contain up to 256 colours, can be "transparent" and "progressive" but the process suffers problems of copyright. PNG images are the "new boy on the block", contain up to 16.7 million colours but tend to be larger files than either GIF or JPEG.

NEVER use Windows BMP files, TIFF files or other large formats - your public will hate you!

So, how do we display a picture in a web page?

<IMG SRC="image name">

It is as simple as that!

Here is a picture of one of my favourite Australian cyclists! The name of the file is "bicycle.gif"and it lives in the "pics" directory. The code to show the picture on-screen is:

<IMG SRC="pics/bicycle.gif">

And there it is, in all it's 256 colour, 88k glory! 88k is a good sized file, what can we do to reduce it? Option one is to reduce the number of colours in the picture. This is less dramatic than it sounds as unless you want to make a photographic quality print, 128 colours to the human eye is more than enough. The only problem that might occur is how a browser renders them. So, here is the same picture but reduced to 128 colours and 84k in size. You will probably think that it was not worth it just to save 4k!

Another, more successful, way to cut down on file size is to also cut down on picture size. Here are the same two pictures reduced to quarter size. The 256 colour file comes down to 21k and the 128 colour file comes down to 18k. There is some loss of clarity with the reduction in size but file loading and picture rendering are far faster.

But probably the most successful way to cut down on file size is to compress the file when it is saved. This does affect the quality of the image but so long as it is not overdone (e.g. no more than 15%) then there shouldn't be any noticeable difference on-screen.

What else can we do to speed loading? If you watch a page load which just has <IMG> statements you will notice that the pictures appear as a slowly materialising image. This is because until the browser has rendered the image it doesn't know what size to display it. So, we can give this information to the browser which makes life quicker and easier. By including the width and height of the image the browser first draws a box in which to put the image, then fills it. This process is noticeably quicker, especially on an older machine with a slower processor. The instruction is simple:

<IMG WIDTH="392" HEIGHT="276" SRC="pics/bicycle.gif">

The browser can now go on to display the picture and load the rest of the page.

This is all well and good providing everyone "browsing" has picture loading turned on. To save time on-line. a lot of people turn off picture loading until they find one or more that they want to view, then load it or them individually, whilst some have older, text-only browsers. This means they will be presented with a lot of blank areas on their screen so why not put a short text description of the image so that anyone browsing with picture loading turned off can see what they may be missing and load it. To do this we need the ALT attribute thus:

<IMG ALT="Elle on her bicycle" WIDTH="392" HEIGHT="276" SRC="pics/bicycle.gif">

You can, of course, have the best of both worlds and use a smaller picture file in the main part of the page which links to a larger version which can be accessed by clicking on the smaller one. This is set up in exactly the same way as the page links we discussed in the previous chapter only with the graphic's address instead of the page's address:

<A HREF="pics/bicycle.gif" TARGET="_BLANK"><IMG WIDTH="196" HEIGHT="138" SRC="pics/bicycle2_128.gif"></A>

(The TARGET="_BLANK" is optional. I used it to open a new screen rather than place the new picture on the original one so that you don't lose your place on the main screen. Simply close the new screen once you have viewed it.)

Unless your settings preclude it, the picture will have a border and when your mouse pointer hovers over the above picture, the link to the larger one is shown. Both these "clues" help a person browsing realise there is a link to follow. As well as a link to a larger picture, you could also link to a whole new page (in this case entitled "bicycle.html") incorporating the picture and some additional text thus:-

<A HREF="bicycle.html" TARGET="_BLANK"><IMG WIDTH="196" HEIGHT="138" SRC="pics/bicycle2_128.gif"></A>

How do we position a picture in the page? By use of the ALIGN attribute. This can be used to place a picture on the left, or the right of the page and can make surrounding text appear at the top, middle or bottom of the image. (To align a picture in the middle of a page use the <CENTER> tag). So to lead by example:

<IMG ALT="Elle at the beach" ALIGN="LEFT" WIDTH="171" HEIGHT="223" SRC="pics/elle.gif">

This picture is aligned to the left.
As they default to the left this command is not really necessary but can be useful when many pictures are shown in a close area.

<IMG ALT="Elle at the beach" ALIGN="RIGHT" WIDTH="171" HEIGHT="223" SRC="pics/elle.gif">

<IMG ALT="Elle dressed for dinner" ALIGN="TOP" WIDTH="150" HEIGHT="223" SRC="pics/elle2.gif"> This picture has associated text aligned at the top.

<IMG ALT="Elle dressed for dinner" ALIGN="MIDDLE" WIDTH="150" HEIGHT="223" SRC="pics/elle2.gif"> This picture has associated text aligned in the middle.

This is another way to use <IMG ALT="Elle dressed for dinner" ALIGN="MIDDLE" WIDTH="150" HEIGHT="223" SRC="pics/elle2.gif"> text aligned in the middle.

This is another way to use text aligned in the middle.

This picture has associated text aligned at the bottom. <IMG ALT="Elle dressed for dinner" ALIGN="BOTTOM" WIDTH="150" HEIGHT="223" SRC="pics/elle2.gif">

This picture has associated text aligned at the bottom.

By writing to the left of the <IMG> tag the picture is forced to the right.

There are a few other attributes that can be used in <IMG> statements beside those already mentioned:
BORDER=" ? "
This is the width, in pixels, of a border that the browser will add to the picture. The default is zero with the exception that if the image is used as a link (as we did once above) there will be a border even when one is not specified. This can be overidden by specifying BORDER="0"
HSPACE=" ? "
This is the distance, in pixels, that will be left blank above and below the picture being displayed. This is very useful when several pictures are displayed without any intervening text.
VSPACE=" ? "
This is the distance, in pixels, that will be left blank to the left and the right of the picture being displayed. This is very useful when two pictures are displayed adjacent to each other.
LOWSRC="URL"
Not often used, this comes into it's own if you have a really big, detailed image to load. This option lets you specify a lower resolution picture that can be loaded more quickly, allowing the browser to then load the rest of the document before returning to load the really big picture. It helps to keep loading times at a reasonable level.
ISMAP/USEMAP
I don't intend to go into these here, but basically they are a means to use a specified part of an image as a link to to a different URL.

As I mentioned in paragraph three, there are three popular image formats presently in use on the web. JPEG is good for photos and can frequently be of smaller size than the equivalent GIF image. However, GIFs do have some useful advantages over the competition. They can be "transparent" which means in effect one colour is transparent. If you want to display an image with an irregular shape the best way is to draw it in a rectangle then colour the background outside the image but within the rectangle, then set that colour as "transparent". Obviously, it shouldn't be a colour that is used in the picture itself! GIFs can also be "progressive" which means when they display on-screen instead of waiting for the whole picture to appear in one go, you see a very blurred image quite quickly that clarifies before your very eyes until it reaches its finished state.

Here is a good example of a transparent GIF. I wanted a drawing of a wheel for a website so quickly drew one in a paint program and coloured all the background black. Here it is:

Then I saved it as a transparent GIF, which gave me the following:

Here is a link to a progressive GIF. See it materialise as you watch. It saves the viewer having to stare at a blank grey rectangle for some while whilst the browser renders the whole image. With most browsers, the "progressive" display will only occur when you first load the image as, if you go back to it again during the same session, most browsers will remember the image and display it immediately! The trade-off, of course, is that it is a slightly larger file!