File Formats - Vector and Bitmap

What is the difference between a vector and a bitmap (or raster) file? How do they work, and how do I make them? Why you should care about graphics file formats?

This is an edit of a "Fast Class" written by Chuck Green on the excellent Ideabook.com. The original item can be found here.

Some of the articles in our Knowledge Base are aimed at those familiar with professional digital file creation and design. Articles such as this one assume little prior knowledge of the subject.

Graphic Formats - Who cares about file formats? 

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, 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 colour of lines and the colour 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."ib_file_formats_03.gifComputer 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.ib_file_formats_04.gifAnother 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! 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.ib_file_formats_05.gifThey 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.ib_file_formats_06.gifYou'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 favourite 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 colours 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.ib_file_formats_07.gif 

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 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. 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. Here are 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.ib_file_formats_09.gif

How do you tell vectors from bitmaps?

Once you know the basics the formats are easy to spot. Vectors generally have flat colours 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, colours, 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. 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.