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?
Vector graphics are also known as scalable vector graphics (SVG). These graphics consist of anchored dots and are 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 file is 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 result in better quality at the same or larger sizes as 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.
Vector Images vs. Raster Images
| |
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 |
|
|
| 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 make 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.