What's a pixel?
Numbers. A digital color image pixel is just a RGB data
value (Red, Green, Blue). Each pixel's color sample has three numerical
RGB components (Red, Green, Blue) to represent the color. These three
RGB components are three 8-bit numbers for each pixel. Three 8-bit bytes
(one byte for each of RGB) is called 24 bit color. Each 8 bit RGB
component can have 256 possible values, ranging from 0 to 255. For
example, three values like (250, 165, 0), meaning (Red=250, Green=165,
Blue=0) to denote one Orange pixel. Photo editor programs have an
EyeDropper tool to show the 3 RGB color components for any image pixel.
In the base 2 binary system, an 8 bit byte can contain one of 256
numeric values ranging from 0 to 255, because 2 to the 8th power is 256,
as seen in the sequence 2,4,8,16,32,64,128,256. The 8th of these is 256.
This is the same concept in base 10, that 3 decimal digits can store one
of 1000 values, 0 to 999. 10 to the 3rd power is 1000, same
idea as 2 to the 8th power is 256.
Yeah, right, but the only point here is that 255 is the maximum
possible number that can be stored in an 8 bit byte. Larger numbers
require multiple bytes, for example two bytes (16 bits) can hold up to
256x256 = 65536 unique values. 24 bit RGB color images use 3 bytes, and
can have 256 shades of red, and 256 shades of green, and 256 shades of
blue. This is 256x256x256 = 16.7 million possible combinations or colors
for 24 bit RGB color images. The pixel's RGB data value shows "how
much" Red, and Green, and Blue, and the three colors and intensity
levels will be combined at that image pixel, at that pixel location.
The composite of the three RGB values creates the final color for
that one pixel area. In the RGB system, we know Red and Green make
Yellow. So, (255, 255, 0) means Red and Green, each fully saturated (255
is as bright as 8 bits can be), with no Blue (zero), with the resulting
color being Yellow.
Black is a RGB value of (0, 0, 0) and White is (255, 255, 255). Gray
is interesting too, because it has the property of having equal RGB
values. So (220, 220, 220) is a light gray (near white), and (40,40,40)
is a dark gray (near black). Gray has no unbalanced color cast.
Since gray has equal values in RGB, Black & White gray scale
images only use one byte of 8 bit data per pixel instead of three. The
byte still holds values 0 to 255, to represent 256 shades of gray.
Line art pixels are represented by only one binary bit with values 0
or 1, used to denote Black or White (2 colors, no gray). Line art data
is stored packed 8 bits into one 8-bit byte.
What's in an image file?
Those numbers. The image file contains three color values
for every RGB pixel, or location, in the image grid of rows and columns.
The data is also organized in the file in rows and columns. File formats
vary, but the beginning of the file contains numbers specifying the
number of rows and columns (which is the image size, like 800x600
pixels) and this is followed by huge strings of data representing the
RGB color of every pixel. The viewing software then knows how many rows
and columns, and therefore how to separate and arrange the following RGB
pixel values accordingly into rows and columns.
Every location on one of the rows and one of the columns is color
sample, which is called a pixel. If the image size were say 1000x750
pixels (written as width x height by convention), then there
would be 1000 columns and 750 rows of data values, or 1000x750 = 750,000
pixels total. For 24 bit color, each pixel's data contains three 8-bit
RGB byte values, or 750,000 x 3 = 2,250,000 bytes. Every pixel is the
same size, because a pixel is simply the color of the area between the
grid lines. That area will be colored by the one corresponding RGB data
value. Larger areas of the same color are just many multiple identical
pixels, including the blank background (the blue sky at right), which
are many more pixels too. The image data is just a series of RGB numeric
color values in a grid of rows and columns.
The image itself is an abstract thing. When we display that color
data on the screen, then our human brain makes an image out of it from
the appearance of all of these RGB data values.
Icons are usually "graphic" images, built of discrete
pixels, instead of having continuous tones like photographs. Some
graphic artist has worked very carefully on the previous icon, pixel by
pixel, one pixel at a time. But a photograph is more blended, and
adjacent pixels often have similar colors (called continuous tone). The
blue sky is many slightly different colors of blue, you can see that
here. In a graphic image, the sky would be exactly one color of blue.
And of course, scanned photographs are typically very much larger than
32x32 pixels.