Disk & Bandwidth Reduction Tip #1: Optimize Images
Why is optimizing images important? Because it will save you money. But, we'll get to that in a minute. For now, let's start at the beginning... Many clients fear the fantastic web design myths they've, unfortunately, been taught. Some of the potentially costliest myths concern bandwidth. First off, many clients don't understand what bandwidth is, and therefore don't know the impact it can have on their hosting expenses So, let's start by answering the basic question: "What is bandwidth?"

A Twenty-Seven Second Lesson on Bandwidth
In computer networks, bandwidth often refers to the amount of data that is carried from one point to another in a given time period. Whenever data is accessed, bandwidth is used. Every time someone visits a webpage, bandwidth is used on the web server to display the page's content in the visitor's web browser. The more content on the webpage, the more bandwidth is required to display it. The larger an image's file size, the more bandwidth is required to display it.

If you think of your webpage as a car, bandwidth is the fuel that propels the car from its home to your website visitor's house.

Fantastic Bandwidth Myth 1: "I can't reduce my site's bandwidth usage."
Continuing my witty car analogy, just like there are things you can do to improve your car's gas mileage, there are things you can do to reduce your website's bandwidth usage. The step that usually has the biggest impact is to reduce the file size of the images on your website by reducing their quality. This process is called "optimization".

Waitaminue, reducing an image's file size by reducing its quality? Am I nuts? We all want our images to be the highest quality possible. We can all relax, because it is possible to reduce an image file's quality without a noticeable impact, just as it is possible to reduce an audio file's quality without noticeable impact when optimizing it as an MP3 file.

For example, many digital cameras save their photos in high-resolution, print quality, JPEG file format. JPEG images can be used on your website, but the high-resolution version of the image straight off your camera will have a very large file size. Huge, in fact. By optimizing the image, you can retain the image quality, but reduce the image's file size. All images used on a website should be optimized.

Fantastic Bandwidth Myth 2: "Optimizing images requires expensive software."
There are many easy-to-use free image optimization tools available. Some are even web-based. Search Google for the phrase "free image optimization" to find websites with image optimization resources.

Fantastic Bandwidth Myth 3: "If I optimize my images, I'll sacrifice image quality."
Let's return to the notion mentioned above that I am nuts. The next common fear is that optimizing images to reduce their file size will also reduce their image quality to the point that they'll lose website visitors, customers and sales. True, it is possible to over-optimize an image and ruin it. However, the file size of most images can be greatly reduced without causing a noticeable deterioration in quality.

For example, below are two versions of a color photo of an entertained baby. Version one of the image was saved as a high quality JPEG image. The file size is 87 kilobytes. Version two is the same image; but it has been optimized by compressing it to reduce the file size to 29 kilobytes. The optimized image has been reduced to roughly 1/3 the file size of the original, with an indistinguishable reduction in image quality.


Image Version 1: Unoptimized JPEG ( 87.4 Kb)


Image Version 2: Optimized JPEG ( 29.3 Kb)

Fantastic Bandwidth Myth 4: "What I see when I view my webpage is the same as everyone else sees."
Some web designers are hesitant to optimize their images because they've worked hard to make their website look sharp and stunning. Well, here's some rain for your parade: to save on bandwidth costs, many large ISPs will run all of a webpage's images through their own filter before displaying them to your website visitors. Thus, the version of your pretty, yet oversized, images seen by your website's visitors may be the version that is pulverized by the ISP's image filters. If your images are properly optimized, and therefore have a smaller file size, there's a much better chance that the ISP's image filter will leave them alone.

Fantastic Bandwidth Myth 5: "Optimization isn't worth the time investment."
Let's have some fun with math. Let's say I'm running an online store with 10 products. Each product has one unoptimized photo, of 87.4 kilobytes, the same size as our example above. On a typical day, my store has 500 visitors, each of which views just one page of my website, which lists all ten of my product photos. 500 visitors multiplied by ten 87.4 kilobyte images = 437,000 kilobytes. Over a month's time, that adds up to 13,110,000 kilobytes, or 12.5 gigabytes. (And that's just for the product photos on the page. That's not including the rest of page's HTML content, buttons, ads, scripts, or all the other pages on my website!) If we calculate the same website traffic, but replace the images with the optimized 29.3 kilobyte version, the month's bandwidth usage drops to 4.1 gigabytes.

Now, considering that additional bandwidth can cost up to $2.50 per gigabyte, optimizing just ten images on my website can save me $21.00 a month in potential bandwidth fees.

Hopefully this underscores the importance of optimizing the images on your website. Note, images are not the only content that can be optimized. Other files, Flash, and even the HTML source code used on your site can be optimized. Simple steps to optimize your website content will have a financial impact on the operating costs of your web-based business.

Wow...terrific post

Thanks a ton for the time and effort putting this hit list together.
Excessive bandwidth use bad, saving bandwidth and money good!

Brendan G.

Did this 6 months ago on our site and our bandwidth dropped 3gigs per month.
I recommend Adobe ImageReady

I recommend this program - http://www.fookes.com/ezthumbs/index.php

Not only will it resize the dimensions of your images - one at a time or a bunch - you can use it to optimize your images in batch.

Good post

Great information! Thank you.

Additional Disk & Bandwidth Reduction Tip: Shrink your HTML code.
Don't forget! Images aren't the only things you can optimize! The size of your HTML code can also be optimized, which will reduce bandwidth usage.

There are several tools available that will "shrink" the size of your website's HTML files by reducing unnecessary characters such as extra spaces, line breaks, etc. These programs run on your computer, scan your HTML files, and edit the source code. You then upload the shrunk HTML files. Typically, there's absolutely no noticeable difference when viewing your webpages in a browser. (Unless your pages use non-standard HTML code to begin with.)

Some sample HTML shrinker programs can be found at:
http://www.htmlshrinker.com/
http://www.htmlcodecleaner.com-http.com/

We ran the pages of the Modular Merchant website through some HTML shrinkers. The results were a noticeable improvement. We shrank 94 web pages, resulting in a total reduction of 345 Kb. (An average of 3.67 Kb per page.) There was no visual change in the pages we tested, after they were shrunk they looked the same in a web browser as they had before. The pages can still be opened and edited in web development applications such as Dreamweaver.

Some pages will shrink more than others. For example, the home page of the website was reduced by 7 Kb! Returning to the example from Tip 1, if my store has 500 visitors, each viewing just my home page, my bandwidth usage will be reduced by 3,500 kilobytes a day. Over a month's time, that adds up to 105,000 kilobytes, or 0.1 gigabytes.

While a 0.1 gigabyte reduction in bandwidth isn't as glamorous as what we saved in the previous "image optimization" example, it does still translate to a potential $0.25 savings per month. Not bad for simply removing some extra spaces from the page's HTML code!

Here's a tool to compress CSS. This is my favorite tool right now. You can also sort the selectors, and properties if you want to:
http://www.cleancss.com/

Here's one for java script:
http://jdstiles.com/java/jscruncher.html

Thanks for the informative post and follow up everyone!