If there were only three design concepts that I hope to pass on to my clients in this lifetime, they would be: “What’s the difference between vector and bitmap images,” “Negative space is a good thing,” and “What is a brand and why do I need one?” I’ll have to tackle the negative space and brand necessity topics in future posts. There are essentially two types of graphic formats in the world: bitmap (or raster) and vector. Today, I would like to attempt to debunk, once and for all, the difference between vector and bitmap images and when to use each is the most appropriate. This question gets continually asked by my clients so I thought I would take a crack at unveiling the mystery. Trust me, this is a subject that you should care about. Here goes…
Let’s start with bitmap graphics, shall we? What does the word “bitmap” mean? The word bitmap (also referred to as “raster”), literally means a collection of “bits” organized into a pattern, that create a composite image, such as a photograph. Think of a bitmap as a group of many, multi-colored, square tiles that, when strategically combined and overlapped, create a detailed image when looked at from a zoomed out perspective. Generally speaking, photographs and images that are scanned are in bitmap or rasterized format. These images can easily be reduced in size, but seldom enlarged without loss of image quality (resolution, or pixels per inch, or PPI.) Bitmap images certainly play a very important role in the graphics and media world. They care the building blocks of digital photographs, video and web sites. Bitmap images also make beautiful backgrounds for advertising layouts, magazine covers, brochures and packaging designs as well as stunning graphics for placement in video productions and media presentations such as PowerPoint or Keynote. Adobe PhotoShop is the most prominently used software application for creating, editing and manipulating bitmap (or raster) graphics for a variety of industry (and household) uses. My motto in the design industry (and in my life in general) is “right tool for the right job.” There are times when use of a bitmap image is the right tool for the job. Other times, a vector graphic is an even better tool.
For example, many times in my career, clients have submitted their logo files in some form of a bitmapped (or rasterized) format (a PSD, TIFF, JPG, PNG, GIF, etc.) In most cases, the logo file was saved in high resolution (300 pixels per inch, or above which is suitable for offset printing.) The drawback? First, when that client later asks me to design a banner or create a T-Shirt design for screen printing, I find myself at a loss. As I mentioned earlier, bitmap graphics are difficult to enlarge without degrading the image, which would make the process of laying out a banner or other large format piece a difficult task. Second, depending on whether or not the logo (or other graphic file) was saved in layers with a transparent background, such as a TIFF, PSD or PNG file (which is a rarity in my profession), then that bitmap graphic would have to be traced by hand and a “clipping mask” (an invisible outline that isolates the desired object from its’ background) applied, so that the white background (common in bitmap files) surrounding the logo or graphic would disappear, for placement on a photo or other background (such as in the case of a display advertisement, web site design, etc.) In short, bitmap graphics or both difficult to resize and maintain image quality and generally come with an annoying white background that we designers detest. Also, screen printers cannot work with bitmap or raster images. They must have the original vector artwork to create their screens from. Bitmap programs such as PhotoShop, also have a very difficult time rendering type in a crisp, sharp manner, the way that vector does. That is why display ads or web sites that were created entirely in applications such as Adobe PhotoShop, generally show type that is “jaggy.” Very tacky, indeed. The most effective way to ensure type quality when using a bitmap image is to place vector type on top of your pixelated image. Vector type is very crisp and helps to increase legibility. The cool news is that you can drop as many vector graphics into PhotoShop as you like, NOT rasterize them and maintain their individual integrity (logos, graphics, buttons, type, illustrations, etc.)
This is why identity logos should NEVER be designed in bitmap applications such as PhotoShop. PhotoShop is not the right tool for the job of designing a logo. The genesis of every logo should be in vector format (I’ll get to why shortly). There should always be a scalable, vector version of every logo, or critical piece of artwork intended for long term use, primarily, but not limited to, for the purpose of scaling and limitless high quality production in your marketing future.
Which brings me to the subject of my personal friend, the vector. “What the hector is a vector,” you ask? Vector images are made up of many, individual, scalable objects that are defined by mathematical equations, rather than pixels. Huh? Say that again? Let me put it another way. A vector graphic, usually created in an application such as Adobe Illustrator, is a line-based combination of shapes, curves and often type (which is mostly created in vector format as well), without a pixel in sight (tile-free). These magical graphics can be easily scaled as large or small as needed (I once enlarged some vector artwork I created for the design of a 30′ x 20″ banner to hang on the side of a large city building and the results were razor sharp), without losing any detail or resolution whatsoever. Go ahead, zoom into a vector graphic as close as you like. Unlike our former bitmap buddy, you’ll notice that the edge of that graphic is still as crisp and sharp as it was before you resized it, even after changing it’s color and adding a few effects in Illustrator. Amazing! Unfortunately, when you attempt to enlarge a a bitmap image (or convert a vector image or type to bitmap format, also called “rasterizing), when zoomed in, you’ll notice that the edge of your newly pixelated graphic now has small, “jaggy” tiles all around the edges. That’s fine when your bitmap graphic is high resolution and not intended to be used in a large format layout, but once an image is converted to bitmap format, there is no turning back. You are now stuck with whatever resolution you saved that graphic as in PhotoShop, or other comparable bitmap software. Conversely, when saved as a vector file out of an application such as Illustrator (generally in EPS, native AI and believe it or not, even Illustrator’s awesome PDF format because it is still editable), the sky is the limit! You can return to that vector file whenever you like, redraw it, recolor it, resize it…whatever your heart desires!
By the way, vector graphics can be easily converted to bitmap (or raster) images. No sweat! The reverse, however, is not necessarily the case. Bitmap images cannot always be easily converted to vector graphics. Sure, there are tracing methods and tools built into Adobe Illustrator to attempt to create a vector rendering from a pixelated (rasterized/bitmapped) image, but I find these results to be unpredictable and extremely time consuming at best.
Okay, I must admit that there is a downside to vectors. Vector images are, unfortunately, unsuitable for the production of photo-realistic images. The bottom line is that vector graphics generally look like illustrations. There are, however, many, brilliant vector artists in the world, who have made their mark creating extremely detailed illustrations in vector format that look photographs (check out http://creativeoverflow.net/30-realistic-vector-illustrations/ for a few examples). This type of art is truly amazing, especially considering the amount of time required to produce such an illustration. At a certain point, wouldn’t have been just as effective to simply use a photograph instead? I suppose the thrill was in the challenge of making one medium look like another. Hats off!
In any case, stick to vectors for your logo artwork and other critical marketing graphics, whenever possible. Feel free to save as many rasterized versions of your branding graphics, sized to a specific resolution as you like for web use, email signatures, slide shows, etc., but please, always save a vector version of your logo art somewhere in your archives. This will serve you well in the future, especially for identity design updates and large format reproduction. Vector graphics ultimately give the designer more control, while bitmap graphics are plagued with production limitations. Comparing bitmap graphics to vector graphics is like comparing a painting to a wood carving. In short, I can do anything with a vector, but very little with a rasterized graphic, unless, of course, it is a photograph.
I hope this article has helped at least in some way, to minimize some confusion about these opposing and otherwise cryptic, graphic formats. If not, feel free to email me with questions and I do my best to answer them in future posts.