Squeezing your website through the eye of a needle - how to save space and still look good.    

There was a time when you may have fantasised about making your own web pages available to the world, but most likely baulked at the idea of forking out for server space on top of your ordinary internet account. However, an increasing number of service providers are now chucking in a sliver of web-space with an ordinary account, and even certain (ahem) magazines now offer web-space along with a subscription. So, you've got your web space, you stuff it full of lists of your favourite bands, 37 pictures taken during last month's trip to Ibiza, and audio-clips of your entire family reciting the programmer's mantra 'hello world!' Unfortunately, with the 1/2 - 1 Mb available, this multi-media extravaganza will soon eat all your hired space, and probably start leeching your credit-card account. In this column, I'll be giving you a few tips to allow you to make the most of your web space, however much you may have available.

You are unlikely to get far by squeezing every last erroneous character from your text/html files - you'd need to get rid of about 1,000 of them just to free up 1k of space. Image files, and other multimedia fluff, are a different matter. Often you will find that you can cut 50% from the size of a picture, without unduly affecting its appearance, and with larger images this can translate into tens, or even hundreds, of kilobytes.

Image files on the web generally come in two flavours - gif and jpeg (jpg). However, the choice of which format to use should be based on more than just personal preferences and your graphics software's defaults. Both have very different specialties: gif files are use compression algorithms to shrink image data, in a similar way to Pkzip or Stuffit, and are very good at reducing the size of pictures with large blocks of single colours. For this reason they a good way of saving drawings or logos. With a jpeg on the other hand, the file size is kept down by working out which part of the picture a person is least likely to notice and then discarding some of the data for this region. They are optimised to produce the best results with photographic images, and saving a cartoony drawing as a jpeg may lead to an unacceptable loss of clarity or even, heaven forbid, an increase in the file size. The bottom line, then, is to save simple drawings as gifs and photo-realistic images as jpegs - but if you're unsure which to use, try both and compare the file size and image quality.

Once you've decided the format for your picture, there's still (much) more you can do to shrink the final file's size. With a gif file, this involves reducing the colour depth; a picture saved as a gif file can contain up to 256 colours. For each pixel in the image, 8 bits are required to describe which of the 256 colours to display. However, if you only require 128 colours, this can be reduced to 7 bits, for 64 you'd need 6 bits, and so on. Thus, if your image has only 16 colours, you can throw away the wasted bits, and cut your file size in half. To do this conversion, scour your graphics software for anything resembling 'GIF options', 'Indexed colour options', 'Colour depth' or 'Bits per pixel'.

When saving a jpeg image, the file size depends on the picture quality you opt for, usually given as a percentage. Different software will use different default settings - some will save jpegs at 100% picture quality, meaning that the file is still compressed, but nothing from the original is lost. At 80% quality, you will rarely notice much loss of quality, but the file size will shrink dramatically. How far to go in reducing image quality and file size is a decision you will have to make yourself - if you are trying to sell your paintings over the web, you don't want to present potential buyers with a pixellated blob (though you never know, it may still sell). If you're just trying to jazz up your home page a little, the fact that the images are non-essential, combined with the fact that many people viewing them won't have a very good graphics set-up anyway, means that you can afford to lose a little quality.

When it comes to other types of multimedia file, the web standards aren't generally as well-defined as with images, and this is reflected by the fact that most browsers require helper applications or plug-ins to cope with other formats. However, there is usually some compressed format around designed to cope with whatever kind of data you choose to throw at it. Often you will find that the format you're used to using on your system does not support compression. For example, Windows users will be familiar with .wav files for sound and .avi files for video. However, the output produced by either tends towards the gargantuan and, unless you're using five-second snippets, will probably eat up all of your web space in an instant. The answer lies in using an mpeg format - like jpeg, this operates on the basis that we ignore some of the information present in the audio/video signal, and this can be safely discarded. Mpeg audio files usually have the extension .mp2, and video files .mpg. A further option for storing low-quality sound is the Sun m-law (.au) format, but this can only store an 8-bit mono signal - roughly equivalent to telephone quality, but again fine in many circumstances.

There are a few other strategies which are relevant whatever type of file you are storing. Firstly, if you are using any type of directory structure, it's highly advisable to create a directory for pictures, sound, etc. (e.g. /resources or /pics) and stick them all in here. I have worked on sites where each html file has its own directory, along with all related resources. This meant that any image appearing on more than one page would be liberally sprinkled throughout the directories, not only wasting server space but also slowing down browsers which cache the original image and could then load it quickly from memory if it was requested a second time.

A final possibility, if you're really short of space, is to use images that are stored on another site (as long as they don't mind!) For example, if you're linking to a site dedicated to your favourite band, perhaps instead of storing their logo in your web-space you could use the one on their server (eg. use <img src="http://www.someband.com/pic/logo.gif"> instead of <img src="/pic/somebandlogo.gif">). This also has the advantage that cacheing browsers will load the image only once instead of twice. However, the disadvantages are considerable - if the image file is moved on the remote server, it will no longer appear on your page. The same thing will occur if the remote server is busy or not accepting connections. And if a number of sites such as yours decide to 'borrow' their images in this way, there's a much greater chance that their server will be busy.

Hopefully, armed with these tips you'll be able to squeeze a fair bit more into the same amount of web-space. If you're still having problems, or want more details on some of the techniques described above, it's well worth checking out the Bandwidth Conservation Society's site (http://www.infohiway.com/faster). In fact, check it out anyway. It will serve you well, until the time comes when you realise there's nothing else for it but to fork out the readies for another hundred million megabytes, just so that you can show the world your video footage of baby's first tooth, first crawl, walk, word, toilet and first java applet (Hello World!).

© Dan Sumption, July 1996

return to in print, articles by Dan Sumption