Bits Representing Graphics

Can you imagine a computer if it didn't have a screen, if it didn't display things visually to us? It would be very different working with computers. A screen is an important part of our interaction with the computer. But how do we turn ones and zeros into graphics? How do we turn ones and zeros into what we're seeing on a screen, and vice versa, take a picture of something and turn it into ones and zeros and store it that way?

RGB

There's a few things that we should probably cover before we get into the bits side of this. Number one, you may see out there with computers an RGB. RGB stands for red, green, blue, and the reason why this exists is because we can create any color using red light, green light or blue light. So here we have a red light, here we have a blue light, and then we have a green light. The absence of all the color is just dark, is black. Walk into a room with no light and then it's black in there. The presence of all this color is white, so we see white here. And then we see a mixture of these colors can create other colors.

Here's an example where we have 100% blue, we have 40% red, so we've dimmed the red light, and we have 40% green, so we've dimmed the green light, so that way we can create this color. It's kind of a purplish color that we have here. So we can create variation by the amount of light, of how much red we have, how much green we have and how much blue we have.

Pixels

Your screen is made up of pixels, and nowadays most screens you can't see the individual pixels unless you get something like a magnifying glass out and take a look at it. So let's blow this up to be bigger. It's a series of grids here, and for each one of these pixels there's a certain amount of red, a certain amount of green and a certain amount of blue. The mixture of this red, green and blue, and the strengths of red, green and blue, will determine what color this pixel is. And then put this all together and it represents some sort of picture. So here's just an example of what that looks like once it's filled in. If we were to zoom in on this, this is what we would be seeing.

Bits Per Pixel

Now, some way we need to convert those red, green and blues into some sort of digital representation of that, ones and zeros. So we could do that with just one bit, in which case we just have two options with it. We have two different colors we could use. For instance, it could be black and white, so this would be like a black and white photo where we would have just a bit per pixel.

If we had eight bits per pixel, we could have a variation of 256 colors. So early video games were set up with 8 bit colors and there would be 256 variations, which was kind of obvious when you look at 8-bit graphics. It's pretty obvious that there's not a lot of color variation. If we use 16 bits, now we get 65,536 options. With 24 bits, so this is 2 to the 24th power, we get over 16 million. With 32 bits we get over 4 billion. So that is how many bits we would use to represent this amount of colors, variation in colors.

Now, there's been some research done, and our eye can really only differentiate amongst 10 million colors. So once you get beyond that, it really doesn't help much. So this 16 bits, we would actually be able to tell a degrading of that picture. We would be able to point out that it doesn't look quite right. This 4 billion is just way overkill for what we need. So 24 bit here is 16 million, that actually goes above and beyond what our eye can differentiate, so this 24 bits is a great number. Not to mention, 24 bits, if you divide it by three different colors, red, green and blue, it's eight bits per color. Well, that's a byte of information, which is what we're used to using. So 24 bits is just this great number to use, and we could represent each color, how much red, how much green and how much blue, with a byte of information, eight bits of information.

Calculating the File Size

Here we have a picture of Mario, and it's made up of a lot of these pixels, and each of those pixels has a color assigned to it. I've assigned four different colors, so we've got blue and then this kind of brownish color, a greenish color and a yellowish color here.

So what we have is this blue is made up of a certain amount of red, a certain amount of green and a certain amount of blue. Notice that blue is all ones, so this is 100%. So this is what it's written out in binary form, and this is what it is in decimal form, so all ones would be 255 in decimal form. So what we have here is a representation of how much red, how much green and how much blue creates this color of blue, and that's what's filled in here. So then we also have this color right here, and we see some of that in this picture. We also see this green right here and this yellow right here.

So if we wanted to calculate what this file size is, what we could do is calculate how many pixels there are across, which there are 12, so there's 12 pixels across, and how many are up and down. Up and down we have 16. So 12 times 16 is 192, so we have 192 pixels in total, and each of those are represented by three bytes of information. We've got one byte for red, one byte for green and one byte for blue for each one of those pixels. So if we take 192 times 3, and I've got my calculator, calculated it out here, 576. So the answer here is 576. So the picture size here is going to be around 576 bytes, or at least 576 bytes. That's how much it's going to take to store the data of this. And then there might be some other file parameters that are stored as well, so we might see a little bit of variance there.

So let's see what that looks like. I've created this Mario bitmap right here, and you can see I've opened it up in Paint, so you can see that's exactly what I had in the picture right there. And if we were to see this file size, so here's that file right here, I can right click on this and say properties. We should come close to 576, and so we have 630. So it's a little bit bigger. Like I say, there's a little bit of overhead here, but essentially there is three bytes per pixel that's being saved there.