Adding Pictures to Your Pages

Why Pictures?

One of the best ways to make your web site interesting is to add some pictures. The actual HTML tags needed to do this are rather simple. However, you may have noticed that the web is littered with sites that are overburdened with slow-loading images. We do not want to create one of these,so we will first concentrate on ways of keeping images small, so your viewer does not get bored waiting for them to load. We start with a check-list of points to consider, then deal with some of these in more detail in the sections which follow.

• Does the picture really add anything to your page? If you don't need a picture, don't use one!
• Don't make the picture any bigger than necessary.
• If you need a big picture, consider adding a small "thumbnail" on the page, so the viewer can choose whether or not to load the full picture by clicking the thumbnail.
• Use a small range of colours where appropriate.
• Use a format that compresses your image files as much as possible.
• Design your page so your viewer has something interesting to read whilst the pictures are loading.

First Catch Your Pictures!

If you have a Digital Camera this will do nicely! It does not need to be the latest high-resolution state-of-the-art camera for web pages. Even quite a simple model will produce perfectly good results for the relatively small images that work best on the web. Many of the photo's on this web site were taken using a Kodak DC20 camera.

A second alternative for getting your pictures into digital form is to use a Scanner. Again you do not need anything very special. Scanning an ordinary 6" x 4" photograph at 100 dpi will give more than sufficient resolution for use on your web site.

If you have artistic skills, you may be able to produce some interesting pictures directly, using one of a number of Painting or Drawing Programs. In general this works best for simple cartoon-like drawings, (Though see Jeremy Sutton's web site for an indication of what is possible given the right tools and sufficient talent).

Finally you may resort to using commercially available clip-art, though you should first check the copyright situation. Some vendors of clip art allow you to use it on a personal web-site, others do not. Avoid the temptation to litter your pages with clip art. Your web site should say and show something about you. Unless you have drawn it yourself, clip art is hardly a personal statement!

How Big?

There is another reason for keeping your pictures small. The larger they are, the longer they take to load. A typical 300 x 200 picture will take around 10 seconds to load, whereas a 600 x 400 picture would take around 40 seconds.

The small size of pictures on the web has implications for what sort of images work best. The resolution of a good photograph is around 2000 x 1500 pixels. We have said that 300 x 200 pixels is the norm on a web page. So detail that will show perfectly on a photograph will be lost on a web image. A similar relationship exists between a cinema picture and a TV picture. Whereas a scene in the cinema may consist mostly of long shots and medium shots, the same scene shot for television will use lots of close-ups. You should adopt the same policy on your web page. Close-ups of an individual work much better than a group shot of the whole family for example. If you are taking pictures specially for the web, with a digital camera, take big close-ups. If you are scanning in family photographs, crop the scanned image as tightly as possible to achieve the same effect.

Image Formats

The two formats work best for different sorts of pictures. If you have an image with a small pallette of colours and large areas of a single colour, GIF works best. Such images could be diagrams, logos, cartoons etc. GIF uses a "loss-less" compression, which gives a perfect copy of the original image. It works by detecting repeating patterns of pixels having the same colours. Instead of storing every pixel, it is only necessary to store the pattern once, with a number saying how many times it is repeated.

Photographs and scanned pictures, have a large number of different colours and very little chance of finding repeating patterns. For such images GIF will produce no useful compression. However JPEG is designed for just such pictures. It uses a "lossy" compression technique (i.e. one where the image is degraded in some way by the compression) which has been carefully designed so that the image is degraded in ways that are not noticable to the human eye. It is able to achieve dramatic compressions for such images, a 20 times reduction in file size is quite normal. If JPEG achieves such high reductions, you might wonder why it is not used for all images. The answer is that if you have images with large areas of absolutely uniform colour (for which GIF works well), the degradations introduced by JPEG would be visible as fine patterning, which would not show on the "busier" image of a photograph.

The GIF file format also allows you to do some other useful tricks that are not possible with JPEG. For example when saving a GIF file, you have the option of setting one of the colours in your pallette to be transparent. Normally you would reserve one colour for use as the background, making this the transparent one. When the image is viewed it then appears to be drawn directly on the background, rather than appearing in a rectangular block of some different colour. The picture of the artists pallette at the start of this topic uses this technique.

If you want to get really fancy, the GIF format even allows a restricted form of animation, but you need care here to avoid creating big image files.

So the moral is to decide which format to use for a particular picture, based on its content. GIF files are normally saved, with a name finishing .gif whilst JPEG files have a name finishing .jpg .

Image Manipulation Software

The program I most frequently use is Paintshop Pro, which has been around for a number of years, and is well respected.

Which ever program you use, take some time to get familiar with its capabilites, before using it to produce the images you require, saved as either .jpg or .gif files. Then copy these to your webpages directory where you are storing your HTML files. Because JPEG is a lossy compression format, when saving .jpg files, your program will probably give you a means of adjusting how much compression you want. Choose a fairly high compression. It is suprising how high a level you can use before anything looks wrong with a picture. Remember, even if you can see slight differences between "before" and "after", this does not matter. Your viewer is only ever going to see the compressed result. Your only criteria should be "Does this picture do the job I want it to do, and is the file as small as I can make it."). On Paint Shop Pro, I use a compression level of 25 by default. On a typical 215 x 280 full colour image, this reduces the file size from an uncompressed 180kB to around 11kB.

Incorporating the Images in Your Page

So the minimum required to display an image is:-

                        <IMG src="myphoto.jpg">

Another attribute which it is good practice to include, is the alt attribute. This provides for an Alternative text message, to be displayed on browsers which cannot display pictures, or where the user has switched off the display of images, to speed up operation. Many modern browsers display this message when the mouse is passed over the picture, so it can also be used as additional information about the picture.

An image tag, with all these recommended attributes present would look like:-

                <IMG src="myphoto.jpg" width=300 height=200 alt="My Photo">

Other attributes which may be useful, are border, which sets a border in the default text colour around the image and hspace and vspace which preserve horizontal and vertical space around the image, to separate it from any surrounding text.

You would expect to be able to position an image to either the left or right hand sides of the page and to allow text to flow round it. Indeed there is an align attribute which does this on the most modern versions of the common browsers. Unfortunately when this was first introduced, it had a different effect, allowing just a single line of text to be positioned alongside the image, in various positions. This is much less useful. The snag is that there are now both sorts of browsers still in use, so the effects of the align attribute are unpredictable. For this reason, it is best avoided altogether. If you want text to appear alongside your image, it is best to use a table, with the image in one cell and the text in another. (Tables are described in detail in a later topic). If you merely want to position an image in the center of your page, with no text alongside, the best way is to contain the <IMG> tag between a pair of <CENTER> and </CENTER> tags.

Images as Links, Using Thumbnails

A good use of images as hyperlinks, is to put a very small "thumbnail" picture on your page. Then if the viewer chooses to see a larger version of the picture they can click the thumbnail image.

Implementing an image as a hyperlink is very easy. You simple use the standard anchor tag, described earlier, but instead of text between the <A> and </A> tags, you place the <IMG> tag. So for example to implement the thumbnail example just mentioned, you might use:-

        <A href="bigpic.jpg"> <IMG src="smallpic.jpg" height=30
        width=30 alt="Click for Big Picture" border=2></A>

Using an Image as a Background

To use an image as a background, it is only necessary to add a background=URL attribute to the <BODY> tag thus:-

		<BODY background="paper.gif">

Try the effect of a background on your web pages and see if you think it improves the look. A subtle matching background on all your pages can give an effective "house style" to your site. A tasteless one can make it quite unreadable!