Simulic
English

Pixels and RGB color – color depth, file size and RLE compression

Computer ScienceData & BinaryAges 15–16

Loading…

Share Report a problem

Three workspaces for bitmap images. Paint on a pixel grid, read the bit code of each pixel and see how much run-length encoding (RLE) shrinks the image. Drag the R, G, B sliders to mix light and read the hex code and the binary value of each channel. Change the color depth (1, 2, 4, 8, 24 bits) and the resolution to watch the palette shrink, the sample picture lose colors and the file size change in bits, bytes, kB and KiB.

Lesson: Image data: pixels, the RGB color model, color depth, image file size and compression

What it shows

A bitmap image is a grid of pixels, and each pixel stores a color code made of bits. Screens mix red, green and blue light, so a 24-bit color uses one byte (0–255) per channel, often written as a six-digit hex code. Fewer bits per pixel mean fewer colors: 1 bit gives black and white, 8 bits give 256 colors. The uncompressed size is width × height × color depth bits. Run-length encoding stores each run of identical pixels once, which helps only when neighboring pixels share a color.

How to use

In Draw pixels, choose a pen color with R, G, B or the swatches, then paint on the grid with Pen or Eraser; compare the RLE size with the uncompressed size. In Mix RGB, drag the sliders and compare the 24-bit color with the reduced one. In Color depth, change Color depth and Resolution and read the size table.

Parameters you can change

  • Workspace Draw pixels and RLE, Mix RGB colors, Color depth and file size
  • Color depth 1 bit (black and white), 2 bits (4 gray levels), 4 bits (16 colors), 8 bits (256 colors), 24 bits (true color)
  • Drawing grid side 8–32 pixels
  • Sample image width 16–320 pixels
  • Red channel R 0–255
  • Green channel G 0–255
  • Blue channel B 0–255

Questions to explore

  1. How many KiB does an uncompressed 320 × 240 image with 24-bit color need?
  2. Why does the hex code #FFFF00 appear yellow on a screen?
  3. When does run-length encoding make an image file larger than the original?

Related simulations