How Images are Represented
 Bitmap images (Dots used to draw the image)
 Monochrome images


8 bit grey scale images
24 bit colour
 Colour lookup tables
 Vector Graphics (Line art)
 Rasterisation
 Two key concepts


Image resolution
Colour resolution

Digital Images are represented by manipulating this…

And this…
.

Meaning…
Off

And…
.
On

Or rather ..
 0
 And zero
 1 One
 (In fact this is true for everything we see in a computer system!)

1 Bit Images
 Use a single bit to represent each pixel (dot on the screen)
00101

Use more bits and display as a grid…
 The following image is 61 pixels wide by 57 pixels high.

Quick Calculation of File Size


Image width
Image height
800 pixels
600 pixels
1 pixel = 1 bit, so image is 800 * 600 bits which is
480000 bits or divided by 8! (8 bits in a byte) gives us
60,000 bytes

Make the grid larger and pixels smaller…
Here we have increased the image resolution by using more dots per inch (dpi)

 This image is 512 pixels wide by 512 high.
 This type of image may be referred to as a binary image since each pixel is stored as a single zero or one.
 This kind of picture is also called a 1 bit monochrome image since it has no colour content.

8 Bit Grey Scale Images
 Representing shades of grey…
Now 1 pixel = 8 bits

256 Shades of Grey

File Size Calculations
 800 x 600 8 bit image = 480,000 bytes
800 x 600 = 480,000 pixels
1 pixel = 1 byte thus 480,000 bytes
8 x larger than 1 bit system

Colour

RGB Colours (Red Green Blue)
This time a single pixel is made up of 3 bytes or 24 bits.

File Size Calculations
 800 x 600 24bit colour = 1,440,000 bytes
800 x 600 = 480,000 pixels
1 pixel = 3 bytes thus 1,440,000 bytes
24 x larger than our first image
(24 bit colour formats – JPEG, BMP)

24 Bit Colour
 Files getting larger
 We can now represent 16 million colours
 The human eye can only see 10 million of them
 Extra colours useful for image processing and special effects
 Colour resolution is the number of colours a single pixel may display

8 bit Colour Images and Look up Tables
Draw three blue dots
Pixel Red Green Blue
(1 byte) 0 (1 byte) 255 (1 byte) 1
RGB(0,0,255)
2
RGB(0,0,255)
3
RGB(0,0,255)
4
RGB(0,0,255)
0
0
0
0
(1 byte) 0
(1 byte) 0
(1 byte) 255 (1 byte)
(1 byte) 255 (1 byte)
(1 byte) 0 (1 byte)
No of bytes = 12
255 (1 byte)

Pixel
1
2
3
4
Lookup table entry
1
1
1
1
(1 byte)
(1 byte)
(1 byte)
(1 byte)
Lookup Table
Table Entry
1
RGB(0,0,255)
Red
0 (1 byte)
Green
0 (1 byte)
Blue
255 (1 byte)
Reducing the number of bytes in this example from 12 to 7.
The GIF and PNG formats uses a look up table.

Pixel
1
2
3
4
5
Lookup table entry
1
1
1
1
2
(1 byte)
(1 byte)
(1 byte)
(1 byte)
(1 byte)
Lookup Table
Table Entry Red
1 0 (1 byte)
RGB(0,0,255)
2 255 (1 byte)
RGB(255,0,0)
Green
0 (1 byte)
0 (1 byte)
Blue
255 (1 byte)
0(1 byte)

Vector Graphics
800
800
800 x 800 1 bit image = 80,000 bytes

Do we need store every pixel?

Vector Graphics
 (at least) 4 bytes rather than 80,000!

Vector Graphics – Advantages
 They tend to generate small file sizes.
 They resize much better than bitmap graphics.
 Flash uses vector graphics.

Screen capture of a Vector Image…

Zoom in on the eye

Zoom in on a Bitmap image…

Rasterisation
The process of converting a vector shape into a bitmap is called rasterisation.
Photoshop text and shapes are drawn as vector graphics

To Conclude
 Image resolution = the number of pixels that make up the grid of the image per inch (dpi)
 Colour resolution = the maximum number of bits dedicated to a single pixel
 Bitmap graphics = a grid of pixels
 Vector graphics = calculated and drawn – only needs sufficient data to describe the image
 Rasterisation = converting a vector graphic to a bitmap