​Revision Questions

​Get Notebook ready

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

​

​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

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)

​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

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

​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