Articles - Web Design

The difference between GIF and JPEG, and where / how to use them.

More articles...

...at Website Awards! Read articles submitted by various recognized award masters!

Title: GIF or JPEG?
By: Richard A. Berends
Dated: 01 April 2000

Two primary types of graphics are currently in use on the web - GIF and JPEG. In most cases, most browsers support these types, and all other formats should be avoided. We will provide you with a overview of both types, and how they should be used.

GIF Format (Graphic Interchange Format)

This format is the most popular format in use on the Internet. Images in this format have excellent compressing areas, especially if large sections of the image are of same color, and it's popular for it's ability to make animations. Moreover, the GIF89a format supports transparency and interlacing features, considerately ease the task of blending these into almost any page. For example: if you place a GIF image with a transparent background on a area with a white background, the transparent area will automatically change to the color of your background.

TIP:  If you are using FrontPage 98 or later, you can apply the transparency tool to make one color area transparent. This will only make the selected color "transparent", for example - you applied the tool on white areas, therefore white will become transparent. If you apply this tool on a JPG image, FrontPage will automatically save it as a GIF image.

GIF files are practically useful for almost all graphics with the exception of photograph as they support a maximum of 256 colors. The most common method of reducing the size of GIF files is to reduce the number of colors in use on the palette. (If you use Paint Shop Pro for example, you can manually increase or decrease the amount of colors by selecting "options" when you save the image). GIF uses an internal LZW compression scheme which helps to make images as small as possible without losing any data.

Interlacing Features

Interlaced GIF images creates the illusion of faster loading graphics. Images are downloaded in "steps" (Appears blurry and become more recognizable as more and more data is downloaded), which makes the user think that the graphics are loading faster. However, interlaced images are slightly larger than non-interlaced images!

Where GIF is used

As mentioned above, GIF files are the most popular format currently in use on HTML documents. Generally, you would use them as logos, frame-by-frame animations, backgrounds, vector or line drawings, icons and decorations. Due to it's 256 color limitation, using it in photography or images that require a high degree of toning and/or special effects is not advised. Therefore, avoid the use of gradients and anti-aliasing to keep the size of your graphics to a minimum.

Optimize your GIF Images!

Reduce the size of your GIF images by using the online facilities of GIF Optimizer.

The JPEG Format (Joint Photographic Experts Group)

This file format was designed with photographic imagery in mind. JPEG are used where image detail is of high importance, as they are capable of displaying subtle variations in shading and hue with remarkable quality in up to 16.7 million colors. JPG uses the internal compression of algorithm of the JPEG format.

The advantage it have over the GIF format is its ability to vary compression of the file by looking for similar "shades" or hues of a color and combines them to form a similar block (but larger block) of color. In some cases, compression ratio of 60% is possible without visible effect. Remember that once you lowered the quality of an image, the data cannot be regained. Ensure make a copy of the original before experimenting!

Where JPEG is used

JPEG images are commonly in use with photography or images that require a high degree of special toning effects (such as shading / 3D / gradients effects, etc.).

Optimize your JPEG Images!

Reduce the size of your GIF images by using the online facilities of JPEG Wizard. There are several stand-alone programs available that you can use for optimizing graphics. Some graphics editing programs such as Paint Shop Pro also supports this feature.


© Copyright  -  1998-2007  -  The Maestro Awards of Excellence. All Rights Reserved
Maestro Awards is a division of Maestro Studios; Hilversum - The Netherlands