Size matters

Of the many things a web designer needs to juggle in order to deliver the best possible site, loading times are an aspect that sometimes does not get the attention it deserves.

With broadband connections becoming ever more common, it is easy to be a little cavalier about this aspect, but it pays to remember that not everyone is working on a Macbook Pro with a turbo speed internet connection. In that respect, the fact that professional web designers are likely to work with equipment and setup that is at the more capable and up to date end of the spectrum, sometimes is a bit of a liability.

Loading times are determined not only by the nature of the internet connection (broadband or dial-up, wireless or cable, etc.) - which are largely the choice of each individual consumer. Factors outside the consumer's control also contribute: the quality of the phone lines if it is an ADSL broadband or a dial-up connection, modem speeds, the distance from the server, or how busy a site is at any given time. As a web designer, one has little control over those issues. What the web designer *can* control is the size of the files that make up a web page, which is the third part of the download speed equation.

A regular html document is usually tiny, in terms of byte size. Where the problems arise is when the page includes a lot of images or media files. Video and audio files are notoriously heavy and require special treatment. Images, however, are a standard component of most web pages, both as part of the information that is being presented, and as part of the CSS style that makes the page look pretty.

Browsers only accept certain image formats: JPG, GIF and PNG, with JPG and GIF being the most common. All these image formats save file size by loosing information. JPG files use compression - they calculate averages for areas that are of a similar colour. GIFs and PNGs use indexed colour - only a certain pre-determined number of colour values is preserved in the image. JPGs are generally best for photographs and images that use gradients and smooth colour progressions, while GIF and PNG are appropriate for images (such as logos or fancy text fonts) which use lines and flat areas of the same colour.

Once the colour information is lost, it cannot be retrieved. Incidentally, this fact offers some protection for artists or photographers who are concerned that their images might be used illegally if they are posted on the internet. Generally the quality of images which are used within websites is so low that they are useless for most commercial purposes, such as printing them out. They can still be used on other websites of course - therefore it is advisable to watermark each image with your copyright notice and website url. That done, you can then look at it as free advertising. :)

Downsizing the image to the smallest possibly file size without visible loss of quality is a bit of a balancing act. There are no standard rules for this - what is acceptable depends very much on each individual image, and so it is best to adjust each image individually. A good eye will serve you better than any mathematical formulas! But it pays to make the effort: nothing is worse than a web page that wastes people's time by taking too long to download. Chances are most people will never wait that long!

Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net