Types of GIFs Animated GIF (89A) This 89a version of GIF allows storage and playback of a sequence of still images to create illusion of animation. Animated GIF files consist of sequential frames that reload from a browser's cache and replay in an infinite or predetermined loop to simulate motion.

Transparent GIF An advantage that a GIF has over a JPEG image is that designer can designate a color of GIF image to be transparent. For example, you can create a circular logo in a square image by making background color transparent. The image appears circular, when, in fact, it is square with information to appear transparent.

Interlaced GIF Graphic interlacing (the progressive rendering of images) is unique to GIFS and is preferred method for display of large graphic files. Many people find "fuzzy-to-sharp" animated effect of interlacing visually appealing, but most important benefit of interlacing is that it gives reader a preview of full area of picture, while picture downloads into browser.

When to use a GIF Buttons, bullets and navigational tools that accent your Web pages. Interlacing is best for larger GIF images such as illustrations and photographs.

Joint Photographic Experts Group (JPEG) Graphics in JPEG format are capable of much greater color depth than GIFs, but usually require more time to download. JPEG can contain up to 24 bits of color information (16.7 million colors). Remember though, that most users are only capable of displaying 8-bit color.

When to use a JPEG JPEG enables you to use brilliant colors and provides support for complex images and digitized photographs but it is not designed for use with simple images.

JPEG compression is not as effective as GIF compression and may distort images with few colors or large areas of same color. JPEG compression is therefore not designed for low-resolution images.

Portable Network Graphics (PNG) The PNG file format is emerging as new format for Web graphics. PNG files are lossless and support transparency like GIFs, yet also support compression and high bit depth like JPEGs. In addition, PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must be 8-bit and 24-bit depth.

When to use a PNG PNGs behave similarly to GIFs and work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best. They also support better interlacing than interlaced GIFs.

Knowing what types of graphics to use and when to use them for your web site will help you avoid many pitfalls of bad web design.

Part 2 of this article will discuss how to optimize graphics for your web site and factors that affect optimization.

3. Image Resolution Monitors typically display data at 72 dpi (dots per inch). Therefore, always save your files on Web at 72 dpi. Always resize your image in your graphics software before you insert it onto your web page. If you resize its dimensions when it's already on your site, it will look distorted.

6. Browsers Someone viewing your site is subject to a completely different result depending on which browser he is using. Your images may appear harmonious in Internet Explorer (IE) but may be broken up in Netscape Navigator (NN). Therefore check your image for differences with Internet Explorer (IE) and Netscape Navigator (NN) browsers. Your images should appeal to all users.

Unfortunately AOL has its own browser, which filters sites through its own AOL proxy system. This means all graphics are converted from JPEG and GIF to ART format.

Most AOL users also use their browsers with default "compressed graphics" checked, so what normally looks good in IE or NN, will look blurry or distorted on AOL. To change

this, AOL users need to go to preferences and check "never compress graphics".

7. Caching This is a temporary storage area of your hard drive where browsers keep files while they display them. You can create a consistent look and feel to your Web Site, by reusing another graphic on another page. You will be retrieving it

from cache. The more graphics that you reuse, faster your pages will load.

Testing To test load times of your pages you need to first publish them and then clear cache in your computer before loading them, and timing them, from Internet. Put url in your browser address box, start timing when you hit Go and stop when word 'Done' appears in your status bar.

Images are main factor that contributes to slow loading of your web pages. By implementing these techniques for optimizing your images, visitors will have a far more pleasing experience.

Part 3 of this article will discuss other methods for creating fast loading images when creating a professional web site.