Thus, it's often a delicate balancing act for web site designers, as they try to create sites with amazing graphics to impress visitors on one hand, and sites that display quickly on the other hand. Most successful web sites enjoy the best of both these worlds, and good web designers know and understand the importance of optimizing their site's graphics.

Simply resizing or placing image size tags in a web page's html code will not reduce the overall download size of graphics. So instead, we look to optimization. Optimization is the process of reducing an image to the smallest file size possible at an acceptable image quality. Some optimization tips you may find useful are detailed below.

Use the right tools

Adobe Photoshop and Macromedia Fireworks are two of the better and more commonly used image-editing software. There are a few others, but these two you will find are highly recommended by many graphic artists and web page developers, especially since the newer versions come with numerous options to assist you in optimizing your graphics specifically for web pages.

Use the correct file format

JPEG and GIF are the two most commonly used file formats for saving images. However, it's important to know 'when to use which'. Use JPEGs for photos (for example, pictures taken with a digital camera or scanned to your hard drive) and GIFs for clip art or drawings (images that have large expanses of the same color).

Optimize your GIFs - use optimized palettes that contain only the colors used. This can help cut file sizes by as much as 50%. Photoshop and Fireworks both allow you to preview your graphics before you save, thus allowing you to experiment with the number of colors to choose.

Compress your JPEGs - Most image editors have settings for the export of JPEG images in several modes or sizes. Generally, the higher the number, the higher the quality and the bigger the file size, so when creating JPEGs for the Web, try several settings, typically 30, 50 and 70, to see which offer the smallest file size and the most acceptable image quality.

Break up or slice images where possible

An often-used optimization trick is to break-up or slice an image into pieces, using tables and/or layers to bring them together as one complete image when the web page is done loading. Doing this doesn't necessarily reduce the overall size of the image, but it allows the Surfer to view individual parts of the image as it loads, instead of having to sit and wait on a single large graphic to load.

Watch the image resolution

Web graphics are displayed at a resolution of 72 dpi (dots per inch). A resolution higher than that will increase the actual display and file size of the image, but does not provide additional quality or clarity. So if you've scanned or edited images at a higher resolution (100 - 300 dpi), try to reduce the resolution of these images to 72 dpi before putting them live on your web site.

Sandor Panton ( This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ) is a Jamaican currently working as a Search Engine Optimizer for an Intenet Marketing Company in Ontario, Canada. He is also the owner of www.top5jamaica.com, a Jamaican search portal.