Vector and bitmap graphics – zooming into resolution and file size
Computer ScienceDigital ApplicationsAges 15–16
Use it with your class: students open it from a link or a QR code, with no account needed.
Next in Digital Applications
The same drawing is built two ways: a vector image stores each shape's formula, so it redraws crisply at any zoom level, while a bitmap image stores a grid of pixels, so zooming in reveals jagged squares. Students drag the zoom slider, drag the canvas to pan the view, and change the pixel grid resolution and the number of shapes. File size updates instantly: bitmap size equals width times height times color depth divided by 8, while vector size depends only on the number of shapes, never on the zoom level.
Lesson: Graphic design: vector vs bitmap images, resolution and file size
What it shows
Computers store pictures in two different ways. A bitmap (raster) image records the color of every pixel, so its uncompressed size is width × height × color depth ÷ 8 bytes, and enlarging it only stretches the existing pixels into visible squares. A vector image stores each shape as a geometric description (type, coordinates, color, stroke), so it is redrawn from that description at any scale and its size depends on the number of shapes, not on the zoom. That is why logos and icons suit vector formats such as SVG, while photographs need bitmap formats such as PNG or JPEG.
How to use
Start with Compare and drag the Zoom slider to magnify both copies, dragging the canvas to pan to an edge; press Center to return. Watch where the bitmap becomes jagged while the vector outline stays sharp. Then change the Bitmap grid and the Color depth and read the new bitmap file size, and change the number of Shapes to see what actually makes the vector file grow.
Parameters you can change
- Display mode Side by side to compare, Vector image only, Bitmap image only
- Zoom level 1–16 x
- Bitmap resolution 100 × 75 pixels, 200 × 150 pixels, 400 × 300 pixels, 800 × 600 pixels
- Number of shapes in the drawing 1–30 shapes
- Color depth 8-bit – 256 colors, 24-bit – true color, 32-bit – with alpha channel
Questions to explore
- Why does zooming in on the vector image not add any bytes to its file size?
- How many bytes does an uncompressed 800 × 600 bitmap with 24-bit color need?
- Should a landscape photograph be stored as a vector or a bitmap image? Why?
