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 is pixelated? Well, read on and we’ll explain to you the difference between vector graphics and raster graphics.

So why would you use a vector graphic?

A vector graphic is created with graphed lines, and sometimes shapes, which are based on paths called Bezier curves. This means that because these lines are actually done with a math calculation, they can be scaled up or down in size and always retain 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 have color information stored in them. Vector file sizes stay consistent regardless of the size of the graphic, which cannot be said about raster graphics.

And what about a raster graphic?

Whereas a raster graphic (not to be confused with a rasta graphic, mon) is created by using pixels. A pixel is a single tiny dot that contains a single color. This blog 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 others? With the proper graphic software, we can inspect the graphics or images and see that they have a specific resolution. They have something called DPI (Dots Per Inch, for print) or PPI (Pixels Per Inch, or screens). These settings will tell you what the quality of your image is.

How does DPI work?

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

However, an image that is 72 px wide by 72 px high and has a resolution of 216 DPI will look good on 3 square inches of your screen. This means that for every 1 inch, it contains 216 pixels across. This is 3 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 72 DPI and an image that has 216 DPI has 3 times the pixel density that a 72 DPI image does. This is the equivalent of having an image that is 216 px wide by 216 px high at 72 DPI. Still with me? Good!

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 color 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 as a client wants.

File sizes for raster images get larger with the more pixel information you have. This is exponential as you get even higher DPI images. Remember when you were a child, and everything was measured in wildly impractical terms, like football fields or elephants? Well trying to view an image with an extremely large DPI is like trying to stuff a football field into your computer screen, and view the whole thing.

So, which do you choose?

And what does all this mean, in a practical setting? Well, typically photographs are the main use for raster images, whereas 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 giant flag waving above the dealership. With that being said, if you explain to a designer your intent behind a graphic, they will be able to decide which format is best.

Another aspect to think about, would be load times. Vector graphics aren’t as efficient to load on your site; you can however convert a vector graphic into a raster image, making it more versatile. Keep in mind a pixelated raster image can usually be optimized to different resolutions on different screens. This means that any good CMS (like Strathcom’s custom WordPress CMS) can create different size images for say, mobile and desktop, meaning faster loading times for your site. Given Google’s current devotion toward site speed as a ranking factor, raster images have the potential to increase your site speed even if only by a fraction of a second.

If you have any further questions, contact your Online Marketing Manager, or info@strathcom.com. And as always, stay tuned to our blog to learn more about the ins and outs of marketing in the digital age.