Ok, if you're about to ask for cliff's notes, don't. I know it's kind of long, it takes that much space to explain this.
I've seen a fair bit of confusion regarding this subject on the internet, so I'm going to try to do anyone who's curious a favor, and you should understand this stuff better when you're done.
So, we begin with color models:
There are are two main color models in use today: RGB and CMYK. RGB is used on computer displays, TVs, anything else that requires electricity and glows in the dark. CMYK is used on paper.
RGB is an additive color model. What this means is that the color gets brighter as you add more of it. This makes sense if you think about it's use on a computer monitor. A computer monitor is black. As you add a little bit of red, you get a dark red color. When you add as much red as you can, you end up with a bright red color. If you also add in a lot of blue and a lot of green, you're putting as many electrons as you can through that computer monitor, and it shows white. So, you see, as you add more color it gets brighter: Hence, additive color model
By the way, the letters RGB stand for red green and blue, the three component colors that you can mix in an additive color model to produce almost any color in the rainbow.
CMYK is the opposite. It's a subtractive color model. You start off with a white sheet of paper, and the more ink you put in it, the darker it gets. CMYK stands for Cyan Magenta Yellow and Black, which are the four colors that mix to form almost any color in the rainbow in a subtractive color model.
Since I'm focusing on computer displays and file formats, we're mostly going to talk about RGB colors, but first a little bit of discussion of pixels and binary.
Pixels: A pixel is a little square that's a specific color. The word comes from a contraction of "Picture Element". A pixel is the smallest unit on a computer display. You know when you set your monitor resolution to 800x600 or 1024x768? Thats the size of the display in pixels.
Each pixel has to be a certain color. There are several different ways you can keep track of these colors. I'm going to talk about color depth now. You know when you set your display to 32 bit color? What that means is that each pixel is 32 bits long. The same goes for 16 bit color or 8 bit color. For anyone who doesn't know, here's a brief description of bits and bytes:
a 'bit' is either a zero or a one. When you take 8 bits and string them together, it's known as a byte, which is a basic unit that computers use to keep track of information. There are 256 different possible values a byte can have, like this:
0 = 00000000
1 = 00000001
2 = 00000010
3 = 00000011
4 = 00000100
...
255 = 11111111
Now, 256 values isn't enough to represent everything we need, so wee string more than one byte together. We use two bytes for 16-bit color and 4 bytes for 32-bit color. You can see the disadvantage of this right away though: it takes up a lot more memory or hard disk space to store 32-bit color images than it does to store 8-bit or 16-bit color images.
Before I go any further, I'm going to say that 32 bit color isn't really 32-bits of color information. It's 24bits of color information, and 8-bits of alpha channel information. Alpha channels are something I'm not really going to talk about, but they're used for blending images, and not for storing color information.
There are two main methods of keeping track of pixels in images. to store the entire value for each pixel at that pixel, or to look up that pixels value in a table. The second method is called "indexed color" and is what we're going to look at first.
Indexed color is typically done in 8-bit image formats, such as gif files (it's the only color mode that gif supports actually).
Indexed color builds a table of 24-bit color values, and represents each of those values with an 8 bit number. The drawback to this method is that you can only represent 256 different colors with 8 bits, so you have to be selective. 24-bit color can represent millions of different colors, but you have to select just 256 of those to use in a gif image.
Basically the data is stored like this:
Table:
001 = 110101001011001011001100
002 = 110010100100100010010111
003 = 001001010001010010001101
...
255 = 001001000100111010011101
So you can see that each value in our table is a 24-bit long number.
Then the actual image data is stored like this:
pixel 1: 001
pixel 2: 003
pixel 3: 221
etc, until every pixel is defined. You can see that in an image with 50,000 pixels, it takes a LOT less space to only store the 8 bit values for each pixel, and store the actual values in a table.
when an image format like this is displayed on the screen, the computer reads each value for each pixel, then looks up that value in the table, and displays the value from the table on the screen.
The other option for storing pixel data is to just store the value right along with each pixel, like this:
pixel 1: 110101001011001011001100
pixel 2: 110101001011001011001100
etc...
This takes up a lot more space on the hard disk, but it lets you use any of the millions of 2-bit values you want for your colors, not only a selection of 256 of them. This is what PNG images use (PNG can also store indexed color data, like above, if you want it to).
JPEG images use lossy compression. The algorithms behind this are really pretty complex, but the main idea is that if you have a picture mountain and the sky, you could have 50,000 light blue pixels for the sky. in a PNG image you would have to store 50,000 24-bit values for all those pixels. In a JPEG image, the image basically goes and says "This whole area with 50,000 pixels is light blue". The problem with that, is that you lose subtle variations when you do this type of compression. The more compressed you make the image, the more detail you lose. To illustrate this, you can look up at the sky and see that it's not all a continuos shade of light blue. there's some small clouds, maybe a bird flying through it, and some parts are just darker than other parts. The more compression the JPEG image is set for, the more generalized it gets, and the more detail you lose, but the smaller your file becomes.
Ok, I was going to cover bits per sample and some other stuff, but this is already really long, maybe another time...
I've seen a fair bit of confusion regarding this subject on the internet, so I'm going to try to do anyone who's curious a favor, and you should understand this stuff better when you're done.
So, we begin with color models:
There are are two main color models in use today: RGB and CMYK. RGB is used on computer displays, TVs, anything else that requires electricity and glows in the dark. CMYK is used on paper.
RGB is an additive color model. What this means is that the color gets brighter as you add more of it. This makes sense if you think about it's use on a computer monitor. A computer monitor is black. As you add a little bit of red, you get a dark red color. When you add as much red as you can, you end up with a bright red color. If you also add in a lot of blue and a lot of green, you're putting as many electrons as you can through that computer monitor, and it shows white. So, you see, as you add more color it gets brighter: Hence, additive color model
By the way, the letters RGB stand for red green and blue, the three component colors that you can mix in an additive color model to produce almost any color in the rainbow.
CMYK is the opposite. It's a subtractive color model. You start off with a white sheet of paper, and the more ink you put in it, the darker it gets. CMYK stands for Cyan Magenta Yellow and Black, which are the four colors that mix to form almost any color in the rainbow in a subtractive color model.
Since I'm focusing on computer displays and file formats, we're mostly going to talk about RGB colors, but first a little bit of discussion of pixels and binary.
Pixels: A pixel is a little square that's a specific color. The word comes from a contraction of "Picture Element". A pixel is the smallest unit on a computer display. You know when you set your monitor resolution to 800x600 or 1024x768? Thats the size of the display in pixels.
Each pixel has to be a certain color. There are several different ways you can keep track of these colors. I'm going to talk about color depth now. You know when you set your display to 32 bit color? What that means is that each pixel is 32 bits long. The same goes for 16 bit color or 8 bit color. For anyone who doesn't know, here's a brief description of bits and bytes:
a 'bit' is either a zero or a one. When you take 8 bits and string them together, it's known as a byte, which is a basic unit that computers use to keep track of information. There are 256 different possible values a byte can have, like this:
0 = 00000000
1 = 00000001
2 = 00000010
3 = 00000011
4 = 00000100
...
255 = 11111111
Now, 256 values isn't enough to represent everything we need, so wee string more than one byte together. We use two bytes for 16-bit color and 4 bytes for 32-bit color. You can see the disadvantage of this right away though: it takes up a lot more memory or hard disk space to store 32-bit color images than it does to store 8-bit or 16-bit color images.
Before I go any further, I'm going to say that 32 bit color isn't really 32-bits of color information. It's 24bits of color information, and 8-bits of alpha channel information. Alpha channels are something I'm not really going to talk about, but they're used for blending images, and not for storing color information.
There are two main methods of keeping track of pixels in images. to store the entire value for each pixel at that pixel, or to look up that pixels value in a table. The second method is called "indexed color" and is what we're going to look at first.
Indexed color is typically done in 8-bit image formats, such as gif files (it's the only color mode that gif supports actually).
Indexed color builds a table of 24-bit color values, and represents each of those values with an 8 bit number. The drawback to this method is that you can only represent 256 different colors with 8 bits, so you have to be selective. 24-bit color can represent millions of different colors, but you have to select just 256 of those to use in a gif image.
Basically the data is stored like this:
Table:
001 = 110101001011001011001100
002 = 110010100100100010010111
003 = 001001010001010010001101
...
255 = 001001000100111010011101
So you can see that each value in our table is a 24-bit long number.
Then the actual image data is stored like this:
pixel 1: 001
pixel 2: 003
pixel 3: 221
etc, until every pixel is defined. You can see that in an image with 50,000 pixels, it takes a LOT less space to only store the 8 bit values for each pixel, and store the actual values in a table.
when an image format like this is displayed on the screen, the computer reads each value for each pixel, then looks up that value in the table, and displays the value from the table on the screen.
The other option for storing pixel data is to just store the value right along with each pixel, like this:
pixel 1: 110101001011001011001100
pixel 2: 110101001011001011001100
etc...
This takes up a lot more space on the hard disk, but it lets you use any of the millions of 2-bit values you want for your colors, not only a selection of 256 of them. This is what PNG images use (PNG can also store indexed color data, like above, if you want it to).
JPEG images use lossy compression. The algorithms behind this are really pretty complex, but the main idea is that if you have a picture mountain and the sky, you could have 50,000 light blue pixels for the sky. in a PNG image you would have to store 50,000 24-bit values for all those pixels. In a JPEG image, the image basically goes and says "This whole area with 50,000 pixels is light blue". The problem with that, is that you lose subtle variations when you do this type of compression. The more compressed you make the image, the more detail you lose. To illustrate this, you can look up at the sky and see that it's not all a continuos shade of light blue. there's some small clouds, maybe a bird flying through it, and some parts are just darker than other parts. The more compression the JPEG image is set for, the more generalized it gets, and the more detail you lose, but the smaller your file becomes.
Ok, I was going to cover bits per sample and some other stuff, but this is already really long, maybe another time...
Facebook
Twitter