Digital Image Data Representation

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.
• A pixel’s role is to represent a single 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.

External Resources

• Newton’s Prism Experiment
• RGB Color Scheme
• Color-hex: Information About Colors and Color Models