Vector and Raster: What’s the difference?

There are two basic types of digital graphic images existing on the web: vector and raster (bitmap images). Quite often, people wonder what the differences between both image types are. They struggle in telling them apart and deciding which type is appropriate for their projects.

Let us throw some light on the subject and explain the basic differences between them. We will pinpoint the most important factors which could affect your choice of file format for your next project.

1. Scalability of vector and raster

The first factor that will help you define whether a certain image is in vector or raster format, is scalability. Vector images don’t lose their sharpness and clarity, no matter to what extend or how many times you change their size.

In contrast, raster (or bitmap) images get blurry and pixelated once you examine them from a close-up. Let’s illustrate it for you, so you can better see the difference. In the following illustration, you will see a raster image that loses quality when enlarged. In comparison to it, a vector version of the same monster illustrated next to the raster doesn’t change its quality no matter the size:

Raster

Vector

2. Resolution of vector and raster

There is a significant difference in how the resolutions of vector and raster formats are defined.

The resolution of the raster graphics is formed by millions of square pixels, dots per inch (DPI), or pixels per inch (PPI), so their size is always a fixed value. If you don’t want a bitmap image to lose its quality, you can only scale it down. Consequently, the more you expand it, the more blurred it becomes.

Vector graphics, on the other hand, are made up of plenty of paths, mathematically defined in terms of ratios, proportions, width, height, and other dimensions. Every time you resize a vector image, its lines, curves, and nodes are recalculated, so the resulting image remains sharp and clear. As you can expect, the edges remain smooth at all times.

Raster expanded and blurred

Vector resized and recalculated

3. Creation of vector and raster

Digital image creation is always quite different for the two types. Vector images can be easily transformed into raster ones but it is more complicated and time-consuming to work the other way around.

Vector graphics can be only created with specialized software such as Adobe Illustrator. This makes it impossible for photos, for example, to be taken in vector format. In addition to this, all printed images and photos taken with digital cameras, are in raster format. All in all, vector graphics which resemble realistic photos, are nothing but finely detailed digital illustrations. In the following illustration, you can see how a vector image is created. The one beside it shows how a photo gets distorted when resized:

Vector graphic

Photo

4. Flexibility of vector and raster

Vector graphics can be resized numerously without losing quality. This makes them perfect for multipurpose projects requiring flexibility in the image size. For example, a vector logo is a reliable source from which you can create raster in different sizes. You can use them for various marketing needs you’ll be facing in the future, either print or web. On the contrary, you need a particular size of a raster format to achieve a certain quality.

Vector logo in different sizes

Raster images for particular use (size)

5. File size

Vector images are quite lighter than their raster peers because their dimensions are defined by mathematical calculations and not by millions of pixels. The high efficiency of their file sizes makes them much more convenient to transfer them from one device to another. Plus, they carry a lot of information in a relatively small file size format (compared to the same file size of a raster image format).

On the other hand, raster file sizes are defined by their DPI or PPI, fixed widths, and heights, which makes them much heavier while containing less information.

You may also be interested in The Best Image Formats to Use Now.

6. Compatibility of vector and raster

Sometimes, an issue is the compatibility of vector graphics. You can only open and edit them with specialized software such as Adobe Illustrator. GraphicMama’s illustrations come in one of the most common vector file extensions: .eps. You can use this vector format as an alternative for editing when you don’t have the .ai file.

You can learn more about the vector formats and how to open them in our article What is a Vector File? Everything You Need to Know

.ai format

.eps format

In contrast to vectors, raster file formats are widely popular and recognizable by all common image programs. Also, most digital images on the web are actually bitmaps even if they were vectors once. This makes bitmaps very convenient for mass use. That is why GraphicMama’s illustrations come also in the raster transparent format: .png.

.png format

However, if you are or are about to become a professional illustrator or designer, you will quite often work with vector formats. It comes without further saying that you will have the appropriate software in hand.

7. Printing

It’s true that 72 dpi raster images are usually the norm for web publications and they work just fine. For their printed version, though, you have two options.  You should either work with a vector source or use high-resolution raster files. The latter option is often the preferred one, because, sometimes, vector images are not accurately printed.  If you don’t want to compromise on the image’s clarity, the recommended raster resolution is 300 dpi. Since you can’t save photos as vectors, printed magazines, newspapers, etc. use the photos in their high-resolution rasters.

To sum it up, both vector and raster images have their unique qualities and purposes. It is important to know when it’s appropriate to use vectors instead of rasters and vice versa. Hopefully, we made it easier for you to tell the difference. Now you are ready to use the strengths of both to your advantage.

We will be happy if you drop us a line in the comments section below if still need to clear up some points. Furthermore, if you liked the monster you saw in the pictures above, check out our tutorial on how to make your own vector monster: How to Create a Simple Vector Monster in Adobe Illustrator.

If you feel like experimenting with vector graphics, here are the 16 best sources for free vector graphics on the web.