One of the most frequent mistakes made by novice web designers is putting huge images on their web pages—images that are too large and take too long to download. Images need to be optimized for quick loading and proper style proportions before putting them on web pages. There is a delicate balance that needs to be achieved between file size and picture quality as the majority of load time for a web page comes from the images.

There are three areas where bytes can be shaved off your images: bit depth (the number of colors), resolution (the density or number of pixels per inch the image contains), and the dimension (the actual length and width of the image).

The actual dimensions, or size, of your image is the easiest to achieve, but avoid just setting the dimensions for the image in your web authoring program. You need to resize your image to the proper dimensions before inserting it in your web page; otherwise your image will appear smaller, but in fact the entire large image is still being downloaded. The dimensions are being restricted, but the size of the image being downloaded has not changed.

The resolution and bit depth are a bit trickier, but fortunately there are various tools to aid you in accomplishing this. One of the best is Adobe Photo Shop, though this solution is pricy and has a relatively steep learning curve; it is best left to professional web developers and graphic artists.

One of the best and easiest to use image optimizer programs for novice web masters is available free from Bluefive Software and can be downloaded here. Try it out; I’m sure you’ll like it. You can even use it to optimize your images before you send them in your emails—your friends will thank you.