.gif, .jpg, .pdf, .png, .eps, tif/tiff, ... - are you confused by all those graphics file formats? Here are some hopefully easy to understand descriptions of what each format is, how they are used and where they will be used.

On-line/Web Graphics

These are the graphics formats which are used for displaying pictures within your browser window. We'll start with the most widely used online graphics formats and work our way down.

GIF (Graphics Interchange Format)

GIF is probably the most widely used graphics format on the web. GIF is a non-lossy compression method. Just about every graphics format that is used for posting on the web is compressed - the files are squished down to get rid of unneeded padding into as small a packet as possible, so that files take up less space and can be transmitted faster. In the case of GIF, the compression algorithm preserves all of the information that is contained in the original graphic so that nothing is lost. This means that you can save and re-save GIFs as many times as you like, without losing any information in the file.

The major drawback of the GIF file format is the limited number of colors. The human eye can make out more than the 256 colors allowed to GIFs, so when you see a GIF you can often make out a "jaggy" pattern, especially on the edges of curved elements (look at the edges of the "Picnic Table" text above.) However, for images that have wide areas of the different color, this is not such a problem. So that's why GIFs are often the most useful file format for logos or graphical texts.

JPEG (Joint Photographic Experts Group)

As with GIF, JPEG (all files have the.jpg suffix) are bitmap images. However, while GIF only supports 256 colors, JPEG can contain millions of colors, making it more ideal for "true color" images such as photographs. If you have any kind of image that has smooth, shaded transitions, in most cases JPEG is a better choice than GIF.

So why hasn't JPEG totally replaced GIF? For one thing, JPEG uses a lossy compression method. This means that the higher the compression rate, the bigger the loss of information in the file itself. (Remember that a high compression rate means a smaller file.) Take a look at the examples below: the image of the CD has been saved at minimal, medium and maximum compression levels (that translates to high-quality, medium-quality and low-quality of the image). You can clearly see that the larger the file (the less compression), the better the quality of the image.

PNG (Portable Network Graphics)

PNG is another bitmap or raster graphics format which supported to some extent by most major web browsers. PNG uses a lossless compression method like GIF.

So then why hasn't PNG replaced GIF? The big reason is lack of complete support for the format by the browsers. One of the major advantages of PNG, the ability to display variable transparency or alpha channels, is currently only supported by Netscape 6 (all platforms), MSIE 5.0 on the Mac, and iCab (a small browser for the Mac only).

One other advantage of PNG is that it is an open standard, while the compression method used for the GIF format is patented by a private corporation, Unisys. Although Unisys has never actually enforced its patent, some people, especially those in the Unix and Open Source communities have preferred to stay away from GIF for this reason.

 

Non-web graphics formats

EPS (Encapsulated Postscript)

Postscript was a language invented by Adobe back in the mid-80s for sending commands to certain printers, namely laser printers. (are you old enough to remember when laser printers caused a sensation? Wow - 13 built-in fonts!) Since then it has been developed further, and is now the lingua franca of the printing world. Just about all commercial computer-to-printing options use Postscript, or the related PDF (Portable Document Format) in their workflow.

In the most simplistic terms, EPS is part of the Postscript language. For web designers, it's important to note that EPS can be either a vector format or a bitmap format. Since it's a common (non-proprietary) file format, it's often used as a way of exchanging files between vector graphics programs such as Macromedia Freehand, Adobe Illustrator and Corel Draw. However, you may also encounter EPS files that are produced by bitmap/raster graphics programs such as Adobe Photoshop. This is because EPS files are usually considered to be the format for printing purposes, so the format can encompass both vector and bitmap "descriptions". For web use, you don't have to worry about saving to EPS, but if someone hands you an EPS file for further processing, be sure to ask them what kind of file it is (bitmap/raster or vector), and what program was used to produce it.

BMP (Bit Map)

BMP is a Microsoft Windows specific file format that is not recognized by other computer systems (except within a few programs). It's a bitmap format as the name implies, and is the format used for Windows wallpaper and such. It's not a very efficient format because it's not compressed, which makes it unsuitable for online use.

TIFF (Tagged Image File Format)

TIFF is a widely used bitmap graphics file format. It is a lossless format (no compression), so it's not too useful for online file exchange. However, when you want to make sure that every bit (pun unintended) of image information needs to be there, then TIFF is the format to use. TIFF files are also the most easily manipulated in desktop publishing programs. TIFF is widely used in the printing arena, where the quality of the image is of much bigger concern than it is for online viewing.

 

Color formats

RGB

• most common color palette
• made up of colors mixed from red, green and blue
• can be used in all browsers

CMYK

• Cyan/Magenta/Yellow/Black
• this color mode is required to print images (RGB file must be converted to CMYK in order to print)
• CMYK is not used for web images