Vector vs. Raster Images: Choosing the Right Format

Article 3 min
Recognize the difference between vector graphics and raster images and when to use them.

As a visual communicator, it is your job to put together the best, most professional products to deliver the right message to the right audience. Understanding different file formats and mediums is essential to help you communicate effectively. Raster images and vector graphics have different purposes in design, and it is essential for you to understand when and where to use them for the right purpose.

What is the difference?

A comparison of a vector image versus a raster image. Notice how the vector image on the left is made up of points and lines and appears smooth. Vector graphics are digital art that is rendered by a computer using a mathematical formula. Raster images are made up of tiny pixels, making them resolution dependent and best used for creating photos. This means that if you scale a vector image, it will maintain a smooth, un-pixelated appearance, whereas a raster image will become pixelated. Alt Text: Image of side by side comparison of vector and raster image of the United Coast Guard seal with zoom in on each seal for comparison. Photo by DINFOS PAVILION
A comparison of a vector image versus a raster image.
A comparison of a vector image versus a raster image. Notice how the vector image on the left is made up of points and lines and appears smooth. Vector graphics are digital art that is rendered by a computer using a mathematical formula. Raster images are made up of tiny pixels, making them resolution dependent and best used for creating photos. This means that if you scale a vector image, it will maintain a smooth, un-pixelated appearance, whereas a raster image will become pixelated. Alt Text: Image of side by side comparison of vector and raster image of the United Coast Guard seal with zoom in on each seal for comparison.
Photo by: DINFOS PAVILION
VIRIN: 200617-D-ZW071-0002

Vector graphics are also known as scalable vector graphics (SVG). These graphics consist of anchored dots and connected by lines and curves, similar to the connect-the-dot activities you may have done as a kid. Because these graphics are not based on pixels, they are known as resolution independent, which makes them infinitely scalable. Their lines are sharp, without any loss in quality or detail, no matter what their size. These graphics are also device-independent, which means their quality doesn't depend on the number of dots available on a printer or the number of pixels on a screen. Because they consist of lines and anchor points, the size of the files are relatively small.

Raster images are made of pixels, or tiny dots that use color and tone to produce the image. Pixels appear like little squares on graph paper when the image is zoomed in or enlarged.  These images are created by digital cameras, by scanning images into a computer or with raster-based software. Each image can only contain a fixed number of pixels; the amount of pixels determines the quality of the image. This is known as resolution. More pixels results in better quality at the same or larger sizes of the original, but this also increases the size of the file and the amount of space it takes to store the file. The lower the number of pixels, the lower the resolution. Resolution limits the size the image can be scaled up without being able to see pixels. However, a high resolution image printed at a small size will cause the pixels to "cram" together and will make the image look as unprofessional as not having enough pixels in a large image.

Privacy Rights Alive vs. Deceased
  Vector Image Raster Image
Resolution scalable pixel, device dependent
File Size small large, depends on exported resolution
Usage
  • Fonts
  • Logos
  • Coin designs
  • laser engravings
  • T-shirts
  • Patches
  • Digital printing (e.g., business cards, billboards)
  • Lower thirds for video
  • 2D or 3D computer animation
  • Photography
  • Print Materials
File Formats
  • EPS
  • SVG
  • AI
  • BMP
  • GIF
  • JPG
  • PNG
  • TIFF
Software
  • Vector-based software (e.g., Adobe Illustrator)
  • Raster-based software (e.g., Adobe Photoshop)
  • Digital cameras
  • Scanned images

When to choose vector versus raster?

A vector graphic's small file size and scalability makes it uniquely suitable for use in digital printing from business cards to billboards. They're also used in lower thirds for videos, web-based objects and rendering 2D or 3D computer animation. Their native files are needed for coin designs, laser engraving, t-shirts, patches, etc. Raster images are best for digital photos and print materials. If your project requires scalable shapes and solid colors, vector is the best choice, but if your project requires complex color blends, raster is the preferred format.