There are two completely different ways to store an image on a computer. One uses tiny coloured squares (pixels), the other uses mathematical instructions. Zoom in to see the difference.
Bitmap: Colour in individual squares on graph paper until it looks like a circle. Zoom in and you see jagged squares.
Vector: Write down "draw a circle at position (5,5) with radius 3". The computer calculates the perfect circle at any size.
Use the slider to zoom in on both images at the same time. Watch what happens to each one.
Colour depth = how many bits are used to store each pixel's colour. More bits = more colours = bigger file.
| 🖼️ Bitmap | 📐 Vector | |
|---|---|---|
| Made of | Pixels (tiny coloured squares) | Mathematical shapes (lines, curves, points) |
| Zoom in? | Gets pixelated / blurry ❌ | Stays perfectly sharp ✅ |
| File size | Large (stores every pixel) | Small (stores instructions, not pixels) |
| Edit how? | Change individual pixels | Move/resize shapes and paths |
| Best for | Photos, detailed images | Logos, icons, text, illustrations |
| File types | .jpg, .png, .bmp, .gif | .svg, .ai, .eps, .pdf |
| File size formula | width × height × colour depth | No fixed formula — depends on complexity |