What's the Difference Between Vector Graphics and Raster Graphics?
What's the difference between vector graphics and raster graphics?
Caption: Vector graphics (left) and Raster graphics (right)
Published: November 24, 2020 at 11:27pm
2 minute read
Modified: April 25, 2021 at 6:01pm

You may have heard of raster and vector files, but are unsure of what they are. Let's break these terms down!

Let's start with raster images!


The Difference

Have you ever zoomed into a photo until you could only see blocks of colour or saw a low-resolution photo that was pixelated? That's because raster images, such as photos and illustrations, consist of pixels. The more pixels within a given space means higher quality images. PPI (pixels per inches) are used to measure image quality. When raster files are saved, it stores information about the number of pixels in the image. More pixels means larger file sizes. Raster files have smoother edges and the depth of colour in the image is much better.

Vector images, on the other hand, can be zoomed in and out without any quality loss, making them scalable. This is because the shapes are created by paths that are mathematically generated. Vector files are typically a lot smaller than high-quality raster images. You may have heard of SVG files (scalable vector graphic) in the past and now you know what it means!

That being said, you may be wondering "Why aren't vectors being used for everything? They are scalable and the files are smaller!". Well, it's not that simple - vectors are not supported by all platforms or software, for example Instagram and PowerPoint don't support SVG files. It can also be more difficult to create vector images than photographs. When to use vectors and raster depends on what you want to achieve!


When to Use Each Type

In the case of marketing materials, vector graphics are often used because they facilitate scalability. So, essentially, your logo would have a premium clean-cut look on your website, on a business card, and on a retractable pull-out banner. 

On most websites, typically those developed by a design and development agency, you will find vector graphics. They can be integrated into a website's code, thus dramatically improving site loading speed - which can make or break a user's experience! Not to mention, vector graphics can even be animated either as part of the site's experience or independently like a video.

On the other hand, there are raster images. These types of graphics are usually .jpg, .png, .gif, which you've very likely heard of. Unfortunately, as previously mentioned, vector graphics are not supported everywhere and thus raster images are required instead. You might find raster images on a website that requires very realistic portrayals of certain items, like a restaurant for instance. They will want to display a very high graphic, inticing picture of the food they offer, and thus will more likely choose a raster image.


Enjoyed learning about raster vs. vector graphics? Check out some of our other articles below!

Facebook Instagram Twitter LinkedIn