Two ways to store a picture
Digital images are stored in one of two basic ways. A raster image is a grid of pixels, each one a tiny colored square. A vector image is a set of instructions describing shapes: points, lines, curves and fills. Everything else about how they behave follows from this one difference.
How raster images are built
A photograph on a screen is a raster image. The file records the color of every pixel in a grid, for example 4000 columns by 3000 rows in a hypothetical camera file. Detail comes from the number of pixels and the information in each.
Strengths:
- It handles continuous tone and complex detail well, such as skin, foliage, clouds, and light and shadow.
- It is the natural result of cameras and scanners.
- Painterly and textured work, including soft brushes and grain, is stored naturally.
Limits:
- The picture has a fixed pixel count. Larger file dimensions mean more detail and bigger files.
- Enlarging it cannot create real detail, so it tends to look soft or blocky.
- File size increases with dimensions, which is why image resolution and compression matter so much.
Common raster formats include JPEG, PNG, GIF and WebP.
How vector graphics are built
A vector file describes a shape mathematically. A circle, for example, is stored as a center point, a radius, a stroke and a fill color, instead of as thousands of colored squares. A curved letter is stored as a path with anchor points and control handles that define the curve.
When the image is displayed, the software draws those shapes at whatever size is requested. That is why vector graphics can be scaled up or down without losing sharpness.
Strengths:
- Clean edges at any size, from a small icon to a billboard.
- Small files for simple artwork, since only the shape descriptions are stored.
- Easy to edit: colors, shapes and line weights can be changed without redrawing.
- Good for artwork that must be recolored or rearranged into several versions.
Limits:
- Photographic realism is difficult and usually inefficient, as it would need enormous numbers of shapes.
- Very complex artwork with thousands of paths can become heavy to open and display.
- Some effects, such as soft textures, are harder to reproduce without relying on embedded pixels.
Common vector formats include SVG, and several formats used for print-oriented artwork. Many page-description and design formats can contain both vector and raster elements.
Why resizing behaves differently
Imagine enlarging a raster image to double its width. The software needs more pixels than the file holds, so it has to invent new ones by estimating from neighbors. The result is smoother than simply doubling each square, but no new detail appears, and edges grow fuzzy.
Now enlarge a vector shape to double its width. The instructions are unchanged apart from a scale factor, and the shape is redrawn from scratch at the new size. A curve is as smooth as before.
Shrinking is safer for both. Shrinking a raster discards pixels, while shrinking a vector just draws smaller. However, extremely small vector artwork can still suffer if thin lines and fine gaps merge visually, which is why small symbols are often adjusted by hand.
Choosing the right type
| Content | Usually better as |
|---|---|
| Photographs | Raster |
| Logos | Vector, with raster exports when needed |
| Icons and simple symbols | Vector |
| Flat illustrations and diagrams | Vector |
| Charts and infographics | Vector, or raster export for the web |
| Textured paintings and scans | Raster |
| Screenshots | Raster |
The logo case is worth stressing. A logo must appear on a favicon and a banner, on a business card and a sign. Keeping a master version as vector graphics lets you export each size cleanly, which supports logo scalability. A logo that exists only as a small raster picture will look rough as soon as someone enlarges it.
Converting between the two
Vector to raster is straightforward and common. Software renders the shapes into a grid of pixels at a chosen size. This is how vector artwork ends up as a web image. Once rasterized, it behaves like any pixel image, so export at a size large enough for its use and keep the vector master.
Raster to vector is harder. Automatic tracing tries to find edges and turn them into shapes. It can work reasonably for simple, high-contrast artwork such as a clean scan of a black-and-white drawing, but it often produces rough edges, too many points or lost detail for photos and subtle gradients. Redrawing by hand frequently gives a better result for a logo.
Print and screen considerations
For print, vector artwork keeps lines and type crisp at any output size, and print-ready files often contain vector shapes and text plus placed raster images at adequate resolution. For screens, vector formats are useful for icons and simple graphics because they stay sharp on screens with different pixel densities, while photographs remain raster.
Text can also be an issue. Type kept as live text or as vector outlines stays sharp, while text baked into a raster picture will blur when scaled and is not accessible to screen readers.
Practical habits
- Create logos, icons and diagrams as vector graphics first.
- Keep photographs at the highest quality available, and make smaller copies for specific uses.
- Export raster versions at the size needed, plus extra if displays vary.
- Never rely on enlarging a small raster file for print.
- Keep master files organized so the right original is always at hand, which is part of keeping brand assets organized.
Neither type is superior. Each fits different content, and many projects use both: vector shapes and type for structure, raster photographs for realism.