Perform calculations to estimate the file size for a bitmap image

1.2 Multimedia – Estimating Bitmap Image File Size (Syllabus 1.2)

Learning outcome

Students will be able to:

• calculate the uncompressed size of a bitmap (raster) image,
• explain how resolution, colour depth, colour model, alpha channel, file‑format overhead and row‑padding affect that size,
• compare bitmap images with vector graphics and justify the most suitable format for a given task,
• describe the difference between lossless and lossy compression and evaluate which method is appropriate in a particular situation.

Key concepts

Binary unit conversions (binary prefixes)

• 1 byte = 8 bits
• 1 kibi‑byte (KiB) = 1024 bytes
• 1 mebi‑byte (MiB) = 1024 KiB = 1 048 576 bytes
• 1 gibi‑byte (GiB) = 1024 MiB = 1 073 741 824 bytes

Formula for uncompressed bitmap size

For a bitmap with width w pixels, height h pixels, colour depth b bits per pixel and (if applicable) an p-byte palette:

S_bits = (w × h × b) + (p × 8)

To obtain the size in bytes, divide by 8, then convert to KiB / MiB / GiB using the binary prefixes above.

Step‑by‑step calculation

1. Read the image resolution (width × height).
2. Identify the colour depth (bits per pixel) and colour model (RGB or indexed).
3. Calculate the raw pixel data: w × h × b bits.
4. If the image uses an indexed palette, add palette‑size × 8 bits.
5. Add format‑specific overhead (e.g., BMP header ≈ 54 bytes) and any row‑padding required to make each scan line a multiple of 4 bytes.
6. Convert bits → bytes → KiB / MiB / GiB.

BMP file‑header layout (illustrative)

Offset  Size   Description
0x00    2      Signature "BM"
0x02    4      File size (bytes)
0x06    2      Reserved (0)
0x08    2      Reserved (0)
0x0A    4      Offset to start of pixel data
0x0E    4      DIB header size (40 for BITMAPINFOHEADER)
0x12    4      Image width (pixels)
0x16    4      Image height (pixels)
0x1A    2      Colour planes (must be 1)
0x1C    2      Bits per pixel (bpp)
...    ...    Additional DIB fields

This header (normally 54 bytes) is counted as part of the file‑format overhead.

Worked example 1 – 24‑bit true‑colour BMP

Estimate the uncompressed size of a 1280 × 720 photograph stored as a 24‑bit BMP.

1. Resolution: w = 1280, h = 720.
2. Colour depth: b = 24 bits (RGB, no alpha).
3. Pixel data: 1280 × 720 × 24 = 22 118 400 bits.
4. Convert to bytes: 22 118 400 ÷ 8 = 2 764 800 bytes.
5. Row‑padding: each row = 1280 × 3 = 3840 bytes, already a multiple of 4 → no extra padding.
6. Add BMP header (54 bytes): 2 764 800 + 54 = 2 764 854 bytes.
7. Convert to MiB: 2 764 854 ÷ 1 048 576 ≈ 2.64 MiB.

Uncompressed size ≈ 2.64 MiB.

Worked example 2 – 8‑bit indexed colour BMP

Estimate the size of a 1920 × 1080 image saved as an 8‑bit BMP (256‑colour palette).

1. Resolution: w = 1920, h = 1080.
2. Colour depth: b = 8 bits (indexed).
3. Pixel data: 1920 × 1080 × 8 = 16 588 800 bits.
4. Palette size: 256 colours × 3 bytes = 768 bytes = 6 144 bits.
5. Total bits = 16 588 800 + 6 144 = 16 594 944 bits.
6. Convert to bytes: 16 594 944 ÷ 8 = 2 074 368 bytes.
7. Row‑padding: each row = 1920 × 1 = 1920 bytes; 1920 mod 4 = 0 → no padding.
8. Add BMP header (54 bytes): 2 074 368 + 54 = 2 074 422 bytes.
9. Convert to MiB: 2 074 422 ÷ 1 048 576 ≈ 1.98 MiB.

Uncompressed size ≈ 1.98 MiB, illustrating how reducing colour depth dramatically lowers the file size.

Impact of changing resolution or colour depth

• Resolution: Doubling both width and height multiplies the pixel count by 4, so the file size also quadruples.
• Colour depth: Changing from 24‑bit to 8‑bit reduces the size by a factor of 3 (24 ÷ 8). Adding an 8‑bit alpha channel (32‑bit total) increases the size by 33 % compared with 24‑bit.

Choosing bitmap vs. vector – checklist and case study

Case study – responsive website header

1. The client needs a logo that looks sharp on screens ranging from 320 px wide (mobile) to 2560 px wide (4K monitors).
2. Option A: Provide a high‑resolution PNG (e.g., 2000 × 800 × 24‑bit). Uncompressed size ≈ 4.6 MiB; after PNG compression ≈ 0.9 MiB. The file must be downloaded each time the page loads.
3. Option B: Provide the logo as an SVG file (≈ 8 KB). The browser renders it at any size without loss of quality and the download is negligible.
4. Decision: Choose SVG because it guarantees crisp rendering on all devices, reduces bandwidth, and simplifies maintenance (single file for all resolutions).

Compression – numeric illustration

Using the 24‑bit BMP from Example 1 (2.64 MiB uncompressed):

• PNG (lossless): typical reduction 2–5 × → ≈ 0.70 MiB.
• JPEG (lossy, high quality): typical reduction 8–10 × → ≈ 0.30 MiB, but with noticeable artefacts at high compression.

Students should comment on the trade‑off between file‑size saving and visual quality for each method.

Common pitfalls (student “gotchas”)

• Forgetting row‑padding – every scan line must be a multiple of 4 bytes in BMP files.
• Mixing decimal kilobytes (kB = 1000 bytes) with binary kibibytes (KiB = 1024 bytes); the syllabus requires KiB, MiB, GiB.
• Omitting the palette size when using indexed colour.
• Using the colour‑depth value directly for a 32‑bit image without recognising that the extra 8 bits are for the alpha channel.

Summary table – uncompressed sizes (binary prefixes)

Practice questions

1. Calculate the uncompressed file size of a 1024 × 768 image using a 32‑bit colour depth. Express your answer in MiB to two decimal places.
2. A digital camera saves photos as 24‑bit BMPs with a resolution of 4000 × 3000 pixels. What is the file size in GiB? (Round to two decimal places.)
3. If you reduce the colour depth of a 640 × 480 image from 24‑bit to 8‑bit, by what factor does the file size decrease?
4. Explain why a company would choose an SVG logo (vector) instead of a high‑resolution PNG (bitmap) for its website header.
5. Briefly describe two ways in which compression can reduce the size of a bitmap image, and state one advantage and one disadvantage of each method.
6. Using the 2.64 MiB BMP from Example 1, estimate the size after lossless PNG compression (assume a 3.5× reduction) and after high‑quality JPEG compression (assume a 9× reduction). Comment on the likely visual difference.

Answers (teacher reference)

1. Calculation

   S = 1024 × 768 × 32 = 25 165 824 bits

   Bytes = 25 165 824 ÷ 8 = 3 145 728 bytes

   MiB = 3 145 728 ÷ 1 048 576 ≈ 3.00 MiB

2. S = 4000 × 3000 × 24 = 288 000 000 bits

   Bytes = 288 000 000 ÷ 8 = 36 000 000 bytes

   GiB = 36 000 000 ÷ 1 073 741 824 ≈ 0.03 GiB

3. Size ratio = 24 ÷ 8 = 3. The file becomes one‑third of the original size (a reduction factor of 3).
4. Vector graphics scale without pixelation and usually have a far smaller file size for simple shapes. This ensures the logo remains crisp on any screen resolution and reduces page‑load time.

5. • Lossless compression (PNG): removes statistical redundancy. Advantage – no loss of visual quality. Disadvantage – lower reduction ratio than lossy methods.
   • Lossy compression (JPEG): discards information deemed less important to the eye. Advantage – very high reduction (often > 10×). Disadvantage – introduces artefacts and loss of detail.

6. PNG estimate: 2.64 MiB ÷ 3.5 ≈ 0.75 MiB. Visual quality remains virtually identical to the original.

   JPEG estimate: 2.64 MiB ÷ 9 ≈ 0.29 MiB. The file is much smaller, but subtle colour gradients may show compression artefacts, especially in smooth sky or skin tones.