Monster Munch by Joe Gillespie

by Joe Gillespie — Nov 1, 1998
godzilla

The radio says that Godzilla is headed for town, everybody has to get out quick!

But there's only one road out of town.

And, just out of town there are a couple of roundabouts, so all the traffic has to slow down before it can even reach the highway.

The road out of town was built for normal day-to-day traffic, not for a mad, mass exodus like this.

Folks, I think we have a bandwidth problem!

The original meaning of the word bandwidth referred to radio bands and how many stations could be crammed close together into certain 'bands' of the electromagnetic spectrum without interfering with one another.

On the internet, it refers to the amount of traffic that can pass between any two points. Just like the traffic trying to escape Godzilla's hot breath, it's progress depends on two things - how wide the road is and how fast you can go.

No matter how wide the main highway is, and how fast the speed limit on it, your total journey time is governed by the slowest parts - the bottlenecks. That two mile stretch to the main highway only has two lanes - and a low speed limit. The traffic lights and roundabouts slow everything down even more.

The internet is just like the network of roads joining towns. There are the interstate highways, the roundabouts and traffic lights and the smaller roads into town. The flow of traffic coming into town, or your computer, can only be as fast as the slowest route in the total journey. Unless you have a dedicated line or multi-channel ISDN set-up, you have a one-lane highway and a very low speed limit dictated by your modem.

If you were to drive from New York to San Francisco, there are many routes that you could take. It's difficult to know which will be the fastest at any particular time because of local traffic conditions along the way. You might have to make quite a few detours because of unexpected incidents.

Similarly, the path of any particular chunk of data traversing the internet can take many different routes. Two pictures side by side on a Web page could well have arrived by completely different routes and can't be guaranteed to turn-up in the correct order either.

Given that there are severe restrictions on the amount of data arriving at any computer, it makes sense to leave out as much extraneous data as possible. That's why graphics compression is so important. They say that a picture is worth a thousand words, on the Web, it probably is. Even a relatively small GIF or JPEG file will use as much bandwidth as a thousand words (6K). These two main graphic file formats used on the Web use very different methods to compress the data. GIF uses a 'lossless' compression technique, so the image is never compromised in the process. Because it works best with flat colors, it is most suitable for graphic images, type and interface elements.

GIFs can also handle regular patterns very efficiently. A checkerboard pattern can be used to simulate a huge range of colors that are still web-safe. Where some graphic file formats that rely purely on run-length encoding do not compress such patterns at all, the GIF format does a very good job.

The ability to reduce the bit depth of GIF images also helps to make files smaller. If you only need 4-bits for a particular image, why use 8-bits and double the file size for no reason?

Smaller files are faster files.

The JPEG file format uses a fairly complex set of algorithms which allow you to trade-off picture quality for file size. It will compress an image quite considerably before the effects of the compression start to show and works best on pictures that don't have large areas of flat colour like photographs and illustrations with lots of gradients and tonal changes.

When working with JPEGs, it is best to get hold of a software tool that provides an accurate before-and-after preview so that you can see the relative effects of compression and file size. Adobe ImageReady, AutoF/X WebVise Totality and BoxTop's ProJPEG plug-in for Photoshop are three particularly good solutions in this respect.

As a designer, you have to juggle image size, file format and compression techniques all the time to get the best result for the minimum bandwidth. Usually, there is a clear case for either GIF or JPEG. Sometimes, it's not so clear and you have to try both to see which gives the most effective result.

It is unfortunate that many designers who have moved from print to Web page design still think in print terms and try to force print layouts and styles on an alien medium. Bandwidth is rarely a problem in print unless you try to reproduce more colors that the printing press can handle or you have to use five point type to make the copy fit a given area.

Trying to make a literal translation from a DTP file to a Web page may seem expedient, but it invariably doesn't work because of the inexact formatting provided by the various browsers and the high bandwidth requirements of inappropriate graphics.

The key concept here is in being true to the medium. Web pages should be designed with their particular set of problems and restrictions in mind. No matter how good it looks, a slow Web page is a badly designed one.

Remember, that monster stomping and munching in the direction of someone's town, or computer, may be of your creation!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float