Compress Images to Save Bandwidth

Early web pages consisted mostly of text with little or no images. Businesses and hobbyists who hosted their own websites did not have to worry about staying within bandwidth limits. With the rise of shared web hosting however, people have had to be more stringent about how they allocate their bandwidth.

Most websites contains one or more of the following elements:

• Text
• Images
• Large files

Some people automatically save their images in a particular format regardless of what it is. For the sake of argument, I am going to assume that they are saving all of their images as JPEGs. The JPEG format relies on a lossy compression algorithm to decrease the size of image files at a reduction in quality. It is for this reason that JPEGs are better suited for photos than for images that contain large areas of solid color.

Observe the artifacts around the text in this enlarged screen shot:

(JPEG)

Compare it to this image:

(PNG)

Notice how the solid blue background is consistent throughout the image. What I am trying to convey is that you would not be able to distinguish between this image and an actual explorer title bar.

While both images are small in size, the JPEG takes up seven Kilobytes while the PNG takes up only one. As you can see, not only is the PNG smaller, it also looks better. The difference in size would be even higher for the whole image.

I recommend using IrfanView for compressing and saving your images. It does not beat commercial programs, but it works well enough for most quick tasks. Compressing the images can seem confusing at first, but the best way to learn what works best is by playing around with the options and seeing how they affect the image. Ask yourself these questions when saving an image:

• Where am I going to be using this image? For personal use on your computer, you should always save the image in a lossless format such as PNG. You can always make changes later if you choose to upload it to your website.
• What type of image is it? Use JPEGs for pictures with many different colors in one area. Compression tends to be less noticeable on textured surfaces such as wood, grass, buildings, etcetera. Use PNGs for images with areas of solid colors such as screen shots from your computer. Anything with a repeated color or shade of color qualifies for this format.

Other guidelines to follow:

• Never save an image as a BMP! BMPs do not use any techniques for reducing the size of an image file. If you need to retain as much of the original image as possible, save it as a PNG. They are lossless like Bitmaps, but the file size is also reduced.
• Do not use paint to manipulate and compress images. Paint was not designed to be a full-fledged photo editing program. It does not posses the same features that Photoshop, Paint Shop Pro, IrfanView, and other editing suites do.

Using these guidelines will not only save bandwidth and increase the quality of your images. All your pages will load faster because users will download a smaller amount of data. This is important for people who have still use Dial-up to access the Internet. You will also be able to store more images without worrying about how much disk space you are using. It may not seem like a large gain at first, but over time the savings will become apparent.