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. Artist's Pallette

First Catch Your Pictures!

There are a number of ways of getting pictures in digital form suitable for use on your web site.

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?

Image sizes are generally measured in Pixels. A pixel is the smallest element that your screen can display and screen resolutions are quoted as the number of pixels horizontally and vertically. Common values are 640 x 480, 800 x 600, 1024 x 768 and 1280 x 1024. (Note that the screen resolution has nothing to do with the physical size of the screen, although you will generally need a large screen if you are to see the higher resolutions at their best.) On a 640 x 480 screen, by the time some space has been used for toolbars and scroll bars, the available space for viewing your page is unlikely to be more than 600 x 400, so pictures bigger than this are not going to fit on the screen for some of your viewers. For a normal illustration accompanying some text, devoting a quarter of the total page area to the image looks about right visually. So you should think in terms of making most of your pictures no more than 300 pixels x 200 pixels.

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

There are two image formats in regular use on the web, GIF the Graphic Interchange Format and JPEG the Joint Photographics Experts Group format. Both formats compress the picture information so the file size is dramatically smaller than an uncompressed file. (Without compression, our relatively small 300 x 200 full colour picture would result in a file size of 180kB, which would take around 3 minutes to download as part of our web page.)

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

You will require some image manipulation software to convert your images to GIF or JPEG format and to crop them to include just what you want. This software will also allow you to resample or resize your images to bring them to the correct size for your web page. If you have a scanner or a digital camera, you will normally have received some image processing software with it, that can do this job. If you have not, there are a number of packages available in the shops, or as shareware, which will do the job. Such programs can often be found on magazine cover disks, avoiding the need for lengthy downloads via the web.

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

Adding the image to your page is done with the aid of an <IMG> tag. This has a number of possible attributes, of which the src attribute is the most important. It specifies the source of the image by means of a URL, in exactly the same way that the href attribute of the <A> tag specifies the source of a new page to link to. Normally this will be a relative URL to an image file on your website, but it need not necessarily be so. The browser uses the .jpg or .gif extension of the filename in order to tell whether a JEPG or GIF image is expected.

So the minimum required to display an image is:-

                        <IMG src="myphoto.jpg">
This would simply place, the myphoto.jpg image on your page. One snag here, is that the viewer's browser does not know how big the image is until the file has been downloaded. So it will first display the page, with a tiny place-holder for the image, then when the image has been downloaded, the page will be re-drawn for the full picture. This wastes time, and means if your viewer has started to read your text, whilst waiting for the picture, they will find everything moving as the page re-draws. To avoid this, it is good practice always to specify width and height attributes in the image tag. With these, the correct space is reserved for the image when the page is first displayed, so there is no need to re-draw anything. Width and height are specified in pixels, and your image manipulation program will tell you the correct values for these before you save the image.

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

It is often useful to use an image as a hyperlink, so that clicking on the image takes the viewer to a new page, or a different place on the same page. You may often find this used to give viewers symbols rather than words to click on. But don't go overboard with this, a menu page with lots of fancy clickable icons rather than simple text entries, may look pretty but takes much longer to load and so is less useful.

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>
Notice how the alt attribute has been used to indicate that the thumbnail is a clickable link. The border attribute gives another indication of a link. When an image used as a link has a border, the border colour will mimic that of the text colour used for a text link.

Using an Image as a Background

Another use for an image is as a background for your complete page. Used tastefully this can be used to provide a watermark or paper texture, that will enhance the page. However you should beware of adding a background that distracts the eye from the page's content. You do not need to supply a large image for this purpose. If the image is smaller than the page, the browser will automatically tile it to cover the full space. The best images are often very small and just provide a textured paper appearance. (I currently use this on the pages of the main section of the Shotover web site). When preparing an image for this purpose, you need to draw it in such a way that when tiled together, the eye cannot see the joins as straight lines interrupting the pattern.

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!

Copyright © Alan Simpson 2000-2006 Back to index. Forward to next page. Last Updated 2006-02-19