Bitmaps and Vectors:
An Easy Guide to Graphics Formats for Design and Print

There exist two basic types of graphic format for print and the web: bitmap and vector.

1. Bitmaps

What is a bitmap?

A bitmap is essentially a big mosaic of squares of uniform size with each individual square only having one colour (each tiny square being the smallest divisible part of the "mosaic").

Imagine a big mosaic of a sunflower on the floor of a well-lit atrium which you are viewing from 100 feet up at the top of a gallery. There is a spiral staircase winding around the atrium descending to the floor. The lower down you get, the less flower-like and more blocky it becomes, until you step off the last stair, you are standing right on the mosaic and when you bend down and you can see the individual colour blocks and touch the grouting between them, you pretty much lose the illusion of the flower. That’s the essence of a bitmap — at a certain magnification, it will always resemble a jumble of blocks.

Analysis of a bitmap image A bitmap image: note enlargement on left showing detail of the pixels which make up the illusion of continuous tone

The same thing happens with bitmaps: the closer in you get, the more pixellated an image becomes. The important thing is to optimise the resolution for the end result (output) so the pixels aren’t obvious. Look at the picture of the castle above; to show the individual "bits" or "pixels" in the bitmap, part of this image has been scaled up to make the pixels obvious. The word pixel means "picture element" - each of these pixels is one discrete block of a single colour.

The way a computer interprets a bitmap is as a predetermined assembly of "bits" of information in a "map" i.e. a two-dimensional block, or matrix, of data. It is assembled in two dimensions according to a given size and the "bits" or "pixels" are arranged in rows according to X and Y co-ordinates. The "bits" form clusters of tangible data which are recorded as bytes and each of these has a value which denotes its colour (typically from a palette of 16.7 million (24-bit) but this may be from a palette as low as 2 bits (in the case of line art where an artwork is composed only from either pure white (off) or solid black (on)) or it may be from various shades of grey, typically from an 8-bit palette comprising 256 graduated tints of black.

What are bitmaps used for?

For print, photographic material and illustrations (where these have been scanned or composed in a popular graphics application such as Photoshop). Some printers still refer to bitmaps as contones (an abbreviation of "continuous tone").

For the web, virtually all graphics are bitmaps — the exception being Flash movies (which may however contain bitmaps embedded in them).

What are the different bitmap formats?

TIFF (Tagged Image File Format) is perhaps the most widely used for print, while JPEG (Joint Photographers Engineering Group) is the most widely used for digital photography and for storing and distributing picture material because of its ability to create highly compressed files without losing too much of the original detail. JPEG is also supported by HTML standards for displaying material on the web via a web browser. GIF (Graphical Interchange Format) is not suitable for print but is a widely used web format despite being restricted to a palette of 256 colours — however, its small file size, flexibility and animation features make it a highly desirable format for web graphics (e.g. buttons, adverts). There are quite a few other bitmap formats (PCX, AIFF, CT, PNG, TARGA and others) but most of these are either obscure or obsolete or simply irrelevant to those not engaged in a particular specialised activity e.g. digital asset management or high end reprographics which may make use of them). PNG is another popular format, but is only intended for web graphics.

So why are bitmaps (JPEG or GIF) unsuitable for company logos for designers to use for high quality printed output?

1. Scaleability: there is a limit to how big you can enlarge a bitmap before the "bits" become visible, and the logo will look pixellated.
Colour matching: unless it is a completely black and white logo, corporate logo colours will be distorted by using a bitmap because the colours are embedded in the "picture" (which may be in the wrong colourspace for the intended output device, and also may have had colour profiling applied) and therefore can not be properly re-interpreted for output: for this reason, an orange bitmap logo could easily come out brown or perhaps pale yellow, or a blue bitmap logo turn greeny-grey.
2. Overprinting and knock-out: it is not easy to "knock out" a bitmap when placing it on a background - this is where you put the logo on top of a blue sky (for example) and you see bits of sky around and inside the letters of the logo. So if your company logo needs to overlay a picture or other non-white background, in bitmap form it is virtually impossible to achieve a clean result without a lot of very time consuming and painstaking work, and even then, the results will never be as good as with a vector graphic.
3. Finally, image size: a high-res bitmap can typically be several Mb (megabytes) in size, while a vector graphic logo will usually be a very small file, perhaps 100Kb (kilobytes) or less.

Which now takes us on to...

2. Vector graphics

What is a vector graphic?

Vector graphics contain elements defined by maths, saved in the form of a "script", or set of instructions. For an EPS (meaning Encapsulated PostScript) file, the script is composed in a language called PostScript. The interpretation and rasterization of the PostScript file is done through a process called "ripping" - a contraction of "Raster Image Processing". Usually, EPS files will have a "preview" graphic embedded in them in the form of a low resolution bitmap which is so the EPS file can be placed in a layout and the designer can see what they are placing.

How does the computer turn the "script" into a logo, logotype or graphic?

Reproducing a vector graphic is analogous to giving someone a tape measure, a pot of paint and brush and a piece of paper containing simple written instructions to paint out a tennis court: start at point X, proceed to point Y, turn through 90 degrees and paint on to point Z and so on. Assuming the instructions were correctly followed, the tennis court would always look the same wherever it was painted. A computer does the same when it "reads" something in a vector graphic format: the mathematical definition of the graphic will inform the computer what to show and what colour(s) to apply where; it's simple, pure, accurate to infinity, editable and scaleable. If you have never worked with vector graphics before, take a look at the picture of Rameses below: on the left, you can see the pathways that make up the irregular shapes which, when filled with colour, create the impression of depth and the pharaoh's features. The dots you see function a little like a "join the dot" children's game - you can add, join, remove and otherwise manipulate the dots and their "handles" to create curves and shapes, and these points are individually referred to as bezier points.

Analysis of a vector image A vector image: note the "handles" (dots) on the curved lines (bezier curves) on the left, compared to the preview of the image on the right as it would appear when printed. The "dots" show the points on the lines which define the shapes of the curves, and these can be edited using the appropriate software (usually Adobe Illustrator).

The beauty of vector graphics is that this approach (and therefore the graphic) is infinitely scaleable from a simple set of instructions. This means that if you wanted to create a tennis court sized for mice, assuming that you could find a mouse able to follow your instructions and paint the court, you would issue the same instructions but on the basis of scaling down to say 10% of a standard court size. The mouse would use a tenth of all the measurements and paint out a perfect scaled down 10:1 copy of a human size tennis court. Similarly, if a group of elephants wanted to play doubles tennis, they might want to scale things up a little. Say, enlarge by a factor of x2.5 (250%). Again, no problem: the same instructions can be used, provided the elephant doing the painting multiplied all measurements by 2.5 with his pocket calculator, they would end up with a perfectly proportioned court, only considerably bigger. The same approach could be applied to the manufacture of the net, ball and raquets provided the instructions were all scaled to the same magnification (or reduction). This is the beauty of vector graphics.

How are vector graphics used?

What a computer is doing when it receives a vector graphics file is interpreting the file according to its best method. Files defined by vectors contain lists of commands which describe the contents. Positions, lengths, thicknesses of lines, colours, and so forth are all defined and given co-ordinates relative to each other and these measurements are stored at the size at which they have been created. However this sizing is arbitrary and does not preclude their reproduction at any other size: they can simply be scaled, and as this scaling is always done by maths, there is no drop-off in quality as the graphic is enlarged.

The most popular format for vector graphics is Encapsulated PostScript (EPS). PostScript is a page description language invented by Adobe in the 1980s. Apple latched on to it to use it as a standard for the Macintosh and this move cemented its adoption as the cornerstone of electronic publishing. Today the PostScript standard dominates the market and provides the underpinnings for the ubiquitous PDF (Adobe’s visionary Portable Document Format). PostScript is robust and versatile (but not infallible because with any interpretative description language which causes content to be rendered on the fly there will always be the possibility of differences in interpretation). All leading graphics applications are able to save files in EPS format. Adobe Illustrator, Freehand and CorelDraw are perhaps the most widely used.

What are vector graphics used for?

1. Logos: company logos are almost invariably supplied as EPSs when distributed by corporate identity departments or with company guidelines. Printers, signmakers and others will demand EPSs in order to achieve optimum quality, colour matching and reliable, repeatable output results.
2. Maps: high quality cartography will usually be originated in a vector form.
3. Illustrations: where these have been created using vector graphics software (e.g. Illustrator)
4. Technical drawings: graphics, plans, CADCAM schemes and architectural renderings.
5. Typography: the letterforms which make up a typeface (whether PostScript or Truetype) are described using vectors.
6. PDFs: Adobe's Portable Document Format (also known as Acrobat) is basically a kind of "display PostScript" which means that it interprets PostScript data and renders it (i.e. turns it into a 2D image for the screen) so it can be viewed using the Acrobat Reader software. Although PDFs will often contain bitmaps embedded in them, they will keep "vectored" any original vector data and therefore will reliably maintain the integrity of vector images.

3. Bitmap and Vector FAQs

Our printers said they needed an EPS verson of a logo we have been using, so I asked our graphics person to make an EPS file of a logo I had on my PC from a Powerpoint presentation. When I sent this on to the studio at the printers, they said it was no good, as it was an "embedded bitmap EPS" and not a proper vector graphic EPS. What does this mean?

What has happened in this instance is that someone has taken a bitmap file, i.e. a picture or graphic composed of pixels (see above), and "encapsulated" or embedded it in an EPS "wrapper". When this is done, the entire graphic block of the bitmap is incorporated into the EPS as a discrete and uneditable item — this is a bit like putting a car with all the doors locked into a big van. Just because it’s in the van doesn’t mean the doors are any less locked or that you can suddenly materialise inside it and start the engine! Because the EPS format is flexible and versatile, it is able to include bitmaps (in the form of TIFF, PICT, JPEG and other common formats) in conjunction with real vector information. This is very useful for doing "cut-outs" and letterng overlays and other creative special effects, but unfortunately saving a bitmap as an embedded EPS does not magically turn it into a vector EPS and nor does it make it editable or in any way more useful than the original bitmap version of the graphic. Sadly a great deal of time and energy is wasted as a result of failings in understanding of this, and it is a good idea for everyone to be at least a little clued up on this area to avoid wasting their time and energy.

I tried to open EPS files and either they didn’t open or I just got a small blocky, rough-looking preview picture. Why?

If you receive an EPS file and you are unable to use it or open it this is because the file needs specialist graphics software such as Illustrator or CorelDraw to be opened and viewed properly or edited. You may be able to see a "preview" as sometimes EPS files have a bitmap embedded in them as a header preview in order to help the person preparing a layout place the graphic on the page in their page layout software. However these bitmap previews do not reproduce well. If you need to use an EPS with typical office software packages or on the web, it is best to ask for the EPS to be converted into a JPEG, TIFF or GIF file if you need to use it in software that cannot interpret the EPS vector information properly. Adobe Photoshop is widely considered the best way to accomplish this conversion.

But we've been given JPEGs and GIFs to use with Word and Powerpoint - why?

Popular Microsoft applications are unable to interpret vector graphics properly, as these applications are not used to make plates for printing or to prepare professional signage, advertising and graphic design studio work. So for Office purposes, bitmaps are simpler and less potentially troublesome and are therefore the best formats to use. As these packages tend to be used fairly consistently in office environments, the output can be relatively predictable and easily rolled out across a network. For in-house tasks and presentations, bitmaps provide the best compatibility and flexibility because specialist software is not needed to create or edit them.