Digital Images are represented by manipulating this…

And this…

.

Meaning…

Off

And…

.

On

Or rather ..

0 zero

And

1 One

(In fact this is true for everything we see in a computer system!)

1 Bit ImagesUse 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 SizeImage width 800 pixelsImage height 600 pixels

1 pixel = 1 bit, so image is 800 * 600 bits which is

480000 bitsor divided by 8! (8 bits in a byte)

gives us60,000 bytes

Make the grid larger and pixels smaller…

Here we have increased the image resolution by using more dots per inch (dpi)Increasing dpi means we are cramming in more dots per area of image.

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 ImagesRepresenting shades of grey…

Now 1 pixel = 8 bits

200 & Fifty 6 Shades of Grey

File Size Calculations800 x 600 8 bit image = 480,000 bytes

800 x 600 = 480,000 pixels1 pixel = 1 byte thus 480,000 bytes

8 x larger than 1 bit system

File Size Calculations800 x 600 24bit colour = 1,440,000 bytes

800 x 600 = 480,000 pixels1 pixel = 3 bytes thus 1,440,000 bytes

24 x larger than our first image

(24 bit colour formats – JPEG, BMP)

24 Bit ColourFiles 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

Pixel Red Green Blue

1

RGB(0,0,255)

0 (1 byte)

0 (1 byte)

255 (1 byte)

2

RGB(0,0,255)

0 (1 byte)

0 (1 byte)

255 (1 byte)

3

RGB(0,0,255)

0 (1 byte)

0 (1 byte)

255 (1 byte)

4

RGB(0,0,255)

0 (1 byte)

0 (1 byte)

255 (1 byte)

No of bytes = 12

Draw four blue dotsRGB Example

Pixel Lookup table entry

1 1 (1 byte)

2 1 (1 byte)

3 1 (1 byte)

4 1 (1 byte)

Table Entry Red Green Blue

1

RGB(0,0,255)

0 (1 byte) 0 (1 byte) 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

Lookup Table

Using a Lookup Table

Pixel Lookup table entry

1 1 (1 byte)

2 1 (1 byte)

3 1 (1 byte)

4 1 (1 byte)

5 2 (1 byte)

Table Entry Red Green Blue

1

RGB(0,0,255)

0 (1 byte) 0 (1 byte) 255 (1 byte)

2

RGB(255,0,0)

255 (1 byte) 0 (1 byte) 0(1 byte)

Lookup Table

Only Record Unique Pixel Data

Graphic Formats• We will now look at a few common file

formats• BMP• GIF• JPG• PNG

The Windows BMP FormatOK for Windows based systems

Not web friendly Not good for MAC / UNIX / Mobile Devices 

Graphics Interchange Format (GIF)Pronounce “giff” or “jiff” is a very popular

format on the Web

This format was originally devised by CompuServe

GIFF and Colour• Limited to 256 colours, so conversion from 16

million colours to the 256 colour GIF format will result in loss of colour resolution

• Makes use of a colour lookup table to store the colour information

 • It only stores the colours that are in the

image

Dithering and GIFsUsed to fool the human eye that there is more detail than

there really is!

A The original unchanged imageB 1 bit monochrome with ditheringC 1 bit monochrome without dithering – note the

loss of detailD 8 bit colour with dithering – note the speckled effect

which is common to this process

A B

C D

GIFF, Dithering and Banding

Without dithering a GIFF file tends to develop harsh transitions called banding.

Interlacing

• Images on the web normally drawn from top left to right down the image

• The GIFF format allows for a technique called interlacing which displays the image every eighth line at a time.

We get an idea of what the image looks like without downloading the whole file (useful for low bandwidth)

GIFF Transparency

Joint Photographic Experts Group JPEG / JPG• A compression standard best applied to

photographs or complex shading / lighting effects

• Stores a complete black and white version of the image and most of its colour information

 • Not all of the colour information is retained, this

makes JPEG a “lossy” format as some of the original image information is lost, especially in highly compressed files

When using graphics with large areas of similar colour the GIF format is a better choice.

Zoom in…

The GIF is 2K, the JPEG is 15K.

However in photographs the JPEG is better

PNG Format• Offers better compression than GIF – ranging from

10 – 30 % • Is a lossless format so whatever colour data in the

original will be present when viewed in the browser • Is not limited to 256 colours with full RGB

capabilities • Supports interlacing  • Supports transparent colours