Data Representation in Computers Student :Ahmed Alsaqqa 120060521 MIS: Rasha Ragheb Atallah.
CS110: Computers and the Internet Color and Image Representation.
-
Upload
beryl-west -
Category
Documents
-
view
224 -
download
0
Transcript of CS110: Computers and the Internet Color and Image Representation.
![Page 1: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/1.jpg)
CS110: Computers and the Internet
Color and Image Representation
![Page 2: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/2.jpg)
Today
• More information representation:• Hexadecimal numbers• Color representation• Image representation• Image compression
![Page 3: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/3.jpg)
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…
![Page 4: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/4.jpg)
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!
![Page 5: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/5.jpg)
Explore RGB Color
Deep Pink Khaki Steel Blue
http://cs.wellesley.edu/~cs110/lectures/M01-color/NewColorPad/ColorPad.html
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:
![Page 6: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/6.jpg)
Color in CSS
Specifying turquoise using rgb in CSS:
![Page 7: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/7.jpg)
Hexadecimal Notation
R G B
decimal 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
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F
decimal
hexadecimal
Converting decimal to hexadecimal:
(1) Left digit: divide by 16, convert quotient to 0..9,A..F
(2) Right digit: convert remainder to 0..9,A..F
Converting hexadecimal to decimal:
(1) Convert left digit to 0..15, multiply by 16
(2) Convert right digit to 0..15, add to (1)
Example: 20110 C916
(1) 201/16 = 1210 C16
(2) remainder is 910 916
Example: A716 16710
(1) A16 is 1010, 10*16 = 160
(2) 716 = 710 160+7 = 167
![Page 8: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/8.jpg)
Converting numbers
• In pairs: try the following conversions (you can use a calculator):
Decimal Hexadecimal
7
26
240
100
255
![Page 9: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/9.jpg)
Hexadecimal Colors
Using hexadecimal colors in CSS:
R G Bdecimal 0-255 0-255 0-255
hexadecimal 00-FF 00-FF 00-FF
blockquote { color: #9400D3; background-color: #E6E6FA; }
![Page 10: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/10.jpg)
Image Representation
Problem: large image files can take a long time to download!
Example: On a 300 kbps (300k bits per second) cable modem, a 450 kB image takes about seconds to download
Solutions:
(1) Downsample images to make them smaller (fewer pixels)
(2) Compress the images, using “lossless” compression (no information is lost) or “lossy” compression (less important information is lost) techniques
RGB color for each pixel is stored in 24 bits (3 bytes)
How much memory is needed to store a 300x500 pixel image?
![Page 11: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/11.jpg)
Indexed Color
0 1 0 1 0
1 2 3 2 1
0 3 0 3 0
1 2 3 2 1
0 1 0 1 0
index color
0
1
2
3
color paletteimage contentsimage
index color
00 #0000FF
01 #00FF00
10 #FFFF00
11 #00FFFF
How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette?
(1) 300x500 pixels, with 2 bits per pixel (why?)
300 x 500 x 2 = 300,000 bits
(2) 4 colors, with 24 bits per color
4 x 24 = 96 bits
~37.5kB (compared to the 450kB uncompressed file!)2 bits per pixel
24 bits per color
![Page 12: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/12.jpg)
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):
“bits per pixel” is also called the “bit depth”
bit depth must be large enough to store all of the colors
bit-depth max colors
1 2
2 4
3 8
4 16
5 32
6 64
7 128
8 256
![Page 13: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/13.jpg)
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.
![Page 14: CS110: Computers and the Internet Color and Image Representation.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649dbc5503460f94aadc58/html5/thumbnails/14.jpg)
Other Image Formats
JPEG: wellesley.jpg
- millions of colors, compressed, nice for photos, does not allow transparency
PNG: cs110-logo.png
- millions of colors, compressed, nice for line art and graphics, allows 8-bit transparency
GIF: palette.gif
- limited to 256 colors, nice for line art and graphics, allows 1-bit transparency, supports animation
Generate all formats and compare with Fireworks!