2. 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

3. Digital Images are represented by manipulating this…

4. And this….

5. Meaning… Off

6. And…. On

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

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

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

10. Quick Calculation of File Size Image width 800 pixels Image height 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

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

12. 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.

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

14. 256 Shades of Grey

15. 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

16. Colour

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

18. 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)

19. 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

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

21. PixelLookup table entry 11 (1 byte) 2 3 4 Table EntryRedGreenBlue 1 RGB(0,0,255) 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

22. PixelLookup table entry 11 (1 byte) 2 3 4 52(1 byte) Table EntryRedGreenBlue 1 RGB(0,0,255) 0 (1 byte) 255 (1 byte) 2 RGB(255,0,0) 255 (1 byte)0 (1 byte) Lookup Table

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

24. Do we need store every pixel?

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

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

27. Screen capture of a Vector Image…

28. Zoom in on the eye

29. Zoom in on a Bitmap image…

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

31. 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