Tips & Tricks-June 2003

At a SIG meeting last night, I overheard bits of a conversation about graphics file formats. As a result, I thought it might be a good idea to review the most common types so I did a little research and came up with the information that follows. I also have some experience with the different file types in both web and desktop publishing.

Image files are generated by a number of different programs, including graphics programs like Adobe Photoshop, Fireworks, Microsoft Paint, and a multitude of others. If you own a digital camera, the images are saved as a particular file type and you may even get to pick the type.

Image files are typically viewed in two different ways-on web pages or in print. Different file formats have distinct advantages that make one format better than another depending on what you are going to do with the file.

File Types You Are Likely to Encounter

BMP (bit map), files seem like they have been around forever and probably have been around as long as Windows has. They are the least complicated of the file types listed here. They are best for simple images and are not suitable for photographs. They are used for background images in Windows.

This image is a BMP file in the Windows folder for Windows XP and while it is very sharp and clear on the screen, the original file is 1.37 megabytes in size. BMP files can have up to 24 bits of color per pixel (that works out to just over 16 million color choices. This makes it possible to have an image like "Bliss."

These files will have the extension .bmp

TIFF (Tagged Image File Format) has also been around a while. The files contain more information about the image than most of the other formats. It also can use as many as 24 bits of color per pixel. The images can be fairly high resolution and therefore can get very large. It is the best format for printing high resolution color images and most commercial printers will use this format to do color printing. It is also the best format for archiving images. It is not used for web images because the file size is so large. The extension is .tif (Usually)

GIF (Graphics Interchange Format). You say "jiff" and I say "gif." You will hear this pronounced with either a hard or a soft "g," but it's the same format. GIF files have 8 bits of color, 256 colors. It is used for images with solid colors and the colors used are limited. It is best for cartoon-like images or graphics. It is used extensively on web pages for buttons, icons and logos. The files are small.

GIFs can have a transparent background which makes it possible to lay the image over a background without having to match the background color in the original file.

The example on the left is a transparent GIF file and the one on the right does not have a transparent background. GIF also can be animated, which consists of a series of GIF images embedded in one file and displayed one at a time at a specified rate. The extension for GIF files is .gif.

JPEG (Joint Photographic Experts Group) files are used widely on web pages and many digital cameras can save images in this format. The primary reason is that these images can be compressed to sizes significantly smaller than the original file size for viewing on a monitor. If compressed too much, however, the image will degrade and appear "pixelated" or jagged. The format can support 24 bit color, so is suitable for photographs and more complex graphic images.

JPEG images can be printed, but as with the screen, greater compression will result in a poorer quality image. I prefer to print images from their full size files if they are JPEG images, using the resizing capabilities of the software to find the best looking print. (Actually I prefer to print from TIFF files, but don't always have the time to make the conversions.)

Many graphics editors allow you to choose compression rates with previews of the different compressed files or have wizards that will do it for you according to the eventual destination of the file-print or web. These examples were produced with the file export wizard in Fireworks.

This image is the original JPEG file with no additional compression. The JPEG files was 23.4 KB in size.

This image is the same file compressed to 20%. The file size is 2.3 KB.There is significant degradation of the image and the background no longer appears to be white. I compressed the file this much to demonstrate the difference more clearly, but the original could be compressed to about half the file size without the degradation being too apparent on the screen.

The file extension is usually .jpg for Windows applications.

PNG (Portable Network Graphics) format was created to provide a patent free image format in response to attempts by the patent holder of the GIF format to charge royalties. PNG provides 48 bit color and can be compressed to file sizes smaller than GIF (under some circumstances). File sizes are still larger than JPEG files. The format is not yet widely used because of varying ability of browsers to display the images. This image is 88 KB.

Keep in mind that optimal resolutions vary between web and print. Images can be saved at 72 dpi for display on a monitor, but should not be less than 300 dpi for print. You may have to experiment to find out what will look best with your printer.