Representation of ImagesYou need to know:

(k) explain the representation of an image as a series of pixels represented in binary

(l) explain the need for metadata to be included in the file such as height, width and colourdepth

(m) discuss the effect of colour depth and resolution on the size of an image file.

N Martin Jan 2011

Representing pictures in binary

• Bitmap imagesThe page is divided into an

invisible grid and each pixel is assigned a colour

Draw a circleradius: 6 pixelscentre: 10, 10line thickness: 1 pixel

• Vector imagesDrawn by following a set of mathematical instructions

Bitmap imagesCertain information must be defined for the bitmap image, this is called METADATA (or data about data)

Size of grid

Width: 20 pixelsHeight: 20 pixels

Bitmap imagesResolution depth

How many pixels will there be per unit of length

10 pixels per inch 72 pixels per inch

The greater the resolution depth:•The sharper the image•The more data needs to be stored and the larger the file size on disk

Bitmap imagesColour depth

How many bits will be used to store the colour for each pixel in the grid1 bit allows 2 different values 2 different colours

2 bit allows 4 different values 4 different colours

3 bit allows 8 different values 8 different colours

... ...

8 bit allows 256 different values 256 different colours

24 bit allows 16,777,216 different values 6,777,216 different colours

The greater the colour depth:•The more realistic colours•The more data needs to be stored and the larger the file size on disk

L- Meta DataWhen an application such as a web browser or word processor wants to open a picture, it needs to know more than the information held about each pixel. For example, it needs to know:• the height and width of the

image• how many pixels there should be

in a square inch (the resolution)• how many bits are being used to

define the colour of each pixel (colour depth).

Meta Data

The application needs to know this information so that it can display the picture properly. In addition, however, there may be other information held as part of the image file, other metadata. These might include:

– who owns the copyright to the image so that someone knows who to contact if they want to use the image

– when the image was created so that a user can see if the image is up-to-date

– keywords (tags) so that the image can be easily searched for on the Internet

– what software was used to create the image so someone can try the software for themselves if they were impressed with the image.

Bitmap Images

Bitmap Images

Bitmap Images

Indexed ColourA colour palette is stored inside the image file as part of the meta data.

AdvantagesIndexed colour saves a lot of memory, storage space, and transmission time

DisadvantagesHas a limited set of simultaneous colours per image, ok for 4 or 16 colour palettes but not for real life images.

Direct ColourEvery colour can be made up from the correct mix of RED, GREEN and BLUE

Direct ColourBy mixing the appropriate amount from each of the three colour channels you can get a variety of colours

R G B α FF FF FF 00 00 00 00 00 00 00 FF 00 80 00 96 00 96 00 80 00 00 FF 00 00 FF FF 00 00 80 80 00 00 FF 00 00 00

There is a 4th channel, called the alpha channel which handles transparency

What gets stored for each pixel is just a combination of each channelEg FFFFFF00 means the pixel is white96008000 means the pixel is lilac

8 bit gives 256 coloursReal life colour needs 15 or 16 bits24-bit or “truecolor “gives over 16.7 million colours