Learn
1.2.3 | REPRESENTING IMAGES
01 | A BITMAP IS A GRID OF PIXELS
Zoom into a digital photograph and you can see the small picture elements that make it up. A pixel is one element in a bitmap image’s grid. Each pixel has a colour value represented using binary data.
A bitmap stores those values in an agreed arrangement. Software interprets them and displays the picture. A file may also include metadata, headers and compression information.
This lesson focuses on bitmap images. Vector graphics describe shapes differently; they are not the model used in the calculations here.
02 | RESOLUTION: HOW MANY PIXELS?
Image resolution here means the number of pixels in the image. It is commonly specified as width × height.
640 × 480 = 307200 pixels 1280 × 960 = 1228800 pixels
Doubling both dimensions gives four times as many pixels. More pixels can capture finer spatial detail when the source contains that detail.
Enlarging an existing low-resolution image does not recreate missing detail. Display size, pixel dimensions and print density are different concepts.
03 | COMPARE PIXEL RESOLUTION
Both previews use the same supplied photograph and full-colour canvas representation. The second has far fewer pixels, enlarged with smoothing disabled so its grid is visible.
Notice the lost detail in the face, hair and laptop edges. This comparison changes pixel count, not the intended colour-depth setting. The low-resolution version is a teaching preview, not a separate downloadable file.
04 | COLOUR DEPTH: HOW MANY VALUES PER PIXEL?
Colour depth is the number of bits used to represent a pixel’s colour value in the model here. With d bits, there can be up to 2ᵈ distinct values.
| Bits per pixel | Possible values |
|---|---|
| 1 | 2 |
| 2 | 4 |
| 4 | 16 |
| 8 | 256 |
| 24 | 16777216 |
More values can represent subtle shades more closely and reduce visible colour bands. Increasing colour depth does not add pixels or sharpen an edge by itself.
Eight-bit colour is not the same as eight colours: it permits 256 values. Also, “8 bits per channel” in an RGB image means 24 bits per pixel across three channels, not 8 bits per pixel overall.
05 | COMPARE FULL COLOUR AND AN EIGHT-BIT PALETTE
These two previews have the same 330 × 220 pixel dimensions. Only the available colour values are changed.
The fixed palette uses eight red levels, eight green levels and four blue levels: 8 × 8 × 4 = 256 combinations. Notice changes in skin tones and smooth background shades.
A real indexed 8-bit image can use a palette selected for its own content, so it may look better than this deliberately simple fixed palette. The browser canvas itself remains an RGB display buffer; the demonstration limits its output colours to illustrate 8-bit palette coding.
06 | FROM COLOUR TO A BINARY CODE
| Two-bit code | Example palette colour |
|---|---|
| 00 | White |
| 01 | Green |
| 10 | Pink |
| 11 | Dark grey |
In this indexed-colour model, each pixel stores a code identifying a palette entry. The palette defines which colour that code means.
Pixel row: White Green Pink Dark grey Codes: 00 01 10 11
The spaces above make the codes readable; they are not additional stored pixel values. The same codes could mean different colours if the palette were different.
07 | TRY IT: BUILD A BINARY PICTURE
Click a cell to change it from white to green, pink and dark grey, then back to white. Each cell has a two-bit code. The grid keeps the same resolution while you change its pixel values.
8 × 8 pixels = 64 pixels. At 2 bits per pixel, raw pixel codes use 128 bits, or 16 bytes.
Use Tab to reach a cell and Enter or Space to change it. The buttons announce coordinates, colour and code. The code display lists rows from top to bottom, left to right.
08 | RESOLUTION, COLOUR DEPTH AND SIZE
For an uncompressed bitmap using a fixed number of bits per pixel:
Raw pixel data in bits = width × height × bits per pixel 100 × 100 pixels at 8 bits per pixel = 80000 bits = 10000 bytes
With other factors fixed, more pixels or more bits per pixel increase the raw data size. Doubling both dimensions quadruples the pixel count. Doubling the bits per pixel doubles the data.
This calculation excludes headers, palette storage, metadata, row padding and compression. The attached photo is a JPEG, so its actual file size is not simply width × height × colour depth.
09 | CHOOSE SETTINGS FOR THE PURPOSE
A small icon may need few pixels and colours. A detailed photograph may benefit from more pixels and subtle shades. The best choice depends on required quality, display size, storage and transfer speed.
More settings do not automatically repair a blurry original or remove compression damage. Increasing pixel count or colour depth is useful when the source and purpose support the extra detail.
For an exam explanation, keep the two effects separate: resolution affects spatial detail, while colour depth affects the number of representable colour values.