Graphics File Formats
If you're doing any serious web page design work then a good graphics package is essential. Paint Shop Pro is excellent and reasonably inexpensive but there are many others available. We've said already that you can only use .JPG and .GIF file formats. Both of these use compression to keep the file sizes small but each uses a different method to compress the image.
If you use a scanner to scan in a photograph or picture then, likely as not, it will be in bitmap format and if you save it, it will have a .BMP file extension. These tend to be large files depending on the resolution that you used to scan it in. In any event, they cannot be used on your web page so you'll need to convert them or save them in a different format.
Generally speaking you'll find that photos tend to be better as .JPG images and that pictures with fewer colours are better saved as .GIF files. It can be a good idea to keep a copy of your original .BMP file if you're going to save it as a .JPG file because the type of compression used is a lossy one - in other words, each time you save as a .JPG you will actually lose some of the information. The type of compression used when saving as a .GIF file is non-lossy and all the original information is retained.
Because graphics tend to take a while to download, some designers make two versions of their files: one would be a small 'thumbnail' picture which the user could then click if they wanted to see the larger version. The code to make a thumbnail picture into a clickable link would be something like:
<A HREF="bigpic.htm"> <IMG SRC="images/smallpic.gif" BORDER=0> </A>...so that clicking the picture of smallpic.gif would load the page bigpic.htm which could contain the larger picture, say, bigpic.gif and maybe some explanatory text as well. You would, of course, need to ensure that your readers are made aware of this by including a suitable message on the page.
Let's run through a quick example:
- create a new document clickpic.htm as follows:
<HTML>
<HEAD>
<TITLE>thumbnail</TITLE>
</HEAD>
<BODY>
<H1>Using a Graphic as a Link...</H1>
<P>Click the picture to see a larger version of it.</P>
<P><A HREF="bigpic.htm"> <IMG SRC="images/smallpic.jpg" WIDTH=200 HEIGHT=135 BORDER=0 ALT="small picture"> </A></P>
</BODY>
</HTML>
- now create another one called bigpic.htm as follows:
<HTML>
<HEAD>
<TITLE>large picture</TITLE>
</HEAD>
<BODY>
<H1>The Bigger Picture...</H1>
<P><IMG SRC="images/bigpic.jpg" WIDTH=400 HEIGHT=275 BORDER=0 ALT="big picture"></P>
</BODY>
</HTML>
- check that the link in clickpic.htm works
If you're going to do this, by the way, it means that your graphics software should be able to alter the size of a picture so that you've got two versions of it. It may be that you have the choice to resize the image or to resample the image. Accepted wisdom seems to be that .GIF images should be resized, while .JPG images should be resampled. In any event, there's always a balance to be struck between keeping a good quality image and reducing the file size; it can be a difficult line to walk.
We'll return to the subject of having graphics as links when we look at bullets and buttons later on, but meanwhile...