To insert an image file into your document, you have to use the <IMG> tag which has the following attributes :
| Attribute | Description |
|---|---|
| Align | Specifies how the image will be aligned on the page in the browser. Default is left and the allowed values are top middle, bottom, left & right. The alignment is relative to any text on the same line for top, middle, bottom and with respect to the page for left & right. I got seriously confused with this when noting seemed to align in the middle. |
| Alt | Specifies some text that is displayed in the area reserved for the image. Also shows up as a pop-up when the cursor is hovered over the image. This is used mainly to display some alternative textual details of the image for those of us who have disabled images in our browsers, or for those whose browser doesn't support images. |
| Border | Specifies the width of the border around the image. Defaults to zero which is no border. Any numeric value is allowed. |
| Height | Tells the browser how high the image is to be displayed. This may or may not be the same as the actual image - the height will be adjusted to suit. It is advised that you always specify a height and width as the browser quickly draws a frame on the page and carries on loading the textual content. This means that the user gets to see the content of the page and while they are reading, the images can load. If you don't give an height & width, the browser has to stop and load the image in order so that it can carry on rendering the text. |
| Src | The filename (or web link) to the image to be displayed. |
| Width | How wide is the image to be displayed. See comments above for height. |
Here is an image tag and underneath it, is the result of displaying it.
<IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" BORDER="5" ALT="A Tawny Eagle & the author" WIDTH="136" HEIGHT="167">
A thumbnail image is simply a small image that usually links to the main image when clicked upon. I am told that this is much beloved of many of the unsavoury web sites which display pictures of naked people. Now, from the above, you can see that the size of an image can be specified - is this how we create a thumbnail ? The answer is, unfortunately, no. Regardless of the dimensions you tell the browser to display the image at, the full sized image has to be downloaded, so this is no good for a thumbnail.
You must use a graphics package of some sort to reduce the size and probably the colour depth (ie number of colours) in the image file, save it as a new file with a different name and display this new file on your main page. When the user decides to click on the thumbnail, the main & full sized, full colour depth version of the image can be displayed in a separate window. This technique save much time in the downloading department and a quicker loading page means the user stays interested.
On my web training course, a fellow student had his own web page describing his catering business - it was a nightmare and took absolutely ages to load. When investigated, he was displaying a 8 by 6 image in true colour (3 bytes per pixel) on the main page (he actually had 6 of these images) but at a much smaller size. When you clicked on the small picture, the main one loaded 'instantly' because it was still in the cache. He has since rebuilt his page with proper thumbnails. Be warned !
Here is the eagle again, but displayed in a smaller size, the code is this :
<IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" BORDER="5" ALT="A Tawny Eagle & the author" WIDTH="68" HEIGHT="84">
and the resulting image is this :
So remember, it may look like a half sized thumbnail of the original image, but it is the same image file with the same number of bytes in the download which takes the same time to download as the 'normal' image. Don't do this ! Always create a separate thumbnail image.
This is so easy. First lay down a link tag as normal, then instead of putting some link text, put an IMG tag. Simple. Here is one for you, using my good friend the Tawny Eagle again ! (Hope you like Birds of prey - I do. Here it is step by step :
First step, lay down an anchor tag which links to the desired document, internal location or web page etc :
<a href="http://www.safaricamlive.com/Encyclopedia/Birds/Eagles/Tawny%20Eagle%20Info.htm">
Note that this page uses spaces in its URL - this is a bad thing and also notice how they have been amended by the browser to be '%20' rather than real spaces. Remember, it is not advised to use spaces in a filename etc.
Next, instead of the link text, insert an IMG tag :
<img src="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Click here for more info on Tawny Eagles" WIDTH="136" HEIGHT="167">
Notice how this is a complete IMG tag with alternative text etc. There is nothing you can't add to a linking IMG tag that you can add to a normal IMG tag.
Finally, close the A tag as normal with :
</A>
This gives the whole anchor tag as follows, I have split it over three lines because it is quite wide and it is a lot easier to read this way. Of course, if your browser window is too narrow, it will wrap onto more than three lines !
<a href="http://www.safaricamlive.com/Encyclopedia/Birds/Eagles/Tawny%20Eagle%20Info.htm">
<img src="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Click here for more info on Tawny Eagles" WIDTH="136" HEIGHT="167">
</A>
And here we are again, the resulting output looks very similar to the following. Note what happens when you hover the mouse over the picture and when you click, off you go ! Try it out (if you are still connected to the internet that is !)
Notice that the picture has a border, even though I didn't request one in the IMG tag. This shows that the image is a link and can be clicked upon. When you visit the location linked to the picture, the border will revert back to the colour of a visited link, just the same as a text link would have done. (It's not as easy to see though !)
Putting an image into a table is easy. Here is a table showing my Tawny Eagle (well, one I borrowed for the day !) and I in two rows of two columns. The code is this :
<TABLE BORDER="1">
<TR>
<TD><IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Eagle one" WIDTH="136" HEIGHT="167"></TD>
<TD><IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Eagle two" WIDTH="136" HEIGHT="167"></TD>
</TR><BR>
<TR><BR>
<TD><IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Eagle three" WIDTH="136" HEIGHT="167"></TD>
<TD><IMG SRC="http://www.dunbar.cwc.net/images/tawnyeagle.jpg" ALT="Eagle four" WIDTH="136" HEIGHT="167"></TD>
</TR><BR>
</TABLE>
And the result is this :
So all you have to do is put the IMG tag into between the TD tags and each cell becomes the picture. Easy or what ?
For best results, don't scan a photograph at full resolution - it takes far too long to download and your readers will have gone away long before they see the photo.
To scan a photo, set the scanner to 79 dots per inch as this is about the best that most monitors can resolve - your scanner may be doing 2,400 or more dots per inch - it is just wasting disc space at that resolution.
Additionally, consider reducing the size of the photo to something reasonable, remember a 6 by 4 inch photo is quite huge on a monitor. I usually reduce to between 60 and 75%, sometimes more.
Save the photo in a compressed format such as GIF or JPEG. I tend to use JPEG as it seems to give better results (ie smaller files) when compressed and I don't have to worry about infringing good old Unisys' claimed patent on the GIF compression algorithms. The PNG format is supposed to be a replacement for GIF and has no patents to infringe. I have tried using this format, but always found the compression to be much less than with GIF or JPEG so I am sticking to JPEG for now.
| Previous Lesson | Home Page | Next Lesson |