Graphic file formats

Who cares?

You, them, we. Knowing the proper graphics file format to use in any given situation will save you from ever again hearing these dreaded words: “You should have created that in (the name of the program you didn't create it in),” “Your artwork isn't high enough resolution,” or “I got your file...ha, ha, ha.”

What are vector graphics?

Vector graphics, also referred to as “object-oriented” or “draw” graphics, are created using geometric objects—lines, ovals, rectangles, and curves. A few of the most popular software programs used to create and edit vector images are Adobe Illustrator, CorelDRAW, and Macromedia FreeHand.

To understand how a drawing program works, let’s draw a simple triangle [1]. Remember connect-the-dots? It’s the same thing. You establish a starting point (A), then click where you want the next point along the path of the line (B), and add a third point (C) at the same place as the first to create an enclosed shape—a line that connects to itself. Once established, the program allows you to change the weight and color of lines and the color and substance of the fill inside shapes.

The key is this—it is the primary advantage of a vector over a bitmap image—once you establish the points, the program draws a line between the points at the highest resolution the screen can show and your printer can print. That means you can reduce a vector graphic to half an inch or blow it up to three feet and the program simply recalculates the position of the points and draws the highest quality line between them—hence, large or small, your image is crystal clear [2]. In other words, vectors are “resolution-independent.”

Computer fonts are another form of vector graphics—that’s why you can make them large or small without any loss of quality. Computer-Assisted Design (CAD) drawings, the line drawings created by engineers and architects, are vector graphics too—created entirely from points, lines, and shapes.

Just because they are drawn using a simple method does not mean the resulting images are simple. A shape can have hundreds of points and a single illustration can have hundreds, even thousands, of shapes. Open a vector graphic in a drawing program [3], and you can separate the parts to examine and edit the pieces that make it up.

Another big advantage of vectors over bitmaps is file size. The saxophone above, for example, is stored in the Windows Metafile Format (WMF) and weighs in at a mere 56KB (kilobytes). (Remember that 1MB [megabyte] is equal to one thousand KB [kilobytes]). No matter what size you make it, or what program you use it in, that file size remains the same. In contrast, a 5 inch tall bitmap version of the same file (at 300 pixels per inch) weighs in at roughly 5MB—roughly 90 times the size!

Not only do lean vector files take up less space on your hard drive, they typically load and print far faster. There are even vectors on the World Wide Web. For its Flash Web development program, publisher Macromedia developed the ShockWave Flash (SWF) file format, while competitor ADOBE is extolling the virtues of Scalable Vector Graphics (SVG). Seen all those highly animated sites with floating words and images? Vector graphics.

The primary disadvantage of vectors is they are time-consuming to create. Here [4], I separated one tiny piece from the illustration to show you the degree of detail the artist included in this image. That tiny shape (A) is made up of 22 different points. And though most drawing programs include features for tracing simple objects, most graphics require a good deal of point-by-point editing.

They take experience and patience to create but images in vector form are among the easiest to use, edit, and store. How are they used? A drawing program such as Adobe Illustrator is excellent for everything from creating simple graphics such as logos to composing short documents such as advertisements and brochures. They are also the ideal venue for editing vector clip art.

Below are a few of the most common vector file formats.

You'll have to do a little detective work to discover which vector and bitmap formats can be saved in one program and opened, placed, or imported in another. Generally speaking, using a universal format such as an EPS vector or TIFF bitmap allows more users access to the file. Native file formats—the proprietary, default file formats used to most accurately store the information created in a specific program—are typically less user friendly.

(The saxophone illustration above is from Task Force Image Gallery—a favorite vector graphics clip art collection. It is available in the ideabook.com Store.)

What are bitmap graphics?

Bitmap graphics are sometimes referred to as “digital,” “raster,” or “paint” graphics. Some popular programs that allow you to create and edit bitmap/paint graphics are Adobe Photoshop, Jasc Paint Shop Pro, and Microsoft PictureIt!

The advantage of a bitmap over a vector is that it can represent a much more complex range of colors and shades—photographic detail. Bitmaps, of course, are found everywhere. The images digital cameras and scanners produce are bitmaps, as are most of the graphics you see on the World Wide Web.

A bitmap image is very different from a vector. Instead of connect-the-dots think paint-by-numbers. A typical bitmap is divided into a grid of thousands of tiny rectangles (A) called “pixels” and each pixel can be assigned a different color or shade of gray.

Generally speaking, bitmaps are far easier to create than vectors but they present a complication: they are “resolution-dependent.” Resolution refers to the number of pixels there are in every linear inch of the image. The more pixels per inch (ppi) the higher the resolution. The idea is to keep the pixels small enough that the human eye blends them into continuous tones.

The problem is the number of pixels per inch necessary for the eye to do the blending varies among different media. For Web graphics on a computer screen it's only 72 pixels per inch. But images that will be reproduced on a printing press require 250 or more pixels per inch. Hence, if you copy an image from the Web and reproduce it in print your eye sees the pixels—there are not enough pixels per inch.

The rule of thumb, therefore, is to anticipate in what medium and at what size you will use the image before you create it. And when in doubt, to create originals with as high a resolution as is practical.

If, for example, you plan to print a standard 8.5 by 11 inch 4-color page on a printing press, you'd need to start with a 33MB image (actual file size differs with different bitmap file formats). If you wanted to reproduce it half that size, you would need an 8.7MB image. In contrast, to use it on a Web page would require just a 38KB file.

The point here is you can't start with a small bitmap image and blow it up. Start with the small file and blow it up and you get “the jaggies” (A)—a malady exposed as your eye picks up the saw-tooth edges of the pixels. Low resolution is the reason you can't use Web graphics in a brochure and why you can't blow up a 2 x 2 inch 300 ppi image to 4 x 4. It is worth noting, too, that you should not use high-resolution images (more than 72 ppi) on your Web. The image won't look any better but it will take far longer to open.

Here some common bitmap file formats. As with vectors, if a particular program will not allow you to import a particular format, open the file in a digital editing program and using “save as” or “export” to save it in a different format.

How do you tell vectors from bitmaps?

Once you know the basics the formats are easy to spot. Vectors generally have flat colors and hard edges—bitmaps have continuous tones and a photographic quality.

If you can't spot them outright, check the file name. In Windows you can tell the file format by the three letters that follow the period in the file name. For example, the “eps” in the file name “trumpet.eps” means the file is an Encapsulated PostScript file (filename abbreviations or extensions are listed in the tables above). On the Macintosh, you can read the file icon or single click on the file and choose Command-I to see the file information.

About PostScript, EPS, and PDF

For quite some time, the design and commercial printing world has spoken, primarily, in PostScript—a language that allows a program that can create PostScript files (most of those mentioned above) to talk to an output device such as a printer. The PostScript language is the industry standard for creating and storing information about a page's layout, dimensions, fonts, images, colors, and so on.

Encapsulated PostScript (EPS) and Portable Document Format (PDF) are file formats used to save PostScript information—both can include both bitmap and vector information.

To print EPS files you need a printer that includes a software component that interprets the PostScript language. A non-PostScript printer can only print the crude, preview image most programs generate to help place and position the file within another application. You can buy a PostScript version of most popular laser or inkjet printers for a little extra—and even add PostScript software to a printer you already have.

PDF is the newer of the two formats and offers a simplified, streamlined way of delivering a PostScript language file. PDF files will print on any printer at the best quality the printer can print. But, to create them, you need the program that creates or “distills” PDF files—Adobe Acrobat. All of the major desktop publishing programs and some vector and bitmap editing programs have a “save as” or “export” feature that enables the creation of PDF files.

Our ten minutes is up

All that said, there are exceptions to many of the rules—many details that would not fit in a brief overview. You'll find lots of in depth information on file formats in, particularly, the user's manuals of the programs used to create them.