A photograph and a company logo look similar on screen, but they are stored entirely differently. Raster images record every pixel's colour; vector images store mathematical instructions that redraw shapes at any scale. Understanding this difference is essential for GCSE computing students studying how data represents the visual world.
What is a raster (bitmap) image?
A raster image is a grid of tiny coloured squares called pixels. Each pixel stores a colour value — for example, in a 24-bit RGB image, each pixel uses three bytes (one each for red, green, and blue), allowing 16.7 million possible colours per pixel.
The total file size (ignoring compression) is:
File size = image width × image height × colour depth (in bits) ÷ 8
For example, a 1920 × 1080 image at 24-bit colour depth:
1920 × 1080 × 24 ÷ 8 = 6,220,800 bytes ≈ 5.9 MB (uncompressed)
The fixed pixel grid means a raster image has a fixed resolution. Enlarging it past its original dimensions causes pixelation — the blurry, blocky appearance where the software guesses pixel colours to fill the gaps.
What is a vector image?
A vector image stores mathematical descriptions of shapes: lines, curves, polygons, and text — each defined by coordinates, dimensions, colours, and equations. There is no pixel grid. The image is drawn fresh — rendered — every time it is displayed, at whatever size is requested.
For instance, a circle in a vector file might be stored as:
Circle: centre (100, 100), radius 50, fill colour #FF5733, stroke width 2
No matter whether the display is a phone screen or a billboard, the rendering engine draws a perfect circle from that instruction every time. There are no pixels to run out of.
How do raster and vector images compare?
| Property | Raster (bitmap) | Vector |
|---|---|---|
| Storage method | Pixel grid with colour values | Mathematical path/shape instructions |
| File size | Large (grows with resolution and colour depth) | Small (grows with shape complexity) |
| Scalability | Pixelates when enlarged | Scales perfectly to any size |
| Colour depth | Defined per pixel | Colours are style properties of shapes |
| Best for | Photographs, gradients, complex textures | Logos, icons, diagrams, text, technical drawings |
| Common formats | PNG, JPEG, GIF, BMP, TIFF | SVG, AI, EPS, PDF |
| Editing | Paint-style tools (per-pixel editing) | Object-based (move, resize, reshape paths) |
What is colour depth and why does it affect raster file size?
Colour depth is the number of bits used to represent the colour of each pixel. A higher colour depth means more possible colours and a larger file.
| Colour depth | Bits per pixel | Number of colours |
|---|---|---|
| 1-bit | 1 | 2 (black and white only) |
| 8-bit | 8 | 256 |
| 16-bit | 16 | 65,536 |
| 24-bit (true colour) | 24 | 16,777,216 |
| 32-bit | 32 | 16,777,216 + transparency channel |
Doubling the colour depth from 8-bit to 24-bit triples the file size for an uncompressed image. This is why file compression (JPEG for photographs, PNG for graphics) matters so much in practice.
When should each format be used?
The choice between raster and vector depends on the nature of the content:
Use raster when:
- The image is a photograph or contains complex colour gradients (hair, skin, sky)
- Photorealistic detail is required
- The image will not be scaled to significantly larger sizes
Use vector when:
- The image is a logo, icon, or diagram
- The image must scale from a business card to a billboard without quality loss
- The file needs to remain small regardless of visual complexity
- Text must remain sharp at all sizes (for example, a PDF document)
A company's website typically uses SVG vector graphics for its logo (scales beautifully on any screen) and JPEG for product photographs (efficient compression for complex colour data).
How does resolution relate to raster images?
Resolution describes how many pixels are packed into a given area, usually expressed in pixels per inch (PPI) or dots per inch (DPI) for print. A 300 DPI raster image looks sharp in print; a 72 DPI web image would look blurry if printed at the same physical size. Vector images have no resolution — they are resolution-independent by definition, because they are redrawn from instructions rather than sampled from a fixed grid.
Frequently asked questions
Why do logos almost always use vector format?
A logo must appear on everything from a business card (a few centimetres wide) to a billboard (potentially several metres across). A raster logo would pixelate badly at the larger size. A vector logo is drawn afresh at every size, so it remains perfectly sharp. Vector files are also editable — a designer can change the company's colour scheme by updating a few style properties rather than recolouring thousands of pixels manually.
What happens to a raster image when you zoom in?
When you zoom into a raster image beyond its native resolution, you see the individual pixels as coloured squares. Image-editing software can attempt to smooth the edges using a process called interpolation — guessing intermediate colours — but this introduces blurring. There is no way to recover detail that was never recorded. With a vector image, zooming simply re-renders the mathematical shapes at the new scale, so no detail is lost.
Is a JPEG image lossless or lossy?
JPEG uses lossy compression, which discards some colour information to reduce file size. Each time a JPEG is saved, a small amount of quality is permanently lost. This is fine for photographs shared online, where minor quality loss is imperceptible, but JPEG is unsuitable for images with sharp edges or text, where the compression artefacts (blocky distortions at boundaries) are very visible. PNG uses lossless compression and is preferred for graphics, logos saved as raster, and screenshots.
Can I convert a raster image to a vector?
You can use a process called vectorisation (also called image tracing), which analyses the raster image and attempts to describe its shapes mathematically. Tools like Adobe Illustrator's Image Trace or the free Inkscape application can do this. The results are good for simple, high-contrast images (such as clip art) but poor for photographs — complex colour gradients and fine detail cannot be reliably described as simple geometric paths.
Explore how images are represented and stored — Professor Turing at aitutors.me can walk you through the calculations and comparisons that appear in GCSE exams.