As you may know, the most widely supported web image graphic formats are GIF and JPEG. This may add to you confusion--when should I use GIF and when should I use JPEG?

The easy rule to remember:

1. Use GIF format with graphics that you have created on your computer such as horizontal rules, buttons, or animation.

2. Use JPEG format when the images are scanned pictures or photographs.

GIF file can contain the maximum of 256 colors (8 bit) or less, which is good for customizing your graphic files. For example, if you create a GIF image of a red arrow you can customize the file to have only two colors, read and white. This means that the file is very very small because its palette contains only two colors. GIF file will yield a higher quality and smaller size image, compared to JPEG, when it is used with computer generated graphics such as icons, logos, buttons, etc.

JPEG was built to contain 24-bit (16.7+ million colors) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of color changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low color level and details like computer generated graphics.

GIFs also has some special features such as animation, transparency, and interlacing.

  Animated GIFs

You can get GIF animation tools from many sources, I have listed them on Graphic Tutorials page, another page on this site.

Here are some sources for free GIF animation:

• GIF Animation Station -- Collection of animated GIFs

• SSAnimation -- Free GIF Animation

• GIF89a Animation site -- Royal Frazier's GIF animation on the WWW

• Funky animations without fancy tools -- Scot Hacker's article for Ziff-Davis Interactive

Trick When Creating Transparent GIFs

Sometimes, you have to create a graphic using anti-aliasing or another method--like glows, feathers, or drop shadows--to make its appearance look soft. Doing this, the image looks soft because the edge of image is blended with the background. You have to be careful when making the image transparent because the edge of the image has some parts of the original background surface attached. Please look at the examples below.

Both images are transparent GIFs that were created using the anti-aliasing method, which makes the edge of image look soft. The difference is the first image was created on a white background and has been made transparent, but the second image was created on a black background and has been made transparent. Both images were put here on a white background, so you can see the black color come along with the second image.

To avoid this problem, remember to create your transparent GIFs on a background color that is the same or close to your web page background color.

If you do not use anti-aliasing, your image may not look nice, but there is no effect when making it transparent. The image below on the left was created on a gray background, and the image on the right was created on a white background. Both show no difference when put on a white background.

Graphic Tutorials page is another page on this site that has the list of the applications that can produce transparent GIFs.

 

For comments, suggestions or any type of questions ... feel free to email me!