by Wendy Connick

Created on: July 09, 2008   Last Updated: April 06, 2012

In this age of instant communication, a webpage that becomes popular ("goes viral" in Internet-speak) can find itself deluged with visitors. For most website owners this is a dream come true... until they find themselves struggling to keep the server up under an avalanche of hits, or end up throwing money at their web hosting companies in a frantic bid to increase the site's bandwidth.

A little advance planning can take the sting out of your potential sudden popularity, and keep your day-to-day hosting costs pared down to a minimum.

For starters, take a look at your site's images. On the typical website, image files are responsible for the vast majority of bandwidth consumption.

The ultimate method for reducing image bandwidth usage is by getting them off your site altogether. That doesn't mean converting your site to text-only; it means taking advantage of a low-cost (occasionally free!) image sharing site to host your images for you. Before committing to a service, try it out on a small scale and then check out your site from different locations; some firewalls will automatically block images from the popular sharing sites, particularly if your visitors are cruising the Web from their office computers.

Are you using HTML to display your images smaller than they actually are? This is a big no-no for web designers, as your visitors will load the full image (at its actual size) into their browsers on every visit, using far more bandwidth than the page needs as designed. Instead, use an image editing program to crop and shrink the image to fit your page layout.

You may also find that you can save images at a lower resolution without compromising their appearance, particularly if they're quite small. Higher resolution means more detail crammed into each pixel, and thus a higher bandwidth use to load all that information into the browser.

Another way to keep images from hogging your bandwidth is by ditching them in favor of CSS-designed text. This technique works well with buttons and other fancy links, since you can do quite a lot with background colors, borders and the :hover pseudo-class. Tune in later for an upcoming series on how to develop interactive menus using CSS and HTML.

Now that you've got your images squared away, it's time to tighten up your text. For starters, you can remove some of the extra white space from your HTML. Blank lines in between sections of code can improve readability, but if you've got a dozen carriage returns between the body tag

• 1
• 2
• Next Page >>