Bitmap or Vector?

This is a quick attempt to explain an age-old quandary… it’s a question I’ve been asked a thousand times by clients and students, and even some designers who will of course remain nameless… but I’ve never found what I would call a ‘simple and relevant today’ published explanation, not in a book or online.

Please do comment if you know of such a resource because the teacher who spurred me on to write the following is also struggling to find ‘simple and relevant today’ resources for his GCSE students.

Some background details: In 1997 I started working commercially as a designer for print and web, from the young age of thirteen I dabbled with really basic image-editing software such as Microsoft Paint, and at college I cut my teeth on Adobe Photoshop (then version 3.5) – I came to understand digital imaging in the context of ‘bitmaps and pixels’ and ‘vectors and bézier curves’.

 

Bitmap imagery explained:

File-types such as BMP, JPG, GIF, PIC, PNG and TIF (to name some of the most common) are built on the concept of bitmap imaging. A bitmap is quite literally ‘a map of bits’ that forms an image. The ‘bits’ in question are generally referred to as ‘pixels’.

An image that is 10 pixels by 10 pixels has ‘a map of bits’ that looks like this:

10x10grid

An image that is 32 pixels by 32 pixels has ‘a map of bits’ that looks like this:

32x32grid

Image-editing software (also referred to as photo-manipulation software) such as Adobe Photoshop allows the creation of imagery through colouring each individual ‘bit’ of the map. The ‘magnified’ example below demonstrates how a bitmap image is made up of individually coloured pixels.

pixelzoom

Bitmap images are not only created in software packages such as Adobe Photoshop, they also form the basis of digital camera photography, digital video and television; and they even form the basis of the media captured on the latest mobile phone handsets.

The greater the number of ‘pixels’ within a Bitmap, the greater its ability to contain detail; and the higher its ‘resolution’.

It is extremely important to note that neither the number of pixels within an image, nor its resolution, define its physical size (cm).

Digital displays such as computer monitors and televisions offer various resolutions and formats. A 30cm high Digital TV using ‘480 Format’ can display 704 pixels wide x 480 pixels high, where as a 30cm high Digital TV using ‘720 Format’ can display 1280 pixels wide x 720 pixels high. This means that if the same Bitmap image (480 pixels x 480 pixels) is broadcast to both displays, it will appear at different physical sizes (cm) on both, as the diagram below highlights:

screensize

As shown in the top example, if a Bitmap is enlarged, its ‘bits/pixels’ enlarge and the image that once appeared detailed and smooth (when small) now appears to ‘pixelate’ and reduce in visible quality.

 

Vector imagery explained:

Unlike Bitmap’s, Vector images do not lose their quality when scaled in size.

Vector images are ideal for logo design and large-scale graphics because no matter what their size (big or small) they always appear smooth and sharp.

Software such as Adobe Illustrator enables the creation and manipulation of vector imagery and illustration (perfectly scalable for print output); and software such as Adobe Flash provides vector based tools for animation and online interaction (perfectly scalable for any size screen or display output).

File-types such as Generic EPS (now commonly called an Illustrator EPS), SVG and DXF are all vector based formats.

Vector graphics are created using mathematics rather than pixels.

Vector shapes are drawn by plotting ‘anchor’ points. Each point is given a coordinate ‘location’ on the page (or artboard); mathematics then enables a computer to perfectly plot a smooth path between each ‘anchor’ point. Each point on a path can be given Bézier handles to control the direction and curvature of the connecting paths.

vectorcurves

Because a vector image is based on mathematical coordinates it can be scaled (smaller and larger) without loss or quality or definition.

The example below shows the visible difference between Bitmap (left) and Vector (right) when scaled.

difference

 
—–

This Vector Tool Exercise published by the amazing team at Tutorial Plus may be of further interest to you if you’d like to learn more about bézier curves, simply follow the guides to create precise paths, using the hints and shortcuts covered in the article. The key tip is to be sparing with your use of anchor points, the fewer the points, the neater path.

 

3 Comments

David

about 8 years ago

Great explanation of the theory. Amazing how many pros in the industry who still don't understand the difference. How many logos do we see generated in Photoshop? ...A fantastic B/W design springs immediately to mind! ;o) Would be great to expand on this and talk about the relationship between the two formats, specifically where and how it is appropriate to bring them together. I'm thinking of the common mistake of 100% black vector boxes butted up against the rich black edge of an image... with an obvious colour difference. Top stuff Carl, keep em coming.

Alan Offord

about 8 years ago

Excellent concise explanation of the key differences, I remember the first time I realized the scalable power of vectors, it was a heck of a revelation for creating logos. However, as photography will (probably) never be reproduced as vector art, it's important to know how to use both vector and bitmap imagery together. I don't see at as a competition, although if vector and bitmap had a fight, vector would kick arse, rather that both have a fundamental role to play as the basic building blocks of computer-aided design.

Ben Breckler

about 8 years ago

Hi Carl, Very interesting tutorial. I think it explains the difference between bitmap and vector very well! I like the digital TV explanation, it seem like a lot of people are still struggling with the concept of HDTV or HD content in any format. Resolution is important in any kind of medium print or screen. In my opinion vector content wins without a doubt. As a designer I use vector programs like Adobe Illustrator as much as possible, because i could enlarge my designs to project them onto the surface of the moon (in Ultra HD), and still have a crisp image! With vector you are always on the save side... like you said "it can be scaled (smaller and larger) without loss or quality or definition." Awesome, I ♥ Vectors!

Leave a Comment