Our Newsletter


The difference between Bitmaps,JPGs and Vector Art

Posted on 15th Aug 2009 @ 10:14 AM

Vector(eps,Adobe Illustrator,Corel Draw) vs. Bitmap Graphics (JPGs,GIF, Photo Shop)

 
One of the most common misunderstandings is the difference between Vector and Bitmap (also known as Raster) graphics. This article is here to explain  the primary differences between these two graphic types and explore the areas where usage of each is most appropriate.

It is worth mentioning in advance, because it is a critical point, that when we refer to Bitmap and Vector graphics, we are not referring to any particular file format or extension. Though file formats are typically responsible for saving one type of graphic or another, the distinction between Vector and Bitmap is independent of any assigned extension. Thus, while a .jpg file is always a Bitmap graphic, a Bitmap graphic is not always a .jpg file.

Vector art is key for printing. Since the art is made from a series of mathematical curves it will print very crisply even when resized. For instance, one can print a vector logo on a small sheet of copy paper, and then enlarge the same vector logo to billboard size and keep the same crisp quality. A low-resolution raster graphic would blur or pixelate excessively if it were enlarged from business card size to billboard size.

Bitmap Graphics

Bitmap graphics are the most common graphic format in use on the web and, indeed, on the computer. With the exception of Flash and the still relatively unsupported .svg (scalable vector graphic) format, every single graphic seen on the web is a Bitmap.

Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is minutely small; a single image may be composed of hundreds of thousands of individual pixels. Much like cells revealed from a piece of tissue when seen under a microscope, these pixels are only clearly and individually visible when the image is magnified (fig 1).

Figure 1
figure1[1].jpg

A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors. Complex fills, shading and gradient effects can easily be rendered. The Bitmap image offers as much freedom as an empty canvas.

In Bitmap graphics, there is an immutable connection between pixels and the image they compose. When a Bitmap graphic is saved, the computer is really saving an exact visual picture of the image: this pixel goes here and is this color; this pixel goes there and is that color, and so on and so on.

This connection is responsible for the effects seen when resizing a bitmap graphic. Given three image sizes - an original, one smaller, and one larger - each will naturally contain a different number of pixels. Pixels do not change sizes, but the image has. It takes more pixels to fill the volume of a larger space, fewer to fit into a smaller space. (fig 2)

Figure 2
figure2[1].jpg

Making an existing Bitmap graphic smaller is a process of reduction; pixels are removed from the image until it fits the new size. Computers are well equipped to perform this task. An image can be sized smaller repeatedly and still maintain the same quality, up until the point where there are not enough pixels available to reproduce the image clearly.

At any given size, a Bitmap graphic contains exactly the amount of information (pixels) required to display it. No more and no less. Increasing the size of a Bitmap Graphic is akin to pouring a drink from a smaller glass to a larger one. For the drink to occupy the full volume of the larger glass, we must add additional fluid. The original concoction is diluted, the flavor weakened.

In the same way, the computer must add additional information (pixels) to the original image to allow it to fill the new larger area. Since there is no source for this information, it must be interpolated based on what is currently available in the image. Because the computer is not especially skilled at guessing games, Bitmap images that have been scaled larger are frequently blurry. After extreme size increases, individual pixels "blocks" are more apparent (as though we held a magnifying glass up to it) and the image is said to be pixilated. Slight blurriness can be combated by sharpening the image with the filters provided within many graphic programs, but an enlarged image will never be as clear as the smaller original. This blurriness also occurs for the same reason any time a Bitmap graphic is manipulated, by rotating, skewing or distorting.

Vector Graphics

If we consider Bitmap graphics as being stored in a literal fashion, then Vector Graphics, stored representatively, are their opposites.

Rather than being composed of pixels, Vector graphics consist of points, lines, and curves which, when combined, can form complex objects (fig 3). These objects can be filled with solid colors, gradients, and even patterns.

Figure 3
figure3[1].jpg

Vector graphics are mathematical creations. For this reason, the programs that are used to create them save instructions on how the image should be drawn, rather than how it looks. This is the key difference between the two types of graphics. Because the computer has a description of how the image should look, it can be redrawn at any size, in any position, without losing any quality. A vector graphic resized to 5 times its original dimensions is simply reproduced, exactly, at the new size. It can also be freely manipulated without losing coherence, like a rubber band that can be stretched an infinite number of ways.

The price of this scaling flexibility is that Vector images must remain relatively simple in comparison to Bitmap images. It is impossible to render the nuances of a photographic image in a vector editor; as a result, illustrative vector graphics have a distinct look and feel, even when produced in detail. (fig 4)

Figure 4
figure4[1].jpg

However, Vector graphics are ideal for producing artwork which frequently needs to be presented in different sizes or colors. Logos especially fall into this category. A logo produced with a vector application can be blown up to fit on a billboard or scaled down to adorn a letterhead with no loss of quality.

Additional Frequently Asked Questions for Designers

What are some common Bitmap editors and file formats?
Adobe Photoshop, Corel PhotoPaint, and Macromedia Fireworks and Paint Shop Pro are just a few of the more popular Bitmap Editors. Common bitmap file extensions include: .jpg, .gif, .png, .tff, and .bmp.

What are some common Vector editors and file formats?
Adobe Illustrator, Corel DRAW!, Macromedia Freehand, and Macromedia Flash are the predominate editors on the market. Common universal file formats include .eps and .wmf and .svg. Unlike Bitmap graphics, it is far more likely to see Vector files delivered in formats unique to the programs which created them. Some popular program specific extensions include .ai (Adobe Illustrator), .cdr (Corel Draw), and .fla/.swf (Macromedia Flash).

If a Bitmap graphic is opened with, pasted into or saved in a Vector editor, does it automatically become Vector?
No. Once a Bitmap graphic, always a Bitmap graphic. Although most Vector applications are able to display Bitmap images as embedded objects (and many applications even include a limited set of tools to manipulate them) their inherant format does not change. The only way to convert a Bitmap image to a Vector image is to trace the image using either a manual process or automatic program. The tracing proccess attempts to duplicate the shapes of a Bitmap image using Vector lines and curves. When Vector graphics are pasted or imported into Bitmap editors, however, the opposite is true. The editor converts the vector image to Bitmap as soon as it is brought in. Once a Vector image is converted to Bitmap, there is no way to return to the original state. For this reason, Designers keep copies of the original vector artwork when converting an image to a bitmap file format.