Picture Perfect: The Difference Between Vector & Raster Graphics

Have you ever wondered about the difference between vector and a raster graphics? Probably not. But have you ever wondered why the file you downloaded is twice as big as normal? Or why the image you’ve used for your website looks blurry or fuzzy? Or how your images may be affecting your website’s page speed? Well, read on and we’ll explain to you the difference between vector graphics and raster graphics.

What is a vector graphic?

A vector graphic is created with graphed lines and sometimes shapes — these are based on paths called Bezier curves. This means that because these lines are created with a math calculation, they can be scaled up or down in size while always retaining their crisp lines and quality. Have you ever seen how some logos look nice and sharp on billboards? This is because they are created as a vector graphic. No matter how large you scale this graphic, the curves and lines will always be smooth and crisp. These graphics can also store colour information. Vector file sizes stay consistent regardless of the size of the graphic — which is different from raster graphics.

Example of Vector Graphic Files:

.SVG (Scalable Vector Graphics)

.EPS (Encapsulated PostScript File)

.AI (Adobe Illustrator)

And what about a raster graphic?

A raster graphic is created by using pixels — a pixel is a single tiny dot that contains a single colour. In fact, this blog post has many pixels that form the letters and words that you are reading. So why do some of your images look crisp sometimes, and blurry or pixelated at other times?

With the proper graphic software, we can inspect the graphics or images and see that they have a specific resolution. This is called DPI (Dots Per Inch, for print) or PPI (Pixels Per Inch, or screens), and these settings will determine the quality of your image.

How does DPI work?

Screens such as TVs or monitors will typically tell you how many DPI the screen is set to — most standard screens are set to 96 DPI (with some exceptions). 96 DPI means that for every 1 inch across the screen, there are 96 pixels across that 1 inch. Now, if an image states that it is 96 pixels (or px) wide by 96 px high, at 96 DPI, that means that it will only look good on 1 square inch of your screen.

However, an image that is 96 px wide by 96 px high and has a resolution of 288 DPI will look good on 3 square inches of your screen. This means that for every 1 inch, it contains 288 pixels across. This is three times the amount of what the dimension states; therefore, it can be blown up to 3 times the size and still look good on your screen. This is because your screen still only contains 96 DPI and an image that has 288 DPI has 3 times the pixel density that a 96 DPI image does. This is the equivalent of having an image that is 288 px wide by 288 px high at 96 DPI. It’s a bit of math, hang in there!

One reason why images end up looking blurry or pixelated is because the image or graphic has been stretched or blown up larger than its intended size. The image is trying to fill in those missing pixels by using the colour information next to each other to fill the missing dots. While this may work to an extent, it isn’t the high quality image that you or your clients want.

File sizes for raster images get larger with the more pixel information you have. This is exponential as you get even higher DPI images. An extremely large DPI would be like trying to stuff a movie theatre screen into your smartphone and view the whole thing.

Example of Raster Graphic Files:

.PNG (Portable Network Graphic)

.JPEG or .JPG (Joint Photographic Experts Group)

.TIFF (Tagged Image File Format)

.PSD (Adobe Photoshop)

.BMP (Bitmap Image)

.WEBP (WebP Image)

So, which do you use?

In a practical setting, what does this all mean? Typically, photographs are the main use for raster images, while logos and icons are typically created as vector graphics. That hero image you want on your website? That’s a raster image. The logo designed for your business will be done as a vector graphic —  that way, it looks as sharp on your business card as it does on a Pattison billboard. That said, if you explain your intent behind a graphic to a designer, they will be able to decide which image format is best.

Another important aspect to think about is page load times. Vector graphics aren’t as efficient to load on your website; however, you can convert a vector graphic into a raster image to make it more versatile. Keep in mind that a pixelated raster image can usually be optimized to different resolutions on different screens. Whether with an image converter or within your website CMS, you can create different size images for mobile and desktop to create faster loading times for your site. Given Google’s current focus on site speed as a ranking factor in search, raster images have the potential to increase your site speed — even if only by a fraction of a second. The next time you want to put a 2 mb image on your site, it might be a good idea to see if it can be compressed to help save site speed. Every little bit counts!

‍

It all comes down to the use case you have for an image. But now you know the difference between vector and raster graphics! If you’re still confused, not to worry — that’s what our experts are for! If you have any further questions about vector and raster graphics, and how we can get working on online web design for your business, contact us at Nimble Digital today!

‍