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

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.

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.

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.

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.

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.

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.