Success can kill. It’s a maxim that all webmasters should keep in mind.

In this age of instant communication, a webpage that becomes popular (“goes viral” in Internet-speak) can find itself deluged in 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. Often you can remove some of the extra white space from your HTML code. Blank lines in between sections of code can improve readability, but if you’ve got a dozen carriage returns between the body tag and your first line of code you’re overdoing it a bit.

Whenever possible, use external files for JavaScript and CSS. Once your visitor downloads the file along with the first page they visit, that file will remain in the browser’s cache as they explore your site – as opposed to loading the code anew with every page, which is what happens with inline or header code.

If you’re hosting your own site, HTTP compression can save you a great deal of bandwidth. It works by storing a compressed version of your web page in a temporary directory, which is then served to any visitors using a compression-enabled browser. You can adjust your server settings to compress static pages, applications or both.

Tightening up your site will help protect you from an onslaught of visitors, denial of service attacks or simply keep your hosting costs pared down to the minimum. And don’t forget, you can relax in the knowledge that your site is neatly and tidily coded to deliver the maximum amount of content in the fastest possible time.