Vector and raster images are used by every single graphic artist at some point in their career. But, how do you know which one to use and when? Do you know the differences between the two? This post will explore the differences between vectors and raster images and the advantages and disadvantages of using each.

 

What is a vector?

A vector images is essentially an illustration composed of mathematically defined lines, objects and fills. When a vector image is created, drawing points are created and connected to each other by lines and curves – sort of like a very complex digital version of connect-the-dots. Using a vector graphics program such as Adobe Illustrator, Corel Draw, Freehand, Flash, Inkscape, or Fireworks, defines the image with a mathematical description.

It all sounds a bit confusing, but this mathematical description allows the image to be scaled to any size without data loss by recalculating this data. Because vector images are defined mathematically, rather than with pixels. They can easily be printed at any resolution your printer can handle, without loss of quality.

Vector graphics can range from very simple and plain in appearance to almost photo-realistic in complexity. And adding color to your vector graphic is similar to the way you add color to a coloring book – by filling in the shapes.

Additionally, your vector design software does not need to store data for each individual pixel in your design, only a set of mathematical data, thereby making them fairly small in file size. If you design a logo at 2” x 2”, for example, and save that logo again at 20” x 20”, the file size will remain the same.

Because of the ability to resize vector images to any size without losing quality, DesignContest requires all logo design entries to be designed using this technique.

Since vectors are essentially dots and lines and curves, it is difficult to achieve photorealism and many of the special effects that are so popular in design today are still unachievable, such as drop shadows and blurs. However, a creative designer can produce alternative design elements that are just as cool and fresh – and are scalable!

Common vector file formats are EPS (encapsulated postscript), AI (Adobe Illustrator), CDR (Corel Draw), and SVG (Scalable Vector Graphics).

What is a Raster Image?

A raster image is basically a complex series of dots, called pixels. Each pixel is a tiny square with an assigned color value. These pixels are arranged in such a way that they form an image. To see this in action, open a digital photograph on your computer screen and zoom in as far as you can – you’ll start to see your recognizable image become squares of color to further you zoom.

Raster based software, such as Adobe Photoshop or Gimp are used to edit these pixels. Because a raster image is comprised of pixels, it cannot be increased in size without a loss of quality. When you attempt to increase the size of a raster image, the individual pixel squares are each made larger, but they still retain the same color data – therefore, the image starts to look more like a bunch of colored squares than a crisp, clear image. (On the other hand, it is quite easy to scale-down a raster image, but once you’ve saved it to a smaller size, you can’t increase it again).

File sizes for raster images are generally much higher than vectors because your file contains specific color data for every single pixel in your image. The higher your images resolution (or, dots per inch – dpi), the larger your file size. When designing a graphic using raster, you will need to remain mindful of the final size that your image will need to be displayed or reproduced, and design at full size.

Raster is most commonly used for photography and photo manipulation, website design, and digital painting. Additionally, rasterizing allows you to use many of the special effects not possible in vector designing.

Common file formats for raster images include JPEG (Joint Photographics Expert Group), BMP (Windows Bitmap), TIFF (Tag Interleave Format), GIF (Graphics Interchange Format), PNG (Portable Network Graphic), and PSD (Adobe Photoshop)

Which Do You Prefer?

Every designer has their own style and preference for achieving that style. But, it’s important to understand the basics of vectors and raster images so that you know when to use (and when NOT to use) each method in designing. And remember, there are many occasions where it’s appropriate to mix the two!