Bandwidth Planning
ncorporate an understanding of your audience’s bandwidth reality into your overall design.
Bandwidth describes the size of the “pipe” through which data moves between computers. The higher the bandwidth, the more data that can flow at the same time.
Print and broadcast design have their own limitations (think press requirements and television resolution); bandwidth is one of the web medium’s limitations. For web design, being beautiful or useful isn’t enough?if a Web page takes too long to download, few readers will wait long enough to see it.
The key to good use of graphics?and the bandwidth they require?isn’t to avoid graphics altogether. It is to understand the bandwidth limitations of your audience’s environment and create a page that works within those constraints. This means planning?thinking about your page elements in advance and making your design decisions before you sit down to build a page in your HTML editing program.
In fact, if you design thoughtfully, bandwidth is unlikely to be as much of an issue than if you subscribe to “just throw it together as you go” philosophy.
Make every image count; don’t use gratuitous graphics. If it doesn’t add value, drop it.
Use Flash or Shockwave when the application they deliver allows your reader to interact with your site and content better; don’t use these higher-bandwidth techniques just to make your logo spin and glitter.
Use animated gifs when they deliver your message; don’t use animated gifs because you think they look “cool.” Animation packs a lot of bandwidth overhead and too much animation can be annoying.
There’s a wide variety of connection speeds in use; look to your core audience to see what their typical connection is.
Bandwidth is measured in bits of data transmitted per second. Higher bandwidth connections include:
- T-3, which moves data at 45 megabits per second (45,000,000 bits per second)
- T-1, which moves 1.544 megabits per second (1,544,000 bits per second)
- DSL, which moves data between 384 kilobits (384,000 bits) and 1.5 megabits per second
- Cable modem, which moves data at 1.5 megabits per second
Lower bandwidth connections are typically made through a modem. Three common modem speeds are:
- A 56k modem, which moves 56,000 bits-per-second
- A 28.8K modem, which moves 28,800 bits per second
- A 14.4K modem, which moves 14,400 bits per second
Always take connection speed with a grain of salt. Just because a 56K modem is capable of delivering 56,000 bits per second doesn’t mean it actually will. Phone line quality, number of users, distance from the main pipeline, volume of data, speed and reaction time of your server, general web traffic, and other factors slow down even the higher bandwidth connections.
Consider your audience’s reality as you make your design decisions. If they are all on DSL you have more leeway than if they connected via 28K or 56K modems. For modem connections, 1K=1second is a good general guideline. On DSL, cable modems and other faster connections, use 5K=1 second as your guide.
Remember to add all elements on page when you calculate page size. HTML uses bandwidth, too.
Every element on your page adds bandwidth?don’t forget to take all components into account.
The most common mistake people make is they think of bandwidth only in terms of the individual graphic. In most cases, the graphic is part of other elements on a page.
When you think about bandwidth, look at the total page and all the elements that make up the page. Not only should each graphic file be as tight as possible, but the construction of the page and the elements within should also contribute to minimizing bandwidth.
As you design your pages, be aware of each and every element?including HTML?and what it contributes to the overall download time.
Don’t be thrown by the number of graphics on your page or the file size of each graphic?you are always looking at total bandwidth. It may turn out that one large 20K image is actually more effective than 62 small 1K images.
A site is only as fast as your readers believe it is.
You can create two pages, each with the same approximate size and load time, and yet the viewer will get the impression that one loaded faster than the other. The actual bandwidth doesn’t matter?it is the perceived bandwidth that counts. Perception creates reality so if a viewer thinks your site is fast, then your site is fast.
If you use large images or imagemaps, try slicing your graphics into pieces. While it will take the same amount of time to transfer the entire graphic, the viewer sees the different pieces coming in at once and perceives it as coming in faster.
Always specify the dimensions of your graphics using the height and width attributes in the image tag. The browser will reserve the correct size slot for the graphic, and flow the text around it. The viewer thinks the page is faster because they can read the text while the graphics are loading.
