Contact Tom

Introduction

Understanding Your Montor

Understanding Bitmap File Formats

Understanding Vector Formats

Avoiding That Funny Pattern In Screen Captures

Screen Captures for Black and White Print

Additional Resources

Printable Version

 

 

 

 

Page 2: Graphics for Technical Communicators, by Tom Balazs

Understanding bitmap file formats:

Often a technical communicator does a screen capture and brings it into a graphic editing program. But then they have to choose what format to save the file in. Remember, there is no one format that is best for all screen captures. What suits your situation best depends on what you are trying to do. Lets begin by reviewing some of the common image formats.

In Eric Ray's excellent article on file formats he wrote that it is important to consider:
Color Depth - how many colors the format can display. GIF is an 8-bit format (256 colors), PNG-24 is a 24-bit format (65.5 million colors).
Compression - Uncompressed file formats like TIFF are useful when you must preserve maximum quality and you are not concerned about file size.

Transparency - PNG-24 and GIF formats support transparency. This can be important, for example, if you have a circular logo. In many formats you will have no choice but to display a square image with a circular logo and some background color of your choice. In GIF and PNG-24 you will still have a square image but you can define the area outside the circular logo as transparent.

Portability - Portability refers to how many operating systems, software programs and web browsers will be able to display images made in a particular format. WMF (Windows Meta File) may be a good choice if you know you will not have to take the image to a non-Windows computer. Other formats like GIF and JPEG can be viewed on nearly all platforms and on nearly all web browsers.

The most common bitmap formats are:

BMP (Bitmap, filename.bmp)
BMP is a confusing name for a file format. Any image that has been divided into colored squares can be described as rasterized, pixelized or bitmap. So don't confuse the term bitmap with the file format Bitmap.

Bitmap format is a lossless file format often used for images whose color quality must be preserved. According to the Photoshop 5.5 help file, "BMP is the standard Windows image format on DOS and Windows-compatible computers." So this format will give you great portablility as long as you are using Windows and DOS computers. Using this format might result in better quality but will also result in larger file size. Remember that if you are starting with an image which only has 256 colors (such as a screen capture from a monitor that is set to display only 256 colors) you could create a smaller size file with almost the same color quality by saving it in GIF format. Many web browsers cannot display the BMP format. BMP images can be inserted into Word.

GIF (Graphic Interchange Format, filename.gif)

The GIF format was developed in the 1980s by CompuServe. GIF file names usually end with .gif. At the time it was a revolutionary development because it allowed images to be seen on the internet. Today almost all web browsers can display GIF images. It is an old reliable standby. This is an 8-bit format. That means it can display 256 or fewer colors. In Lynda Weinman's book "Photoshop 5.5 / ImageReady 2.0 Hands On Training" she says, "GIFs are best for flat or simple graphic images that contain a lot of solid areas of color, including but not limited to logos, illustrations, cartoons, line art, etc."

Lossy vs. Lossless. The GIF format is a lossless format, that means you can re-save a GIF image as a GIF without risking further loss of information. This is a little confusing because if you save a photograph in GIF format you will definitely lose information, the millions of colors will be reduced to 256 colors. But unlike JPG format resaving the image in this format (saving a gif as a gif) does not result in further loss of quality.

GIF is one of the formats that supports transparency. GIF has one-bit transparency (completely visible or completely transparent). That means a selected color can be made transparent. But because one-bit transparency can be a crude tool it is important to use it carefully.

Because this page has a white background it is a bad idea to try to make the black background transparent. The image on the right looks much better.

Animated GIFs are simply a series of GIF images that have been joined together to play like a flip book. This is an important ability because it allows you to create simple animations that can be viewed in almost all web browsers. The weakness is that these animated files can be large. If the first "frame" is 5 kilobytes then a five frame animation will be 25 kilobytes.

JPEG (Joint Photographic Experts Group, filename.jpg)
The JPEG format is usually used for photographs. Almost all web browsers can display JPEG images. It is well suited to photographs because it is a 24-bit format. That means it is capable of displaying 65.5 million colors (if your computer monitor can display that many or you printer can print that many). In Lynda Weinman's book she writes, "JPEG's are best for continuous-tone images, including but not limited to photographs, landscapes, glows, gradients, drop shadows etc." That is an excellent definition because it recognizes that graphics that might otherwise be best saved as GIFs sometimes have elements (glows, gradients, drop shadows) that require the use of JPEG format.

Saved as a GIF the Image is 36K
Saved as a JPEG the Image is 15K
Photograph Copyright ©Tom Balazs 2001

JPEG is a Lossy format. Every time you save an image as a JPEG image you lose a little more information. If you save a PNG as a JPEG you lose information. If you save that JPEG as a JPEG you lose information again. So when working with JPEGs it is best to have one original saved in a lossless format and always return to that when you want to change something. Then save the changed original as a JPEG.

PNG (Portable Network Graphic, filename.png)
There are two PNG formats PNG-8 (256 colors) and PNG-24 (65.5 million colors like JPEG). But PNG uses a different compression algorithm that creates shaper images than the JPEG format can achieve. One of the strengths of PNG is that it supports "true alpha channel transparency". This solves the annoying GIF problem where the desired image is surrounded by a halo of the background color that is now supposed to be transparent. Since Word 2000 can import PNG-24 images, this may be your best choice if you are working in Word 2000.
Some people have great hopes that PNG-24 will replace JPEG as a standard for the web. But this format has weaknesses too: today many web browsers cannot display PNG images, they are usually larger than JPEG and GIF images, and the PNG format does not support animation.
For an example of PNG in action visit Panic.com. If you are using a browser that supports PNG then clicking on a thumbnail image will open a larger (with transparency) image on top of the page you are viewing.

TIFF (Tagged Image File Format, filename.tif)
TIFF is a lossless format used mainly for print. TIFF is not supported by web browsers. Because it is lossless saving a file as a TIFF instead of a GIF will result in a larger file. This format is often used to bring files from one program to another or when scanning images. It is supported by almost all graphics and layout programs. Word 2000 does support the TIFF format. So if you are more concerned about image quality than about file size you can insert your images into Word in TIFF format.

Program Native Formats
Many graphics programs have their own format (Photoshop has .psd, Freehand 9 has .fh9, Word has .doc). It is best to keep your files in this format as long as you can. As a final step you can export your image in the format of your choice. If you are using a program that does not have its own native format then you will begin by choosing the most appropriate format for the image.

Previous Page

 


Copyright © Tom Balazs 2001