Theory
How an image is stored
When you save a picture, what actually goes into the file? There are two very different answers, and the difference explains a lot: why a photo pixelates when you zoom in but a logo stays crisp, and why some files are huge and others tiny.
Graphics files fall into two families: raster (which store a grid of pixels) and vector (which store shapes and instructions). This lesson explains both, the common formats, and the crucial consequence of the choice. Knowing which kind of file you have tells you how it will behave when you scale, edit, or compress it.
Theory
Raster files: a grid of pixels
A raster (or bitmap) file stores the image as a grid of pixels, recording a colour for each one. This is how photographs are stored, since a photo is naturally a field of coloured dots.
Common raster formats: JPEG (strong, lossy compression, ideal for photos), PNG (lossless, supports transparency), GIF (few colours, supports simple animation), and BMP (uncompressed). The catch: because the image is a fixed grid, enlarging it just stretches the pixels, so it blurs or pixelates, and higher resolution means a bigger file. Raster is perfect for rich, detailed images like photos, but it does not scale up cleanly.
Theory
Vector files: shapes and instructions
A vector file stores the image not as pixels but as geometric shapes and instructions: 'draw a line from here to there', 'fill this circle red'. The picture is a set of mathematical descriptions.
Common vector formats: SVG (used on the web), EPS, and AI. The great advantage: because the image is instructions, it can be redrawn at any size without losing quality, a logo stays razor-sharp whether on a business card or a billboard, and simple graphics have small files. The trade-off: vectors suit logos, icons, and diagrams, but are not well suited to complex, photographic images (which are better as raster). Shapes scale; pixels do not.
At a glance
| Aspect | Raster (bitmap) | Vector |
|---|---|---|
| Stores | A grid of pixels (colour per pixel) | Shapes and drawing instructions |
| Formats | JPEG, PNG, GIF, BMP | SVG, EPS, AI |
| Scaling up | Blurs or pixelates | Stays sharp at any size |
| Best for | Photos and rich images | Logos, icons, diagrams |
Quiz
You need a company logo that stays perfectly sharp whether printed tiny on a card or huge on a banner. Which kind of graphics file is best?
- A raster file like JPEG, because it is common
- A vector file like SVG, because it stores shapes and instructions and scales to any size without losing quality
- A raster file like PNG, because it has transparency
- It does not matter; all files scale the same
Show the answer
A vector file like SVG, because it stores shapes and instructions and scales to any size without losing quality
A vector file (like SVG) stores the logo as geometric shapes and drawing instructions, so it can be redrawn at any size, tiny or huge, without any loss of quality, exactly what a logo needs. Option A is wrong: a JPEG is raster (a fixed grid of pixels), so enlarging it to banner size would blur or pixelate it. Option C, PNG, is also raster; transparency does not help with scaling, and it too would pixelate when enlarged far beyond its resolution. Option D is false: raster and vector scale very differently, that is the whole point. For scalable, always-sharp graphics like logos and icons, use vector; for photos, use raster.
Think first
Why does a raster image blur when enlarged but a vector one stays sharp?
What is it about how each stores the image that makes them scale so differently? Then tap.
Show the answer
It comes down to WHAT each file actually stores, a fixed number of pixels versus a resolution-independent description. A RASTER image is a grid with a fixed number of pixels, say 100 by 100. That is all the detail there is. When you enlarge it to 400 by 400, the computer has no new information about what belongs in the extra pixels, so it must STRETCH and guess: each original pixel gets spread over a larger area (or the software interpolates between them), and the result looks blocky or blurry because you are asking for more detail than the file contains. The image was captured at one resolution, and enlarging cannot invent detail that was never recorded. A VECTOR image stores something fundamentally different: a mathematical DESCRIPTION of the shapes, 'a circle of this radius centred here, filled red', 'a line between these two points'. Those descriptions have no fixed resolution; they are instructions. So to display the image at any size, the computer simply RE-EXECUTES the drawing instructions at that size, computing fresh, exact pixels for whatever resolution you want. A circle drawn at 10 times the size is still a perfect circle, freshly rendered, not a stretched approximation. That is why a vector logo is razor-sharp on a billboard: it is redrawn, not enlarged. The trade-off is that describing a complex photograph as shapes is impractical, which is why photos stay raster. Fixed pixels stretch and blur; instructions redraw perfectly at any size.
Summary
Key takeaways
- Graphics files store images in two families: raster (bitmap) and vector.
- Raster files store a grid of pixels (a colour per pixel): JPEG, PNG, GIF, BMP.
- Raster blurs or pixelates when enlarged and grows in size with resolution; best for photos and rich images.
- Vector files store geometric shapes and drawing instructions: SVG, EPS, AI.
- Vector scales to any size without losing quality and is small for simple graphics; best for logos, icons, diagrams.
- Compression can be lossy (smaller, discards some data, e.g. JPEG) or lossless (perfect, e.g. PNG).
- Memory hook: raster stores pixels (blurs when enlarged), vector stores instructions (stays sharp).