Computer graphics: encoding raster and vector images

If you zoom far into a photo on your phone, it breaks into small colored squares. A website logo, however much you zoom, keeps smooth edges. The reason is that the photo is a raster image and the logo is usually a vector image: the first is made of dots, the second of formulas. In this lesson we will see how both are encoded and how to calculate the size of a raster image.

This lesson continues “Encoding text”: there every symbol was replaced by a code, here every pixel is. The topic is frequent in the entrance exam: in the four entrance exams of 2025–2026 there were 4 tasks on encoding graphics (a change of palette, matching volumes and palettes, High Color and True Color, an image whose width, height and palette change), and one more task needed the size of a picture in a document.

Raster and vector graphics

<svg width="240" height="120">
  <circle cx="60" cy="60" r="50" fill="red"/>
  <rect x="140" y="20" width="80" height="80" fill="royalblue"/>
</svg>

Pixels, resolution, color depth and palette

The size of a raster image: V = W · H · i

In a raster image the color of every pixel is written with i bits. There are W · H pixels, so the size of the image is the sum of all pixel codes. It is the “graphic version” of I = K · i: pixels take the place of symbols.

import math

def image_kb(w, h, colors):
    i = math.ceil(math.log2(colors))   # color depth, bits
    return w * h * i / 2**13           # bits -> KB

print(image_kb(1024, 768, 256))
print(image_kb(640, 480, 16))
print(image_kb(512, 256, 64))

768.0
150.0
96.0

Ratio problems: how many times does the size change?

Many tasks give not the image itself but how it changes: the palette shrinks, the width and height change. Then you do not need the full size — the ratio is enough, because the size is directly proportional to the width, the height and the color depth.

Color models: RGB and CMYK

A screen makes colors with light: every pixel consists of three tiny light sources — Red, Green and Blue. This is the RGB model. Adding colors makes them brighter (an additive model): all three at full power give white, none at all give black. In True Color each component is written with 8 bits (0–255), so a pixel is 3 · 8 = 24 bits.

A printer puts ink on white paper, and ink absorbs part of the light. That is why printing uses the CMYK model: Cyan, Magenta, Yellow and blacK (Key). Mixing inks makes the color darker (a subtractive model). Black ink is added separately because a mix of the three colored inks does not give a pure black, and it also saves ink when printing text.

In the next lesson, “Encoding sound and video”, we will see how sound and video become digital codes; a video is really a sequence of raster images.