Multimedia & Graphics: GIF, JPG and PNG - What's the Difference?

Summary : GIF and JPEG are currently the formats for graphic design on the Internet, but there are other options available. Knowing which format to use and in which situation will improve the quality of your graphic design.

GIF and JPEG are currently the formats for graphic design on the Internet, but there are other options available. Knowing which format to use and in which situation will improve the quality of your graphic design. This article provides an overview of each of them, as well as when each format should be used.

The GIF Format

The GIF format is one of the most popular graphics formats on the Internet. Not only is the format excellent at compressing areas of images with large sections of the same color, but it is also the only option for putting animation online (unless you want to use Flash design or other vector-based animation formats, which typically cost more). The GIF89a format also supports transparency, and interlacing.

GIF files support a maximum of 256 colors, which makes them practical for almost all graphics, except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette. It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data.

Transparency

As I mentioned above, the GIF format supports transparency. This allows a graphic designer to designate the background of the image transparent. This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow.

Interlacing

The interlacing feature in a GIF file creates the illusion of faster loading graphics. What happens is that an image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until it has been downloaded in its entirety. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing as a graphic design technique only when it makes sense.

When to Use

Generally, GIF files should be used for logos, line drawings and icons. Avoid using this format for photographic images, and graphics containing long stretches of continuous-tone in them. Good graphic design with GIF files means avoiding gradients and turning off anti-aliasing where possible to minimize the file size.

The JPEG Format

The JPEG format, with its support for 16.7 million colors, is primarily intended for photographic images. The internal compression algorithm of the JPEG format, unlike the GIF format, actually throws out information. Depending on what settings you use, the thrown out data may or may not be visible to the eye. Once you lower the quality of an image, and save it, the extra data cannot be regained, so be sure to save the original.

Progressive JPEG's

Any JPEG file can be saved as a Progressive JPEG. This is very similar to the interlaced GIF. As with GIF, this presents a low-quality image to your visitor at first, and over several passes the quality improves. Some graphic editing tools allow you to specify the number of passes before the image downloads completely.

When to Use

As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colors.

The PNG format

The third, and newest, file format that's widely supported by the Web is PNG (pronounced Ping). PNG was developed to surpass the limitations of GIFs, and as a means by which web designers can avoid worrying about the patent licenses associated with other formats. PNG was designed to offer the main features of the GIF format, including streaming and progressive file formats. It also provides greater depth of color, catering to images up to 24 bit in color.

It's expected that support for PNG will be widespread in the near future, although it will never completely replace GIF, as it doesn't support animation.

Tools For Optimizing

There are several free online services for web designers to drastically reduce graphics file sizes. There are also several stand-alone programs for graphic designers to optimize graphics. With the right tools and graphic file format, it is relatively easy for graphic designers to build impressive images and minimize the resulting file size.

About the authors : Nicky is a Community administrator for the. Matt Mickiewicz is a member of the SitePoint team