Vector and Raster Images: What Are They and How Are They Used?

If you have been around graphic design for any time, you've probably heard of the terms "vector" and "raster". What are they, and how are they used in graphic design?

What is a vector?

A vector is a series of commands or mathematical statements that place lines and shapes in a two-dimensional or three-dimensional space. A vector has magnitude (distance or size) and direction (as on a compass needle, like north or southeast). Lines and curves made by these mathematical equations are called paths. 

Paths

This is a path: 

Anchor points

The white boxes on each end are called anchor points. They start and end the path. A great way to understand a vector is to imagine you are about to go on a hike up a mountain. The hike will have a beginning and an end. 

Smooth and corner anchor points

Any curves or changes in altitude on a mountain hike will determine how steep, straight, or winding your path will be. The more curves and angles you have, the longer your hike will take from beginning to end. In the same way, curves and angles in the vector paths create additional anchor points. Smooth anchor points create curves like a turn or a switchback on a mountain path. Corner points make straight lines that provide angles in a vector image. 

Vector images in graphic design

The fewer points the vector image has, the simpler the image will be and the smaller the file size. Here is a circle made in Adobe Illustrator. The blue squares on the circle are the anchor points. Connected to the anchor points are lines with circles on the ends, called Bezier handles, which adjust the curvature of the circle.

The more anchor points a line or curve has, the more complex the image will be and the greater the file size. Here is a squiggly line with visible anchor points in Adobe Illustrator. The blue squares are the anchor points. The curves can be adjusted using the Live Corner Widgets, which are circles with a small dot inside. 

Vector paths are infinitely scalable smaller or larger, and because they are based on mathematical formulas, the clarity of the image is not affected by the size of the image. This is not the case with a raster image. 

What does raster mean?

A raster or bitmap image comprises pixels or little “bits” of color-related information. These are called “pixels” or “dots.”

PPI and DPI

A raster image such as a photograph is a resolution-dependent image. Resolution means how detailed an image is, which directly results from how many pixels or dots are in each square inch of the picture. The terms “pixels per inch” (PPI) and “dots per inch” (DPI) refer to how many bits of color-related information are in a square inch. If you have a one-inch by one-inch picture at 300 PPI, 300 individual bits of color-related information make up the image in that square inch. If your DPI is only 72, the quality of the picture will decrease because the number of bits has gone down. When you have more pixels or dots in the square inch image, the resolution—the level of detail and, therefore, the clarity—of the image increases. 

When to use which

Raster images are great for things such as photographs, complex digital art, and detailed renderings of things like product mockups. Vector images are used in designs like simplified repeat patterns, business logos, and social media icons. 

Vector and Raster Takeaways

Both raster and vector-based images are used in graphic design. Vectors can be scaled without losing image quality because they are based on mathematical formulas. Raster images have limited scaling abilities but can contain more visual information and details. Both image types have unique advantages and disadvantages and are valuable tools for designers.