What is the difference between Vector and Raster images?
When working with digital images you will often hear the terms “vector” and “raster” thrown around. It’s very important to know the difference between the two when working on digital products. I will be giving a little crash course on the difference between vector and raster images.
Vector? What is it?
Bluntly put vector images are calculated images based on simple geometric shapes. They are infinitely scalable because their shape is calculated using math. Vector images are useful for flat images or images with limited amounts of colors and gradients.
Vector images are amazing because they never lose their quality no matter how small or large. This makes them very helpful for websites and apps where they are viewed on desktops and smartphones.
Common vector file types are .svg (Scalable Vector Graphic) and .ai (Adobe Illustrator). However, .svg files are the most commonly used vector file type. They are often used for icons, logos, and even just as decorative imagery. Since they are just calculated images they are extremely lightweight and do not increase loading times.
Raster? What is it?
Raster images are bitmaps which are grids of individual pixels that compose a larger image. Raster images lose quality (degrade) quickly when they are resized because their image is fixed in the grid. Raster images are resolution specific which is to say that when they are exported they are at a fixed resolution.
Raster images are amazing for detailed images like a photograph. They offer crisp clean imagery unless they are scaled up. So when working with raster images it's crucial to know the largest resolution that your image will be displayed at and then it will work fine to scale down.
Common raster file types are .jpeg, .png, and .gif. Another downside of raster images is that they contain a lot of color information which leads it to be quite heavy. .webm and .jpeg formats compress the image to make it smaller. It is optimal to used compressed imagery on websites and apps as it will make them run faster.
Conclusion
When using imagery for your digital products it is important to evaluate where the image will be seen and how it’s meant to be displayed. In short, if your image has limited colors or is a graphic make it a vector, and if your image is a photo or has tons of color keep it raster.
Jeremiah Bradshaw is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Image File Evaluation) in the (DGM 2341 Course) and representative of the skills learned.
