[igCS] Image Representation

[igCS] Image Representation

by Andy tsui

​Revision Questions

​Get Notebook ready

Multiple Select

What are the two methods for representing negative integers?

• Two's Complement

• One's Complement

• Sign and Magnitude

• Random placement

Multiple Choice

Which one is more commonly used in computer?

• Sign and magnitude

• Two's Complement

Multiple Choice

1011 is a 4-bit two's complement binary number, it must be:

• Positive

• Negative

Multiple Choice

What is the value of 1011 (4-bt 2's complement)?

• 5

• -5

• 3

• -3

​Another method to convert from -ve binary...

​

Multiple Choice

What is the value of 1001 (4-bt 2's complement)?

• 7

• -7

• 1

• -1

Multiple Choice

What is the value of 1000 0011 (8-bt 2's complement)?

• 3

• -3

• -125

• 125

Multiple Select

Standard ASCII code is.... (choose all applies)

• 7-bit coding

• Represents English Alphabets

• Contains European accents

• Including Non-printable characters

• 8-bit encoding

Fill in the Blank

What is the name of the text encoding that includes all characters from (almost) every language?

​Objectives

​Understand how and why a computer represents an image, including the effects of the resolution and colour depth

​Computer image

• ​Computer image is represented by grid of small "dots"

• ​Those dots are called "Pixel" (stands for Picture Element)

• Each pixel contains one single color

• ​Pixels are organized in rectangular grid

Image Resolution

• ​Resolution is defined by number of pixels in an image

• Usually written as width x height

• The higher resolution

  • => more pixels for an image

  • => better image quality (smoother)

Activity​

Black and White image​

​https://studio.code.org/s/csp1-2021/lessons/7/levels/2

Multiple Choice

What is the Resolution of the "A" you created?

• 3x5

• 8x8

• 2x6

• 10x10

Fill in the Blank

How many, in total, pixels in the "A" we created?

Color in Computer

• ​All colors in computer is composed of 3 basic colors:

  • ​Red, Green and Blue

  Mixing the basic color results in different colors you can see

Activity​

​3-Bit Color

​https://studio.code.org/s/csp1-2021/lessons/8/levels/2

​Color Depth

• Each pixel in an image contains one single color

• ​The number of bits used in each color is called Color Depth

• Higher Color Depth =>

  • ​More distinct colors can be displayed in a picture / screen

Color-depth compared on ​Grayscale only

​1-bit Color Depth

• ​Black and White (only) image

  • ​Note it is different from the black and white in everyday life referring to

• ​Each pixel contains 1 bit only

• ​The total size (storage) of the image is:

  • width x height x 1 bits (color depth)

Multiple Choice

How many total pixels in the smiling face shown?

• 32

• 64

• 96

• 48

Fill in the Blank

Calculate the size of the image, in terms of number of bits

​8-bit Grayscale

• We usually use 8-bit (or 1 byte) depth to store grayscale image (so called black and white photo)

• The size of the image is given by:

  • ​width x height x 8 bits (color depth) ... or simply

  • width x height x 1 Bytes

Multiple Choice

Given an 8-bit grayscale image of 100 x 50 resolution, calculate the size of the image. 

• 5000 Bytes

• 4000 Bytes

• 5000 bits

• 1000 Bytes

Multiple Choice

How many different shades from white to gray to white, can be displayed in 8-bit grayscale? (in other word, how many distinct number can represented by 8-bit)

• 256

• 8

• 16

• 128

Activity​

​6-Bit Color

​https://studio.code.org/s/csp1-2021/lessons/8/levels/4

​8-Bit Color image

• ​8 Bit Color depth can also use in colored image

• Nowadays mainly used in Animated GIF format (gif only allows 8 bit)

• ​Since there's only 256 distinct color, gif is not very good in displaying smooth shades like photo, but works better in illustrations

True Color (24-bit)

• ​We use 8-bit per basic color for each pixel, which means:

  • ​8 x 3 = 24 bits

• By adjusting the amount of each basic color, nearly ALL color can be displayed (more than 16 Million distinct colors)

• In Website, we use

  • ​#RRGGBB format to define color

​More on 24-bit

• Nowadays most of our photos are 24-bit

• ​The storage size is given by:

  • ​width x height x 24 bits or..

  • ​width x height x 3 Bytes

Fill in the Blank

How many bits per pixel in a true color RGB image?

Multiple Choice

What is the size of the a 24-bit color depth, 100 x 50 pixel image?

• 15000 Bytes

• 15000 bits

• 5000 bits

• 5000 Bytes

​Conclusion

• Image quality is defined by

  • ​Resolution, pixel count of the image

  • ​Color depth, number of bits to store distinct color value

• ​Image file size is calculated by:

  • ​Width x Height x Color Depth