We've seen how we can represent letters and other characters using binary number, but how about images? To understand that, we need to know a bit about how images are created on a screen. Images are made up of tiny patches of light called pixels (short for "picture elements"). In the early days of computers, these were all a single color (generally green) and could only be on or off. Now we can create color images by using three colored pixels together, with each pixel having a varied brightness. The colors are red, green, and blue, which match the color receptors in the human eye. By varying the level of these three colors, we can produce all the colors that our eyes can see. For example, all three pixels at full brightness produces white, while red and green together produce yellow. Below are some close-ups of pixels. You can also see them on your television or laptops screen, but you may need a magnifying glass.

Practice

Try changing the sliders to produce different colors: http://www.cknuckles.com/rgbsliders.html

So how are these pixels encoded by a computer? It's really just a matter of telling each pixel how bright it should be! Below is an example which will let you code for black and white pixels. Try it out and see what you can make.

For color images, the idea is the same, but we need more numbers. Each trio of pixels is given a number, usually 8 bits for each color. That's 24 bits total, producing a possible 16 million different colors.

Note: You will often see these numbers expressed in hexadecimal format. This is a numbering system with 16 digits (0-9, A-F). Two hexadecimal digits are the same as 8 bits, or 256 in decimal. So a color is expressed by two hex digits for red, two for blue, and two for green. Here are some common colors in hex: Black - 000000, White - FFFFFF, Red - FF0000, Blue - 00FF00, Yellow - FF00FF. Keep this in mind if you use a drawing program, because it will greatly expand the colors you can use.

One more concept to know about images is resolution. Resolution refers to the number of pixels on an image or screen, and is most often expressed as the number of horizontal and vertical lines of pixels. For example, a Full HD television is 1920 x 1080 pixels. A 4K TV is 4096 x 2160. Your computer screen has a resolution, which you can see by visiting http://www.whatismyscreenresolution.com/. Image resolutions vary widely. You can see the resolution of an image in Google Search by opening the larger version of the image and mousing over it. Resolution is very important. If you use an image with a small resolution and zoom in, you will see a "pixelated" image. However, large images take up more storage, and may be slow to load over a network. It's important to match the resolution of an image to the task you are trying to accomplish.

Resolution is not the only indicator of quality, but it is one of the most important.

Move on to Files