An image is made of a rectangular grid of tiny square dots called pixels. Each pixel may take on a wide range of colors and brightness levels. In the C++ code that accompanies this tutorial, all images will be saved in PNG (Portable Network Graphics) files where each pixel has a red, green, and blue color component value. Each color component can range from 0 (meaning that color is absent, i.e. completely dark) to 255 (meaning that color is saturated or maximized). If a pixel has red, green, and blue values that are all 0, that pixel is black, but if all three values are 255, the pixel is white. Other combinations of red, green, and blue can reproduce any imaginable color. Because the red, green, and blue color components of any pixel are independent and can assume 256 distinct values, the pixel itself can have $256^3 =$ 16,777,216 distinct color values.
In Figure 2.1 we see a photograph of my cat Lucci on the left, and a magnified view of one of her eyes on the right. Magnifying an ordinary picture like this reveals a mosaic of colored tiles, each tile being a separate pixel. The arrow points to a pixel whose color components are red=141, green=147, and blue=115. It is a remarkable fact of this digital age that photographs can be reduced to a long series of numbers in a computer.
The amount of detail in a digital image, called resolution, increases with the number of pixels the image contains. Typical digital images have hundreds or even thousands of pixels on a side. For example, the cat image on the left side of Figure 2.1 is 395 pixels wide and 308 pixels high. Some images may have a much smaller pixel count if they are used for desktop icons, mouse pointers, or image thumbnails. Beyond a few thousand pixels on a side, images become unwieldy in terms of memory usage and bandwidth, so width and height dimensions of between 200 to 2000 pixels are the most common compromise of resolution and efficiency.