[1.2.3] Images: resolution/depth

How Computers Represent Images

When you view a photograph on your phone, watch a video, or play a game, you are looking at digital images - images that computers represent using binary data. Unlike the continuous visual information our eyes perceive, computers must break down images into discrete pieces of data that can be stored and processed as sequences of 0s and 1s. Understanding how computers represent images is essential for working with digital media, managing storage, and making informed decisions about image quality.

Digital image representation involves two fundamental concepts that determine both the quality of an image and the amount of storage it requires: resolution and colour depth. These parameters work together to define how accurately a digital image represents the original scene and how much computer memory or disk space is needed to store it. Getting the balance right between quality and file size is crucial in applications ranging from web design to medical imaging.

Bitmap Images and Pixels

What Are Bitmap Images?

Most digital images are bitmap images (also called raster images), which represent pictures as a grid of tiny coloured squares called pixels. The word "pixel" is short for "picture element" and refers to the smallest unit of a digital image. Each pixel has a specific colour, and when thousands or millions of pixels are arranged in a grid, they create a complete picture that our eyes perceive as a continuous image.

Think of a bitmap image like a mosaic made from tiny coloured tiles. From a distance, you see a complete picture, but if you zoom in closely, you can see the individual tiles (pixels) that make up the image. The number of tiles and the variety of colours available for each tile determine how detailed and realistic the mosaic appears. Similarly, the number of pixels and the range of colours each pixel can display determine the quality of a digital image.

Why Computers Use Pixels

Computers represent images as pixels because digital systems can only process discrete, numerical values. By breaking an image into a grid of pixels and assigning each pixel a specific colour value stored as binary data, computers can store, manipulate, and display images. Each pixel's colour is encoded as a number, which can be processed mathematically, transmitted over networks, and stored in memory or on disk.

This pixel-based approach allows computers to perform operations on images such as resizing, cropping, adjusting brightness, applying filters, and compressing files. Every photograph you take with a digital camera, every screenshot you capture, and every image you download from the internet is stored as a grid of pixels, each with its own colour value encoded in binary.

Resolution

Definition of Resolution

Resolution refers to the number of pixels in an image, typically expressed as width × height in pixels. For example, a resolution of 1920 × 1080 means the image is 1920 pixels wide and 1080 pixels tall, giving a total of 2,073,600 pixels (1920 × 1080). The total number of pixels in an image is sometimes called the pixel count or described in megapixels (millions of pixels) - in this example, approximately 2.1 megapixels.

Resolution is a fundamental property that determines how much detail an image contains. Higher resolution means more pixels, which allows the image to capture finer details, smoother curves, and more precise representations of the original scene. Lower resolution means fewer pixels, which results in less detail and a "blockier" appearance when viewed at large sizes.

Common Resolutions

Different devices and applications use different standard resolutions:

Effect of Resolution on Image Quality

Higher resolution produces better image quality:

• More detail: With more pixels, the image can represent finer details such as individual strands of hair, texture in surfaces, or small text
• Smoother edges: Curved lines and diagonal edges appear smoother rather than jagged or "pixelated"
• Better for enlargement: High-resolution images can be printed larger or displayed on bigger screens without appearing blurry or blocky
• More accurate representation: Complex scenes with intricate details are captured more faithfully

Lower resolution produces poorer image quality:

• Less detail: Fine details are lost or simplified because there are fewer pixels to represent them
• Jagged edges: Curves and diagonals appear as visible steps or "jaggies" (called aliasing)
• Limited enlargement: Images appear pixelated or blurry when viewed at large sizes
• Less realistic: The image may not accurately represent the original scene

Effect of Resolution on File Size

Resolution directly impacts file size because more pixels mean more data to store. If you double the width and height of an image (e.g. from 1920 × 1080 to 3840 × 2160), you quadruple the number of pixels, which approximately quadruples the file size (assuming the same colour depth). This relationship is important for managing storage, bandwidth, and processing requirements.

Example comparison:

• A 640 × 480 image contains 307,200 pixels
• A 1920 × 1080 image contains 2,073,600 pixels (6.75 times more)
• If stored with the same colour depth, the 1920 × 1080 image would be approximately 6.75 times larger in file size

This trade-off between quality and file size is why websites often use lower-resolution images to load pages quickly, whilst professional photographers work with very high-resolution images for maximum quality. Understanding this relationship helps you choose appropriate resolutions for different purposes.

Colour Depth

Definition of Colour Depth

Colour depth (also called bit depth) specifies how many bits are used to represent the colour of each pixel. More bits allow more possible colours, providing smoother colour gradients, more realistic images, and better representation of subtle colour variations. Colour depth is typically measured in bits per pixel (bpp).

The number of possible colours is calculated as 2ⁿ, where n is the number of bits per pixel. For example, 8 bits per pixel allows 2⁸ = 256 different colours, whilst 24 bits per pixel allows 2²⁴ = 16,777,216 different colours. Higher colour depth produces more realistic images but requires more storage space for each pixel.

Common Colour Depths

1-bit colour (2 colours):

• Each pixel uses 1 bit: 0 or 1
• Only two colours possible, typically black and white (also called monochrome)
• Example: 0 = black, 1 = white
• Uses: Simple graphics, fax machines, e-book readers with e-ink displays
• File size: Smallest possible for bitmap images
• Quality: Extremely limited - no shades or colours, only pure black and white

8-bit colour (256 colours):

• Each pixel uses 8 bits (1 byte)
• 256 possible colours (2⁸ = 256)
• Can represent 256 shades of grey, or a limited palette of colours
• Uses: Old computer graphics, GIF images (with 256-colour palette), retro games
• File size: Moderate - 1 byte per pixel
• Quality: Limited colour range, visible banding in gradients, suitable only for simple graphics

24-bit colour (16.7 million colours - "True Colour"):

• Each pixel uses 24 bits (3 bytes)
• 16,777,216 possible colours (2²⁴ = 16,777,216)
• Divides 24 bits into three 8-bit channels: Red (8 bits) + Green (8 bits) + Blue (8 bits)
• Each colour channel can have 256 levels (0-255), combining to make millions of colours
• Uses: Standard for photographs, web images, digital displays, printing
• File size: 3 bytes per pixel (3× larger than 8-bit)
• Quality: Excellent - more colours than the human eye can distinguish, smooth gradients, photorealistic

32-bit colour (24-bit colour + 8-bit alpha channel):

• Each pixel uses 32 bits (4 bytes)
• Same 16.7 million colours as 24-bit, plus an additional 8-bit alpha channel for transparency
• RGB (24 bits for colour) + Alpha (8 bits for transparency level)
• Alpha channel allows 256 levels of transparency from fully transparent to fully opaque
• Uses: Images requiring transparency (logos, overlays, graphics with transparent backgrounds)
• File size: 4 bytes per pixel
• Quality: Same colour quality as 24-bit, with added transparency control

How RGB Colour Works

In 24-bit colour, each pixel's colour is created by combining three colour channels: Red, Green, and Blue (RGB). This additive colour model mimics how screens emit light. Each channel uses 8 bits (values 0-255), where 0 means no intensity and 255 means maximum intensity for that colour.

Examples of RGB colour values:

• Black: R=0, G=0, B=0 (no light from any channel)
• White: R=255, G=255, B=255 (maximum light from all channels)
• Pure Red: R=255, G=0, B=0
• Pure Green: R=0, G=255, B=0
• Pure Blue: R=0, G=0, B=255
• Yellow: R=255, G=255, B=0 (red + green = yellow)
• Cyan: R=0, G=255, B=255 (green + blue = cyan)
• Magenta: R=255, G=0, B=255 (red + blue = magenta)
• Grey: R=128, G=128, B=128 (equal amounts of all colours)

By combining different intensities of red, green, and blue, 24-bit colour can create 16,777,216 distinct colours - far more than the human eye can differentiate. This makes 24-bit colour sufficient for photorealistic images.

Effect of Colour Depth on Image Quality

Higher colour depth produces better image quality:

• More realistic colours: Subtle colour variations and shades are accurately represented
• Smooth gradients: Transitions between colours appear smooth without visible bands or steps
• Better for photographs: Natural scenes with complex colours are faithfully reproduced
• Supports transparency: 32-bit allows sophisticated compositing and overlays

Lower colour depth produces poorer image quality:

• Limited colour range: Cannot represent subtle colour variations
• Visible banding: Smooth gradients show visible steps or bands between colours (called posterisation)
• Unrealistic appearance: Photographs look artificial or cartoon-like
• Colour approximation: Colours must be approximated from a limited palette, losing accuracy

Effect of Colour Depth on File Size

Colour depth directly affects file size because more bits per pixel mean more data to store. If you increase colour depth from 8-bit to 24-bit, you triple the file size (assuming the same resolution). This relationship is linear - doubling the bits per pixel doubles the file size for the same resolution.

Example comparison for a 1920 × 1080 image:

• 1-bit: 1920 × 1080 × 1 bit = 2,073,600 bits = 259,200 bytes ≈ 253 KB
• 8-bit: 1920 × 1080 × 8 bits = 16,588,800 bits = 2,073,600 bytes ≈ 2.0 MB
• 24-bit: 1920 × 1080 × 24 bits = 49,766,400 bits = 6,220,800 bytes ≈ 5.9 MB
• 32-bit: 1920 × 1080 × 32 bits = 66,355,200 bits = 8,294,400 bytes ≈ 7.9 MB

This demonstrates why choosing appropriate colour depth is crucial for managing storage and bandwidth. Web designers often balance quality against loading times, whilst professional photographers prioritise quality over file size.

Calculating Image File Sizes

The Formula

The size of an uncompressed bitmap image can be calculated using:

File size (bits) = Width × Height × Colour depth (bits per pixel)

To convert to bytes, divide by 8 (since 8 bits = 1 byte):

File size (bytes) = (Width × Height × Colour depth) ÷ 8

For larger files, convert bytes to kilobytes (KB), megabytes (MB), or gigabytes (GB):

• 1 KB = 1,024 bytes
• 1 MB = 1,024 KB = 1,048,576 bytes
• 1 GB = 1,024 MB = 1,073,741,824 bytes

Worked Examples

Example 1: Small monochrome image

• Resolution: 800 × 600 pixels
• Colour depth: 1 bit (black and white)
• Calculation: 800 × 600 × 1 = 480,000 bits
• Convert to bytes: 480,000 ÷ 8 = 60,000 bytes
• Convert to KB: 60,000 ÷ 1,024 ≈ 58.6 KB
• Result: approximately 58.6 KB

Example 2: Standard photograph

• Resolution: 3000 × 2000 pixels (6 megapixels)
• Colour depth: 24 bits (True Colour)
• Calculation: 3000 × 2000 × 24 = 144,000,000 bits
• Convert to bytes: 144,000,000 ÷ 8 = 18,000,000 bytes
• Convert to MB: 18,000,000 ÷ 1,048,576 ≈ 17.2 MB
• Result: approximately 17.2 MB

Example 3: 4K display image

• Resolution: 3840 × 2160 pixels (4K)
• Colour depth: 32 bits (True Colour with alpha channel)
• Calculation: 3840 × 2160 × 32 = 265,420,800 bits
• Convert to bytes: 265,420,800 ÷ 8 = 33,177,600 bytes
• Convert to MB: 33,177,600 ÷ 1,048,576 ≈ 31.6 MB
• Result: approximately 31.6 MB

Trade-offs and Practical Considerations

Quality vs File Size

There is an inherent trade-off between image quality and file size. Higher resolution and greater colour depth produce better quality images but result in much larger files. This creates practical challenges for storage capacity, bandwidth consumption, and processing speed. Different applications require different balances between these factors.

Considerations for different use cases:

Image Compression

To manage file sizes whilst maintaining acceptable quality, image compression techniques are widely used. Compression algorithms reduce file size by eliminating redundant data or simplifying image information. There are two main types:

• Lossless compression: Reduces file size without any loss of image quality (e.g. PNG format). The original image can be perfectly reconstructed from the compressed file. Useful for graphics, text, and images requiring perfect accuracy.
• Lossy compression: Achieves much greater file size reduction by discarding some image information that humans are less likely to notice (e.g. JPEG format). The original cannot be perfectly reconstructed, but the quality loss may be imperceptible at reasonable compression levels. Widely used for photographs and web images.

Understanding the uncompressed file size calculations helps you appreciate why compression is necessary and how different resolutions and colour depths affect storage requirements before compression is applied.

Deep Dive: Resolution and Display Devices

Pixels Per Inch (PPI) and Pixel Density

The concept of pixels per inch (PPI) or pixel density describes how tightly packed pixels are on a physical display. Two displays might both be 1920 × 1080, but if one is a 5-inch smartphone screen and the other is a 24-inch monitor, they have very different pixel densities. The smartphone has much higher PPI, making individual pixels invisible to the eye at normal viewing distances.

Higher pixel density produces sharper, clearer images because more pixels occupy the same physical space. This is why modern smartphones boast high PPI ratings (300-500+ PPI) whilst computer monitors typically have lower PPI (90-150 PPI). The appropriate pixel density depends on typical viewing distance - you hold a phone closer to your eyes than you sit from a monitor or television.

Real-World Applications

Digital Photography

Digital cameras capture images with resolutions measured in megapixels. A 12-megapixel camera creates images with approximately 12 million pixels (e.g. 4000 × 3000). Professional photographers work with high-resolution images (20+ megapixels) to allow cropping, editing, and large-format printing without quality loss. The original high-resolution image is often scaled down for different purposes - social media, web galleries, or printed photos.

Web Design

Web designers must balance image quality against page loading speed. Large, high-resolution images slow down websites, especially for users with slower internet connections or mobile devices with limited bandwidth. Designers typically use moderate resolutions suitable for typical display sizes, apply compression to reduce file size, and may use responsive images that serve different resolutions based on device capabilities.

Video Streaming

Video streaming services like Netflix offer multiple quality levels (SD, HD, 4K) based on available bandwidth. Each quality level uses different resolutions and colour depths. Higher quality streams consume more bandwidth and require more powerful devices for decoding. The service automatically adapts quality based on your internet speed to prevent buffering whilst providing the best possible picture.

Medical Imaging

Medical applications such as X-rays, MRI scans, and CT scans require very high resolution and colour depth to capture critical diagnostic details. These images often use higher bit depths (12-16 bits per channel or more) than typical photographs to represent subtle variations in tissue density. File sizes are large, but accuracy is paramount - a missed detail could affect patient diagnosis and treatment.

Summary of Key Relationships

How resolution affects images:

• Higher resolution = More pixels = More detail = Better quality = Larger file size
• Lower resolution = Fewer pixels = Less detail = Poorer quality = Smaller file size
• Doubling both width and height quadruples the file size

How colour depth affects images:

• Higher colour depth = More bits per pixel = More colours = Better quality = Larger file size
• Lower colour depth = Fewer bits per pixel = Fewer colours = Poorer quality = Smaller file size
• Doubling colour depth doubles the file size

Combined effect:

Both resolution and colour depth multiply together to determine file size. A 4K image with 32-bit colour requires significantly more storage than an HD image with 8-bit colour. Understanding these relationships allows you to make informed decisions about appropriate settings for different purposes, balancing quality requirements against storage and bandwidth constraints.