Optimizing Images For Web Pages

If you want attractive, fast loading pages on your web site, then you must optimize the images that you use. Optimizing essentially means finding the right balance between image file size and image quality. There are various ways to do this, and here we'll discuss some of the common options.

Reduce the Image Quality:
Although this sounds like a disadvantage, it actually is not since digital pictures usually have a far higher resolution than any computer monitor can display. By reducing the resolution, or the number of pixels displayed per square inch (dpi), you can effectively optimize the image for both display and download purposes.

Crop Images:
Photos and other graphics often have more surrounding detail than is needed for your purpose. Zero in on the subject of your picture by cropping away any unnecessary white space or clutter. This will reduce the picture size (and load time) while focusing the visual impact directly on the subject matter.

Resize Images:
This one is easy. Why post a huge photo on a web page when a smaller one will serve just as well? Just resize the height and width of the photo in whatever graphics program you use on your computer before uploading it to your server. Do NOT simply reduce the height and width dimensions in your html code as this continues to use the huge file size and merely displays it in a smaller area of the page.

Image Optimizing Tools:
There are some excellent tools available for optimizing images, and one of the best is Irfanview, at http://www.irfanview.com, a free download that enables quick and easy image compression, cropping and resizing.

If you have Adobe Photoshop, you might want to read the optimizing images tutorial at http://catalyst.washington.edu/catalyst/how-to/scanning/minimizeImages.html which has excellent step-by-step instructions.

There are also free online tools. Netmechanic offers free sample use of GifBot, at http://www.netmechanic.com/products/GIFbot_FreeSample.shtml, which displays optimized versions of any image you upload, ranging from 90 percent down to 10 percent compression. MyImager, at http://www.myimager.com, is an online image editor with many different effects options, plus the capability to reduce colors in gifs and reduce quality in jpg format. There are many others - just search for "online image optimizer" in Google for more options.

One caveat - never optimize the original image!
Save a copy instead, and optimize that version so the original is always available in the future if you need it again.

Re-Using Images:
A common mistake among web hosting beginners is uploading the same image into multiple image folders. If your web site has several different directories, each with its own image folder, it might seem logical to upload the logo.gif into each image folder and call it into a page with a link relative to that directory. But consider - if you do this, then your server must reload the logo image every time a visitor moves from one directory on your site to another. Instead, use the same image path every time you use the image. That way, the server loads just one image which is then cached on the visitor's computer and re-used for each page that displays it. This can greatly improve page load time if you have a number of common images, such as a logo or menu buttons.

Choose the Right Image Format:
Most web images are created as either gif files or jpg (or jpeg) files. There are pros and cons to both. Basically, gifs are best for simple graphics or line drawings. They can be created with a transparent background or used in simple animations and are often optimized by reducing the use of colors. The jpg format is better for photographs or full color images, but cannot be animated or used with a transparent background. For more detailed information on this topic, including side-by-side sample images, read David Eisenberg's informative article, "Why Good Images Go Bad - A Guide to Effective Use of Images on Your Website" at http://www.catcode.com/imgguide/index