English

Pixels and Pictures

Primary schoolComputer ScienceAn indexed-color raster with one to three bits per pixel and an explicit fixed-width run-length payload count

Pixel studio

Every square is a number

Choose an ink and paint across the grid. Keyboard users can focus a cell and press Enter.

Read left to right, then top to bottom. Run-length encoding stores each run as a color index plus a fixed-width length.

Measurement notebook

Change the setup, test a prediction and save the result. Up to 12 snapshots are kept.

About this experiment

Paint an image whose smallest squares are stored as palette indices. Change resolution and color depth, inspect binary codes and compare uncompressed payload size with a simple run-length representation. Export the exact pixel grid as a PNG to see the difference between image information and an actual file format.

Learning goals

  • Connect an image pixel to a numeric palette index.
  • Calculate raw storage from dimensions and bits per pixel.
  • Test which arrangements compress well with run-length encoding.

How to use it

  1. 1Paint an 8 by 8 picture and read the binary palette codes shown inside its pixels.
  2. 2Change bits per pixel from three to one. Compare the available colors and raw storage.
  3. 3Compare a blank picture with vertical stripes. Keep dimensions and color depth unchanged and explain the run counts.
  4. 4Use Undo to compare edits, record the measured payload counts and export a PNG.

The model

Raw indexed-pixel bits
Fixed-width run-length payload

Assumptions

  • Pixels are read across each row from left to right, then from top to bottom. Every pixel uses the selected fixed number of bits.
  • The RLE model stores each run as a color index and a length using ceil(log2(pixel count + 1)) bits. Runs may cross row boundaries.
  • Palette tables, dimensions, file headers and padding are excluded from payload counts. PNG uses a different compression scheme, so downloaded file size need not equal these counts.

Try this in class

  1. Q1Why can two pictures with the same dimensions require different RLE payloads?
  2. Q2Why does doubling both width and height multiply raw storage by four?

Frequently asked questions

Does RLE always make a picture smaller?

No. Frequent changes of color create many runs and may use more bits than the raw raster.

Why is the PNG file larger or smaller than the displayed payload?

The file has headers and uses PNG compression, while this experiment counts a deliberately simple pixel or RLE payload.