The reading covered four related topics: hexadecimal numbers, color representation, image file formats, and file size calculations. We'll briefly remind ourselves of these concepts one at a time as we study the material.
Programmers use hex to have a convenient replacement for binary, because strings of bits are hard to read and hard to write. We will see that there is an easy way to convert binary to hex and vice versa. But first, we'll learn about hex as a number system, where it also finds use in programming.
First, we'll count in hex up to 29.
The hex equivalent of 3710 is
37
45
47
none of the above
The hex equivalent of 9010 is
50
90
5A
none of the above
The decimal equivalent of BA16 is
186
180
190
none of the above
Maggie will do more of these in her SI sessions.
Let's convert 111100102 to hex in two different ways:
Which way is easier?
This works because dividing by 16 (which we need to do when
converting to hex) is equivalent to shifting the bits four
places. Each hex digit corresponds to exactly four bits
(a nibble
), and so the arithmetic is much easier.
What's the conversion of C5A to binary?
1100 0101 1010
1010 0110 1100
0110 0101 1010
none of the above
What's the conversion of 1111101011001110 to hex?
DEAD
BEEF
FACE
none of the above
Maggie will do more of these in her SI sessions.
Because of the way human vision works, we can represent any color using three primaries:
If we represent the amount of each with a number from 0-255.
In modern CSS, you can say rgb(24, 118, 208)
using decimal numbers, but hex digits are still in wide use.
There's a nice match between colors being represented as 3 bytes and hex digits:
Here are the (old) standard colors. Things to notice in this table:
Color name | #RRGGBB | Example |
---|---|---|
black | #000000 | |
gray | #808080 | |
silver | #C0C0C0 | |
white | #FFFFFF | |
maroon | #800000 | |
red | #FF0000 | |
orange | #FFA500 | |
olive | #808000 | |
yellow | #FFFF00 | |
green | #008000 | |
lime | #00FF00 | |
teal | #008080 | |
aqua | #00FFFF | |
navy | #000080 | |
blue | #0000FF | |
purple | #800080 | |
fuchsia | #FF00FF | |
Last time, we saw the numbers 67, 115, and 49 converted to ASCII. Converted to a color, they are:
#437331
#438331
#437349
none of the above
What does that color look like?
light red
dark green
light blue
none of the above
Colors can be represented as rectangular collections of spots of color called pixels. An image file comes in a variety of formats, some of which are uncompressed and some are compressed.
We will study the ideas behind one particular compressed format, namely GIF and touch on the others.
What is the approximate image size in bytes of an uncompressed image of 200 x 300 with 30 colors in it?
200 x 300 x 30
200 x 300 x 3
(200 x 300 x 3)/8
(200 x 300 x 30)/8
200 x 300 x 4
(200 x 300 x 4)/8
Indexed color depends crucially on the bit-depth, which is just another form of the relationship between the number of bits devoted to a representation and the number of different things you can represent.
When we use indexed color, we usually count bits and have to divide by eight to convert from bits to bytes.
We'll work through a series of examples that show the power of indexed-color and the effect of adding colors. We'll look at these:
For each of these, we'll compute the file size in bytes.
What is the bit-depth of an index-color image with 30 colors in it?
30
3
4
5
What is the approximate image size in bytes of an image of 200 x 300 with 30 colors in it, using indexed-color representation?
200 x 300 x 30
200 x 300 x 3
(200 x 300 x 3)/8 + 30 x 3
(200 x 300 x 30)/8
(200 x 300 x 5)/8 + 30 x 3
none of the above
What is the best image file format?
GIF
JPEG
PNG
none of the above
Will be posted later, visit again after .
Solutions to the quiz questions
1. D. The hex equivalent of 3710 is 2516
2. C. The hex equivalent of 9010 is 5A16
3. A. The decimal equivalent of BA16 is 18610
3a. A = 1100 0101 1010
3b. C = FACE
4. D. The color 67, 115, 49 is #437331
5. B. The color is a dark green
6. B. The approx size is 200 x 300 x 3 bytes.
7. D. The bit depth for 30 colors is 5
8. E. The approx size is (200 x 300 x 5)/8 + 30 x 3 bytes.
9. D. There is no best image file format.