• home
I
• contact us
I

Search

Making your pages load fast: optimize your graphics

Heavy images cost you money and traffic. They cost you money because they require both significant storage space and bandwidth. Since your web host will usually give you a limited amount of storage space and a maximum data transfer allowance, heavy graphics may cause you to exceed those limits.

Also, heavy images can cost you traffic: if your heavy graphics make your pages take more than 10 seconds to load, your visitors will run away faster than you can say .back button..

You must optimize your images for the web. Your images should be in either .gif or .jpg formats (.gif works best for logos and navigation buttons, while .jpg works best for photographs.) The idea is to reduce the size of your graphics so that they take as few bytes as possible while retaining acceptable quality.

This can be done using free on-line image optimization tools. One of the best ones out there is Gifbot, by Netmechanic:
http://www.netmechanic.com/GIFBot/optimize-graphic.htm

They have a user-friendly web-based interface that works like this: you upload your picture, they process it, and almost instantaneously they will give you several lighter versions of your graphic for you to chose. Pick the image that takes the fewest bytes while still retaining and acceptable quality level. It is not uncommon to reduce the weight of a picture by up to 70% with no noticeable decrease in quality (especially if the image is in .jpg format.)

Another useful tip is to use thumbnails. Thumbnails are miniature versions of a picture that are hyperlinked to its actual size version. The thumbnail will load fast, and by clicking on it your visitors will be able to see the actual size version.

Also, it is very important to specify the width and the height of your images in your HTML code. Since the text of your page usually loads faster, if you don’t specify the width and the height of your images the browser will have to reposition the text once the pictures load, consuming more time. If you take the time to specify the width and heigth of your images, the browser will lay out the text where it should go from the beginning, even before it loads the images, saving time.