How does your computer see an image? Our eyes see the blue sky, cirrus clouds painting the sky, and the green grass, but how does a computer represent this same picture? Let’s explore how images are represented in the computer.
Your key takeaways from this episode are:
- Digital images are comprised of tiny amounts of information.
- The pixel is the unit of measure for a digital image.
- One pixel represents a single color.
- Colors are represented in hex, RGB, and other identification schemes.
- Pixels are identified by their location within the coordinate grid.
Study Notes
How Computers See Images
Computers see images as lots of numbers.
- color: #82b854;
- RGB
- Pixel
- Pixel Grid
- background-color: rgb(130,184,84);
A picture that we see is actually comprised of tiny squares of color. These “squares” represent one pixel. A pixel holds just one color of information.
- An image is broken down into the smallest single piece of information: a single color.
- This one color is represented as a number.
- An image is broken down into pixels.
- Each pixel holds the information about its color.
- Therefore, a pixel’s role is to represent a single color.
- Combine these pixels together to paint the picture using the grid.
The Composition of White Light
- By using a prism, Newton proved that white light consists of pure, continuous colors.
- He identified these colors as red, orange, yellow, green, blue, indigo, and violet.
- You see these colors naturally in rainbows.
Color encoding system: Red, Green, Blue –> RGB
We need a way to encode the colors, i.e. a color encoding system. If you combine red, blue, and green, you can represent a wide range of colors. This is known as the RGB Color Scheme.
The Pixel
- An image is broken down into pixels.
- Each pixel holds the information about its color.
- Apixel’s role is to represent asingle color.
- Combine these pixels together to paint the picture using the grid.
You can see the red color values here:
http://www.color-hex.com/color/ff0000.
Let’s transform the color into what the computer uses. Remember that the color is a number representation which the software converts to the 1s and 0s the computer needs to understand the color.
BaseRedGreenBlue
| Decimal | 255 | 0 | 0 |
| Octal | 377 | 0 | 0 |
| Hex | FF | 00 | 00 |
| Binary | 1111 1111 | 0000 0000 | 0000 0000 |
In CSS, we use a pound sign (#) and then a six character hexadecimal number to represent the color. Therefore, #FF0000, which is red, is actually a hex number.
Pixel Grid
Pixels are assembled in a grid system. Each one has coordinates. Think about a coordinate system that you worked with in math. What are the coordinates for a single pixel in a grid? Each pixel is specified by its position within the grid system as identified by (x-axis, y-axis).
Resolution
Resolution is determined by the width and height of the image. For example, for a 400px x 400px image, the resolution is 400 x 400 = 160,000. This can also be expressed as 0.16 megapixels.
