Raster Images vs Vector Graphics

When it comes to 2D graphics, there are two general types of files to choose from, Vector Graphics and Raster Images. Each type has specific characteristics with pros and cons to weigh while making a decision on which type to use. If you do not understand the difference between the two and would like to know their implications in your designs then continue to read.

Vectors are made of paths and objects which are individually scalable while in vector format.  You can always export a vector as a raster file when you are ready to work with it as an image. Some of the advantages of using vector based graphics include the ability to increase the size of the graphic without pixilation, better quality printed materials, and robust exporting capabilities. A major disadvantage of vector graphics is the inability to create realistic imagery.

Vector file formats include:

.ai(adobe illustrator)


.esp(Encapsulated PostScript)

.wmf(Windows Metafile)

.dxf(Auto CAD)

.svg(Scalable Vector Graphics).

Vector graphics are ideal for logos, company branding, anything that will be printed, and a various assortment of other applications. Remember, you can always export a vector as a raster image, but the reverse cannot be said of a raster image.

This is an example of enlarging a vector and a raster proportionality.

Raster images are commonly referred to as jpegs or bitmaps. These file formats are typically used when editing photos. Raster images consist of many tiny little dots called pixels. All of these pixels together form the image. This is where raster greatly differs from vectors because vectors are objects that no matter how far you zoom in or how large you stretch the file, it will always display crisp. This is not true with raster. When you stretch a raster file or zoom in, it is very clear that they are made of tiny pixels because the quality will drop drastically.

One area where raster images are most commonly used is the web. Web browser not only can’t read a vector (file with a few exceptions such as the .svg file), but vector files are also much larger than jpeg raster images and would cause horrible page loading times. In the web we always need to be very conscious of our page loading times and we do this with small image files. In some cases it is even better to use the lower quality 256 color gif.

Some examples of raster files include:

.bmp(Windows Bitmap)

.jpeg, .jpg(Joint Photographics Expert Group)

.gif(Graphic Interchange Format)

.tiff(Tag Interleave Format)

.png(Portable Network Graphic)

.psd(Adobe Photoshop)


.cpt(Corel PhotoPaint)