What Is the Difference Between Raster and Vector Images?

Raster vs. Vector images – what’s the difference?

There are so many different graphic file formats and image options available, you may be confused about what they are, how they work, and how they can be used efficiently to display images and graphics across different platforms.

This article is a quick overview to help you understand which types of files are best for common graphics like photos, logos, and other graphics displayed on the web and used in printed collateral.

What Is the Difference Between Raster and Vector Images?

There are two types of digital graphic files — raster and vector. Raster graphics are composed of a combination of pixels, but vector graphics are composed of paths and are based on mathematics so that they can easily scale larger or smaller.

This is a highly simplified summary, so let’s explore raster and vector graphic files in more detail.

What Is a Raster Image?

Raster images are made of pixels. A pixel is a single point or the smallest single element in a display device. If you zoom in to a raster image you may start to see a lot of little tiny squares.

Raster images are made up of tiny squares of colors or shades of black called pixels. When magnified enough, you can see the individual pixels of the image and that each one is a single color. When all those pixels are viewed as a whole, they work together to form a rich, detailed image with intricate color variations and soft gradients.

Digital photographs you see on a website, pictures you take with your phone or digital camera, or scanned artwork are all raster images. Because of the amount of digital information contained in a raster image in all those little pixels, file sizes tend to be larger than those of vector graphics.

Common raster file types:

• .png
• .jpg or .jpeg
• .gif
• .tif
• .psd

Popular raster-based image editors:

• Adobe Photoshop

What Is a Vector Image?

Vector images are mathematical calculations from one point to another that form lines and shapes. If you zoom into a vector graphic it will always look the same.

Vector graphics are built mathematically and are made up of points and paths. Generally, vector graphics are less detailed containing fewer gradients and less diversity of color. And, even though they can be used to form nearly photo-realistic graphics, they tend to be used in building graphics with more uniform, solid colors and fewer details.

Vector graphics are commonly used to produce logos and other simpler graphics that may need to be used at different sizes and have the benefit of maintaining crisp, sharp edges, even when they are enlarged greatly.

Common vector file types:

• .eps
• .ai
• .pdf
• .svg
• .sketch

Popular vector-based image editors:

• Adobe Illustrator
• Sketch
• CorelDRAW

Raster & Vector Summary

Raster (Bitmap)

• Pixel-based

• Raster programs best for editing photos and creating continuous tone images with soft color blends

• Do not scale up optimally – Image must be created/scanned at the desired usage size or larger

• Large dimensions & detailed images equal large file size

• It is more difficult to print raster images using a limited amount of spot colors

• Some processes cannot use raster formats

• Depending on the complexity of the image, conversion to vector may be time consuming

• Raster images are the most common image format, including: jpg, gif, png, tif, bmp, psd, eps and pdfs originating from raster programs

• Common raster programs: photo editing / paint programs such as Photoshop & Paint Shop, GIMP (free)

Vector

• Shapes based on mathematical calculations

• Vector programs best for creating logos, drawings and illustrations, technical drawings. For images that will be applied to physical products.

• Can be scaled to any size without losing quality

• Resolution-independent: Can be printed at any size/resolution

• A large dimension vector graphic maintains a small file size

• Number of colors can be easily increased or reduced to adjust printing budget

• Vector art can be used for many processes and easily rasterized to be used for all processes

• Can be easily converted to raster

• It is not the best format for continuous tone images with blends of color or to edit photographs

• Common vector graphic file format: ai, cdr, svg, and eps & pdfs originating from vector programs

• Common vector programs: drawing programs such as Illustrator, CorelDraw, Inkscape (free)