1. Images Presentation Name Course Name Unit # – Lesson #.# – Lesson Name
How are images represented using digital data?
Images

2. Rows and Columns of Pixels
Rectangular grid of pixels
Each pixel has one color, a mix of red, blue, & green
Graphics card controls screen pixels
Like all other digital data, an image is just a sequence of zeros and ones. These numbers record the color of each pixel, or "picture element." Each pixel is one dot in the picture. The screen also has pixels, and as you zoom in on an image, the color of the image pixel is shown on many screen pixels. Mathematical averages are sometimes used so that you don't see the image pixels.

3. Each pixel can use RGB All images are a rectangle of pixels
Each pixel can combine red, green, and blue light
If you look at the screen through a magnifying glass, you will see that each screen pixel contains three elements for emitting red, green, and blue light. This grid shows a close up of a small image, 3 pixels high and 10 pixels wide. You might be surprised to learn that every pixel in this image is white. Each pixel here would appear white because each pixel is shining red, green, and blue light.

4. All colors made from red, green, and blue
Combining red, green, and blue light makes white light. Red and blue light combine to create magenta. Green and blue light combine to create cyan. Red and green combine to create yellow.

5. Three numbers specify a color
Often use 0–255 for red, green, and blue
RGB = (255, 255, 0)
= red on, green on, blue off
= yellow
For each pixel, three numbers are used to represent the red, green, and blue intensities. (255, 255, 0) since the numbers for red and green are all the way "on" at 255 and the number for blue is all the way "off" at 0. Red and green combined are yellow.

6. Rows and Columns of RGB Pixels
small:
zoom:
magnify:
This grid shows a close up of a small image, 3 pixels high and 10 pixels wide, with pixels that are black, white, yellow, or magenta.

7. Each pixel can use RGBA
The fourth number A lets an image be see-through
RGBA = (255, 255, 255, 0) =
red + blue + green and transparent
RGBA = (255, 255, 255, 255) =
red + blue + green and opaque
Some images have a fourth number called the "alpha channel" for each pixel. This number indicates whether the image should be transparent. The white parallelogram shown on top of the giraffe is represented here. The image of the parallelogram is a rectangular grid, transparent in top left and bottom right corners. For creating apps, you might want to create sprites, which are images that can move around on a background image. Part of a sprite can be transparent. The sprite image is still a rectangle but can appear to have an irregular shape within the rectangle.