1.1.

2 Images
Images can be broadly categorized as one of two types i.e. bitmap or vector

Bitmap Images
Bitmap also known as raster images are “digital photographs”, they are the most common form
used to represent natural images and other forms of graphics that are rich in detail. Common
bitmap image file types include JPEG, GIF and PNG.

Before we learn how bitmap images are stored, let us first learn some terms
Pixel: (Picture Element). It is the smallest item of information in an image. It is often represented
visually using dots or squares.

Image Resolution: tells us how many pixels an image contains per unit measurement
(inch/cm). The more pixels used to produce an image the more clearer the image can be i.e. the
higher the resolution, the more pixels are used and therefore the clarity of the picture is higher.

Screen resolution: this tell us how many pixels the screen can display horizontally and
vertically. For example an image with a resolution of 800 by 600 pixels (800 x 600) would have
800 pixels in each row and 600 of these rows

Colour Depth: The number of bits used to represent the colour of a single pixel

Bitmap images are organised as a grid of pixels (short for 'picture elements'). The term bitmap
comes from the concept that the bit pattern which makes up the file are mapped to an area in
the main memory.

Each colour of an image is stored as a binary number. You need a binary value for each
different colour. Each pixel will be a particular colour. Each pixel's colour will be represented as
a binary pattern. The contents of the bitmap file will be this sequence of binary colour codes.

In the black-and-white image on the side, each pixel is either black

or white. As each pixel is either black or white, this image can be
encoded with a value of 0 for white and 1 for black (or vice-versa
depending on the encoding
protocol). Note that a black and white image is not grey scale.

This image could be represented by the following 35 bits (5 bytes):

00100 01010 01010 10001 11111 10001 00000

It would also be necessary to store the dimensions of the image.

If the image were in colour, using a colour palette of 256 possible
shades, each pixel would need to translate to a value between 0
and 255 (8 bits). Thus we would need 35 bytes to store the image.

1
It is common for colours to be recorded by quantity of Red, Green and Blue (RGB) and this is
stored using 3 bytes per pixel – so we would need 105 bytes to store the image. It seems pretty
obvious that the higher the colour depth, the closer the picture will look to reality. Why then don't
we just ramp up the colour depth on every image that we make? The answer should be obvious,
for a fixed resolution, the higher the colour depth, the larger the file size.
Bitmap images can be encoded in several ways
Bitmap Pixel Explanation
encoding representation
Monochrome 1 bit Only two colours needed (Black and white).
One byte can store eight pixels.
16 colour 4 bits Each byte can store two pixels.
256 colour 8 bits (1 byte) Each byte can store one pixel.
24-bit colour 24 bits (3 bytes) The number of different colours possible is
224 (16,777,216).
.

When zooming in or enlarging a bitmap image, the pixels are stretched and made into larger
blocks. This is called the staircase effect. This is why bitmap images appear as poor quality
when enlarged too much.

Bitmaps also have the drawback that they have a larger file size.

Exercise 1
a) What is the resolution of a 30 pixel by 40 pixel image?

b) If I have an image resolution of 700 pixels, and the height is 35, what is the width of the
image?

c) What is a benefit of having a higher resolution image?

d) What might be a drawback of having a very high resolution image

Estimating file size of bitmapped image of different resolutions

The formula is:

File size = horizontal pixels × vertical pixels × bit depth

8(to convert to bytes) × 1024 (kilobytes)

Metadata - This is a fancy term for 'data about data'. In other words metadata describes the
structure of the data file. Meta data is usually located right at the start of the file.

When a media player opens the file it looks for the metadata which describes the format of the
file e.g. the file type, how many horizontal pixels are there, how many vertical pixels and the
colour depth of the file. Armed with this information the media player reads the file and correctly
displays the image.

A/L 2020 – Unit 1.1.2 2

Bitmap File structure
Each bitmap file contains:
A bitmap-file header,
a color table, and
an array of bytes that defines the bitmap bits.

The bitmap-file header contains information about the file type, and file size; it also specifies the
dimensions, the resolution, the compression type (if any), and color format for the bitmap.

The color table contains as many elements as there are colors in the bitmap.

The clarity with which a bitmap image is viewed on a monitor screen will depend on two factors:
 Resolution of the image. A small image made up from a large number of pixels will
produce a sharper display.
 Screen resolution - the number of pixels which can be viewed horizontally and vertically
on the screen.

EXERCISE 2
1) For a colour depth of 8 bits, how many colours could each pixel store?

2) To represent 1024 colours per pixel, what colour depth would I need?

3) For an image of 30 by 40 pixels, what would the file sizes be for the following colour depths:
4 bits

4) How many colours can each pixel store if it has a colour depth of 4bits?

5) How many bits does the colour depth have to be if we want to store 64 colours per pixel?

6) How many bits would an image be that has a size of 20 by 30 pixels, with each pixel able to
display 8 colours?

7) When might one want to decrease the colour depth for an image?

Vector Graphics
A vector image uses drawing objects (scalable shapes) such as straight lines and curves,
using coordinates and geometry to precisely define the parts of the image. It is more efficient
than bitmaps at storing large areas of the same colour because it does not need to store every
pixel as a bitmap does.
Vector graphics can be scaled without losing resolution. They can be enlarged or reduced in
size - but the file size will stay almost exactly the same.

One of the most common vector file formats is scalable vector graphics (SVG).

Vector graphics are made up of objects and their properties. An (drawing) object is a
mathematical or geometrically defined construct such as a rectangle, line or circle
A/L 2020 – Unit 1.1.2 3
<rect ... />
<line ... />
<circle ... />
Each of these objects has properties to tell you the size, colour, position etc.

Drawing list - a set of commands used to define a vector image

Take a look at the next example to see how drawing lists are built from objects and properties.

Rectangle Circle Combination

Image

<rect
width="100"
height="80"
x="0" y="70"
fill="green" />
<rect x="14" y="23" <line
<circle cx="100"
width="250" x1="5" y1="5"
cy="100" r="50"
Drawing height="50" x2="250" y2="95"
fill="red"
fill="green" stroke="red" />
List stroke="black" stroke-
stroke="black" stroke- <circle
width="3" />
width="1" /> cx="90" cy="80"
r="50"
fill="blue" />
<text x="180" y="60">
Un texte
</text>

Note that the circle is on top,

this is because it was drawn
Note that the centre co- last.
x and y give the top left start ordinate is defined through To leave out an edge stroke
Notes location cx and cy don't put the stroke
r gives the radius command in.
The line has start x1,y1 and
end x2,y2 coordinates.

A/L 2020 – Unit 1.1.2 4

Exercise 3

1. What is a drawing list

2. Give some objects that can be used in

vector graphics:

3. Give the properties needed to display a

rectangle:

4. Give the properties needed to display a

line:

5. Give the definition of a vector image:

6. Write a drawing list to create the following

image on the side:

7. What would the following drawing list produce:

<line
x1="0" y1="0"
x2="6" y2="6"
stroke="red" />
<rect
width="4" height="4"
x="1" y="1"
fill="yellow"
stroke="green"
stroke-width=1 />
<line
x1="6" y1="0"
x2="0" y2="6"
stroke="black" />

8. In the above code, name the objects involved

 In the above code, list 4 different properties

Applications of bitmapped and vector graphics

Bitmapped graphics are used to:
 Capture scanned images from a paper document
 Scan a photograph

Vector graphics are used for:

 General line-drawing diagrams
 Diagrams for specialist applications, such as flowcharting, object-oriented class diagrams,
network topologies and any application where there is a specialist shapes library available

A/L 2020 – Unit 1.1.2 5

Comparison of Bitmap and Vector Images
Bitmap Images Vector Images
Made up from pixels Made up from line equations and
calculations
Bitmap images scale resulting in file Vector images scale without file size
size increase / decrease increase / decrease
Bitmap images distort (pixelate) when Vector images scale without distortion
scaling to the image
Bitmaps are better for photo editing Not suitable for a photograph that has
many details
Bitmaps require less processing power Uses more processing power than
to display bitmaps.

Exercise 4
1. You wish to create an image that will be made into a giant banner for the side of a building.
What type should you use and why?

2. You wish to create an image that will be used in a game, that will run on a mobile phone and
a home console. What type should you use and why?

3. You want to take an image of a local cat stuck in a tree. What type should you use and why?

A/L 2020 – Unit 1.1.2 6