What's the Difference Between Vector Graphics and Raster Graphics?
What's the difference between vector graphics and raster graphics?
Vector graphics (left) and Raster graphics (right)
November 24, 2020 at 11:27pm
This post was revised on April 25, 2021 at 6:01pm
2 minute read
Table of Contents

    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!

    raster graphicsvector graphicsquality graphic designhow to do graphic design
    This post was written by Sol Kang
    Facebook Instagram Twitter LinkedIn
    Notice: This website uses cookies. By clicking "Okay", you are agreeing to the use of cookies. For more information on how we use the cookies, please check out our privacy policy
    Accept Cookies