Why Optimize your Images

The single greatest factor affecting loadtime on most sites is the images. While they look pretty they take time to load. So in order to lower the load time of your site the first thing to do is to try and reduce the number of images on your page(s).

Take a cold, objective look at your site. Try to view it through a visitor's eyes. Which graphics are necessary and which are superfluous? Can you manipulate the text with HTML (bold, italic, font face) as opposed to using a text graphic? Can a clickable image be replaced with a text link? Cutting expendable graphics can greatly speed page load time. Assess each graphic one-by-one to determine if it should stay or go; keep only those that are essential.

You will of course be left with the most important images and the next step is to reduce the size of the remaining images because smaller images load faster. After you've pared down your images to the essentials, it's time to reduce the size (byte-wise) of what remains. You can do this in two ways:

* Reduce image dimensions (Width x Height in pixels).
* "Optimize" the image.

Reducing the dimensions of an image isn't always a viable option. The layout of your page may depend on a particular image being a specific size (the way the page appears, though, is of course relative to screen resolution). If you can safely shrink your image dimensions, do so, and then optimize. If you cannot change the dimensions of the images, optimize only. "Optimizing" an image means reducing the file size of the image. This is accomplished primarily by removing extraneous colors from the image. For example, a GIF saved at 256 colors can usually be reduced to 128, 64, or 32 colors - sometimes even less - without compromising image quality. This can *drastically* reduce the file size of an image which, in turn, (often) shaves seconds off load time. A JPEG saved at 100% quality can usually be reduced to 50-90% quality without compromising image quality and will load in less then half the time.

Remember to never use your webpage to resize images on the fly. If you upload an image thats 500x500 pixels and then only display it on your website as a 100x100 pixel image you are making the user wait unnecessarily for detail they dont need. Even though the webpage is displaying it in the small size the user still must download the entire large image before they are able to view it . Try optimizing that image to the right size before uploading it and you will notice a huge difference in load time and the size of the image. Recently I found one site that took 250 seconds to load. The site had a row of Visa, Mastercard, Discover and American Express labels that were about 50pixels each in size on the screen. When I ran it through the html toolbox I found that each of those images were uploaded and were larger then my screen size and they were being resized inside the webpage. Once we resized the actual image files the page took 30 seconds to load. As you can image as a result of this the merchants sales increased greatly because the site loaded faster for everyone.

Once you've pruned the extra images and optimized the "keepers", upload your lighter page. Remember to always keep an a copy of your original graphics before optimizing them. There is nothing worse then picking the wrong size or optimization and not being able to go back.