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:
An image that is 32 pixels by 32 pixels has ‘a map of bits’ that looks like this:
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.
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:
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.
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.
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.