Inserting images into your web page can be a great way of personalising and spicing up your site. They can make it more dynamic and more pleasing to the eye, however, there's a few things you must remember when using them. Firstly, when deciding on a particular picture or graphic, you have to take into consideration the size of the file itself. We want to keep the file size as little as possible, whilst still keeping a bit of quality. This is because the more pictures and graphics you have, the longer your page will take to load, along with the increased use of band width. You would do this with a dedicated piece of software, many of which have options to resize and reduce your picture specifically for the web. If you have any software that perhaps came with a camera you have, try it out and see if it has these options. I used Kodak Easy Share which came with my camera, so I'm sure others will have this ability. Adobe Photoshop and Paintshop pro definatly do, so, if you don't mind spending a bit of cash, check them out.

Secondly, It's very subjective on what the total file size of your pictures and graphics should be, as, with the explosion in broadband use and the increasing speeds people have, it can be a hard decision to make. Do you try to appeal to users that have high speed connections or do you try and accomodate dial up users, it's a decision you may want to consider (try and strike a balance...although it's fair to say, dial up use is getting increasingly less of a consideration). That's why reducing the file size with the photo editing software can really help. For example, the software I used reduced a 450KB photo down to a 16-32KB photo (depending on the photo), without much of an obvious difference. So, if you do this, you'll be able to have more flexability. The best way of deciding how many photos to put into your web page is to:

1. Have a look around the net and see what others are doing.
2. Decide on whether or not a picture or graphic is really necessary for what you want to achieve.
3. Think about the overall look of your page and how it would look to the user. Would 2 or 3 well placed graphics do the job?
4. Consider using thumbnail images where you think it's possible.

The code we use for inserting an image into a web page is:

<IMG SRC="The path and file name goes here (e.g, CAT.GIF)">

This would insert the image at the point in the page where you typed it...it would be on the left because this is the default position. See the example below, which is using the code above:

The example is the basic code to insert an image, the image is displayed and this text is displayed below it. Of course, you have flexability when inserting your images. We do this using the following codes:

• ALIGN="CENTER, TOP, LEFT OR RIGHT"
• WIDTH=""
• HEIGHT=""
• BORDER="""
• ALT=""

The first one (ALIGN="CENTER, TOP, LEFT OR RIGHT"), is the attribute to align your image with surrounding text. If you used "ALIGN="RIGHT" within your image code, the image will be displayed on the right of the page with text to the left. For example, the code would be:

So, if you carry that on and substitute the "RIGHT OR LEFT" for "TOP OR CENTER", you will be able to try different effects and get the look you want. Using "ALIGN="CENTER", will center the first line on the image and following text will carry on at the bottom. Using "ALIGN="TOP", will put the first line at the top of the image and the following text will carry on at the bottom. Have a go!

Ok, so now you understand the "ALIGN" attribute, we'll introduce the rest, "WIDTH, HEIGHT, BORDER, and ALT". It is advised to use the "width and height" attributes, as this will enable your page to load quicker, aswell as giving the browser the information about the image dimensions, this will help the browser put aside the necessary space on the page. You can add a border to your image, it's upto you, we do this by using the "border" attribute. Lastly there's the "alt" attribute. The text put into the alt attribute will be displayed to the user whenever the mouse goes over the image. This is very useful to visually impaired people, as you can describe what the image is, rather than leaving it blank. It can also be a great way of adding a little more information to the user, as you can say, for example (this is thinking you have a picture of yourself on holiday) "Here I am on holiday in Spain June 2006". The user would see that information as they mouse over your photo.

Right, taking into consideration all of the examples above, let's look at a code using all of the attributes. Here's an example:

You don't need to use the attributes in the order shown, it doesn't matter what order they go in. The "width and height" attributes can be reduced to make an image smaller (if you do this try and make changes to both attributes equally, e.g, change "100" and "50" to "50" and 25"). The example has halved the dimensions. I wouldn't recommend enlarging an image, as this will reduce the quality of the image.

You also don't need to use a border, just leave this out if you don't want one. The best way to get to grips with images and aligning them the way you want, is to try a few out. You will find what suits your needs and you will soon get the idea of how to write the code. To finish off this section, which can be very in depth, I will show you a couple more codes that can be useful.

You may want to use a graphic as a link, so that when the user clicks on an image, that activates the link. We do this with the following code:

Try out a few things and remember to be sure that your graphic is, firstly, in the directory your specifying and secondly, that you have paths and file names correct (including case). If you do this, you won't have many problems, hopefully! COUGH, COUGH! Also bare in mind that this is a brief look at the subject and nothing really beats "having a go". You'll find you only really learn by making mistakes and experimenting. What we've covered here should enable you to do a great deal with images...and probably enough for general use. However, if you need anymore information just get in touch!