Download Representation of Images

( THE
CS 115: COMPUTING FOR
SOCIO-TECHNO WEB
REPRESENTATION OF
TEXT, NUMBERS AND CODE
TODAY
Computer components
Binary numbers
Text representation
Color representation
OPENING THE BLACK BOX
COMPUTER
ARCHITECTURE
A SIMPLE COMPUTER
Fetch the next
instruction from
memory
Decode it
Execute it
REPEAT ad infinitum
BITS: 0 AND 1
The “blood” of the computer
Only 2 bits:
electric current passes or does not through a wire.
Only 2 bits: we use symbols 0 and 1
Still enough to represent anything:
•
•
•
•
Numbers
Letters
Instructions
Images, videos, music, …
Unbelievable? Amazing?
UNDERSTANDING
POWERS OF 2
Like with our decimal system, we
can represent any number in binary
using powers of 2:
• 1010 = 1*8 + 0*4 + 1*2 + 0*1 (= 10)
• 1010 = 1*23 + 0*22 + 1*21 + 0*20 (= 10)
The first 10 powers of 2:
x
2x
1
2
2
4
3
8
4
16
5
32
6
64
7
128
8
256
9
512
10
1024
ANYWAY, IF YOU HAVE
TWO SYMBOLS…
Position of digit signifies contribution of (the
corresponding) base power
Base 10
• 1492 = 1*1000 + 4*100 + 9*10 + 2*1
• 2009 = 2*1000 + 0*100 + 0*10 + 9*1
Base 2:
• 1010 = 1*8 + 0*4 + 1*2 + 0*1 (= 10)
• 0111 = 0*8 + 1*4 + 1*2 + 1*1 (= 7)
Activity: creating binary numbers
You can represent any number!
HOW MANY BITS
DO YOU NEED?
Bit depth
Can repr.
Bit depth
21
22
23
24
25
26
27
28
29
2
210
4
8 Byte ~ 101 220
16
32
230
64
128
256
512
Can represent up to…
1024
Kilobyte ~ 103
1,048,576
Megabyte ~ 106
1,073,741,824
Gigabyte ~ 109
QUANTITIES OF
BYTES
HAPPY BIRTHDAY TO ?
1100
11101110010
/
1001
/
REPRESENTING TEXT
… you can represent any character
A is repr’d by 65, or 01000001
Hi! is repr’d by 72 105 33, or 010010000110100100100001
ASCII CODE
HOW MANY ASCII
CHARACTERS?
8 BITS EACH, SO THERE ARE IN ALL
=
2
256
8
14
February 2, 2009
… OF ANY LANGUAGE THAT
EXISTS OR EVER EXISTED
HOW MANY UNICODE
CHARACTERS?
32 BITS EACH, SO THERE ARE IN ALL
16
32
=
2
4,294,967,296
STANDARD COLORS
All standards-compliant browsers
should handle these color names
These color names can be used with the CSS
properties of color and background-color:
For other colors, it’s safest to use a
numerical representation…
RGB COLOR
The human retina has three kinds of color-sensitive
photoreceptors that were traditionally called red, green
and blue cones
Visible colors can be created by adding different amounts
of the three primary colors, red, green and blue
Color monitors display colors by adding different amounts
of red, green and blue light
RGB color components
are usually defined on a
scale from 0 to 255
Over 16 million colors can
be represented this way!
EXPLORE RGB COLOR
1) What shades are created when all three
primary colors are equal?
2) Look at the following colors:
red, yellow (=red+green), green, aqua
(=green+blue), blue, fuchsia(=red+blue)
How can you make a color brighter or darker?
3) Create the following colors:
Steel Blue
Deep Pink
Khaki
COLOR IN CSS
Specifying turquoise using rgb in CSS:
FROM BINARY TO
HEXADECIMAL
Hexadecimal Notation
R
decimal
G
B
0-255 0-255 0-255
hexadecimal 00-FF 00-FF 00-FF
Numbers in the range 0-255 are
represented in base 16, using two
“digits” that each have 16 values,
drawn from 0..9, A..F
decimal
0 1 2 3 4 5 6 7 8
9
10
11
12 13 14 15
hexadecimal
0 1 2 3 4 5 6 7 8
9
A
B
C
D
E
F
Converting decimal to hexadecimal:
Converting hexadecimal to decimal:
(1) Left digit: divide by 16, convert quotient
to 0..9,A..F
(1) Convert left digit to 0..15, multiply by 16
(2) Right digit: convert remainder to 0..9,A..F
Example: 20110  C916
(1) 201/16 = 1210  C16
(2) remainder is 910  916
(2) Convert right digit to 0..15, add to (1)
Example: A716  16710
(1) A16 is 1010, 10*16 = 160
(2) 716 = 710  160+7 = 167
CONVERTING NUMBERS
In pairs: try the following conversions (you can use a
calculator):
Decimal
Hexadecimal
7
26
240
100
255
Hexadecimal Colors
R
G
B
decimal
0-255
0-255
0-255
hexadecimal
00-FF
00-FF
00-FF
Using hexadecimal colors in CSS:
blockquote {
color: #9400D3;
background-color: #E6E6FA;
}
HOW ARE IMAGES REPRESENTED IN A
COMPUTER?
B&W IMAGE
REPRESENTATION
An image is represented as a 2D array of pixels
• Its dimensions: say, w pixels wide by h pixels high
Each pixel is a small square on the screen
Resolution: How many pixels a screen can represent
Each pixel has a color associated with it
If the color can be either black or white,
then one needs only 1 bit per pixel
• 1 = black; 0 = white
Size of a B&W image: w * h * 1 bits = (w * h)/8 B
• A 640 x 480 BW image takes 38,400 B = 37.5 KB
(1KB = 1024 B)
DIGITAL IMAGES
Images are often represented in a computer as a 2-dimensional
(2D) array of pixels.
38 pixels high
44 pixels wide
BIT DEPTH
Since each color value is a number between
0 and 255
and we use 8 bits to represent such a
number,
we use 8+8+8=24 bits to fully represent all
RGB colors
How many different colors do we
represent? 224 = __________
1
4
8
Are they enough?
Size of a true-color image: w * h * 24 bits =
(w * h*24)/8 B
• A 640 x 480 color image takes 921,600 B =
900 KB!
The number of bits used in an image is
called the bit-depth
For true-color, bit-depth is 24
But we can represent images using fewer
colors (e.g., with smaller bit depth)
24
COMPRESSION
FORMATS
24 bits (bit-depth) are enough to represent
up to 16 million different colors
A particular photograph, even though it may be very colorful,
it may not need all 24 bits to be represented
because it will likely not use all of them
JPG is a compression format that allows the image
to be stored using far fewer than 24 bits/pixel
When we save an image “as jpg” we actually compress it.
As a result, the quality of the image will degrade
so that the compression image may lose some of its quality
INDEXED COLOR
INDEXED COLOR
image
0
1
0
1
0
1
2
3
2
1
0
0
3
0
3
0
1
1
2
3
2
1
2
0
1
0
1
0
3
image contents
index color
color palette
index
color
00
#0000FF
How large is a file that stores a 300x500 pixel indexed
color image with 4 colors, and its color palette?
01
#00FF00
(1) 300x500 pixels, with 2 bits per pixel (why?)
10
#FFFF00
300 x 500 x 2 = 300,000 bits
11
#00FFFF
(2) 4 colors, with 24 bits per color
4 x 24 = 96 bits
2 bits
per pixel
24 bits
per color
 ~37.5kB (compared to the 450kB uncompressed file!)
INDEXED COLOR
How large is a file that stores a 300x500 pixel
indexed color image with 16 colors, and its
color palette?
(1) What is the number of bits used to store the
image pixels?
(2) What is the number of bits used to store the color
palette?
Total file size (in bytes):
bit-depth
max colors
1
2
2
4
“bits per pixel” is also called
the “bit depth”
3
8
4
16
bit depth must be large enough
to store all of the colors
5
32
6
64
7
128
8
256
LIMITED PALETTE IMAGE
REPRESENTATION
If we use a computer application (e.g.,
fireworks) to create a drawing,
we likely are going to use far fewer than 16
million colors
GIF is a image format that
uses only 256 colors
(it determines the best 256 colors for the image)
A gif image uses only 1byte/pixel,
plus the table to remember which particular
256 colors it uses
(its “palette”)
GIF Indexed Color
The GIF file format is an indexed
color format that allows 256 colors
(out of a possible 16 million colors!)
Computing the file size for a GIF image, in bytes:
(1) number of bytes to store the image pixels:
(width * height * bit-depth) / 8
(2) number of bytes to store the color palette:
num_colors * 3
(3) total number of bytes*:
(width * height * bit-depth) / 8 + 3 * num_colors
(4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes
*There’s also a small amount of fixed overhead for storing file type, dimensions, etc.