Understanding Raster vs. Vector: How Do These File Types Differ and When to Use Each?

In half a decade of problem solving through graphic design, I have realized the importance of choosing the right file type, file size, render quality and more. This has become more prevalent as I have received old logos from clients that need reworked, and they only have access to a single JPEG of their logo... Which designer approved that, because they walked away with your money without providing you real value. Choosing the wrong one can lead to ongoing issues that commonly go overlooked! In this blog I want to address the issues that come with this oversight and how to correctly approach using the correct file types for the correct projects. We will also answer the age old conflict; Vector VS. Raster. Let's dive into it!

What are Raster and Vector Images?

To fully understand these two, we should promptly define what it is we are truly talking about. Adobe explains raster images as:

"Digital photos and detailed graphics both come in raster form. Popular types of raster files include JPEP, PNG, and GIF image. However, because their pixel number is fixed, raster images can become distorted or blurry when resized to fill a bigger or smaller space. That’s why vector images are more commonly used for illustrations and logos — vectors are made up of mathematical formulas that can scale up or down infinitely. This means that, compared to pixels, vectors don’t lose their resolution when resized." Read More from Adobe...

They loosely define raster images as comprised of fixed pixels of specific colors that when put altogether, they combine to create a full picture.

Just as Adobe explains, the pixels in raster files remain fixed which creates a better export scenario for photographs rather than logos or graphics because it will maintain all of the details and colors from the original image. The amount of pixels contained in the image will determine the quality of the image. For example if your camera captures 1080 PPI (Pixels Per Inch) images you will have 360 more pixels than if it were captured or rendered down to 720 PPI. The smaller amount of pixels available, the more blurred and less detailed your image will be. That goes for higher quality images as well. Cameras that capture in 2K, 4K or even 8K provide more pixels that render downward to create more opportunity for high definition image output. The amount of pixels also attributes to large file sizes. The issue with such large file sizes include but not are limited to taking up all of your storage, RAM (which will slow down your computer) or worst of all, slowing down your website. The key is to render down your images to the lowest possible file size while keeping the most amount of detail (pixels) as possible. These files are not beneficial to give to your designer to make edits to your logos or graphics. The best way to explain this is by imagining 5 slices of cheese stacked on top of each other. If you were to smoosh them as hard as you could downward they are now flat and inseparable. That is the same as when you export your graphic in a raster file, it flattens the layers and creates a single layer of what you've created now is unable to be pulled apart. As you'll learn soon, vector files maintain the makeup of your file, therefore keeping the ability to edit the layers of your logo. This makes vector files the best to provide to your designer for the most accurate version of your original file. What if I was only given a JPEG or PNG? First of all, always ask for a vector file or "working file" when you receive designs from a designer. It will serve you in the long term, trust me. But any good designer should be able to recreate your logo using vector graphics. Adobe users have a handy tool called Image Trace, but this is not always a foolproof solution. If your image is pixelated, low quality or corrupted in any way, we cannot use this tool for a clean and final product (which in my experience is most of the time). The only other option is to hand draw the original as well as locate the original fonts, or at least come close, which can be tedious and take much time depending on the complexity of the logo or graphic. There is another topic that I could write another blog on, which I probably will, but that is the use of PNG VS. JPEG. Unless you are exporting a photo, I would suggest primarily exporting most of your files as PNG. A JPEG will keep a file of a photo very small, but for most graphics a PNG will minimize the potential size of the graphic. Another large benefit of a PNG is that it will not export the background color of a graphic and leave the background transparent. An example of this is if you've ever exported your logo as a JPEG, you have noticed the white background is rendered along with it. This is frustrating when you want to put it on a different colored background. The simple solution is to export as PNG! The most common raster file types are JPEG, PNG, GIF and TIFF Adobe defines vector images by saying,

"Vector images don’t use pixels. They’re created with mathematical equations, lines, and curves — using points fixed on a grid — which means images can be made infinitely larger (or smaller) without losing resolution. Basically, vectors don’t lose quality when resized." Read More from Adobe...

As a graphic designer, primarily designing logos, I design using vector software. This means as I alter my artwork it will not lose it's quality, no matter how big or small I scale it. This is a benefit because I can create graphics scale to fit at a very large scale ( on billboards, car wraps, signs, etc.) as well as a very small scale ( on business cards, profile photos, flyers, etc.). Unlike raster images, when you export in a vector format it will remain the same, retaining all of the data and detail the graphic started at. Again, this is only true for a vector graphic being exported in a vector format. When you export a raster image in a vector format it does not change the lossy makeup of raster, meaning it will still lose its quality when rendered. Side note - when you see the term lossy or lossless they are directly referring to the attributes of a raster image or vector image. Vector is lossless, since it does not lose quality whereas lossy refers to raster since it can lose quality. Vector graphics are the most versatile and useful for things like branding and other and day-to-day marketing material because of the flexility these files have to change the structure and size of a composition. All of the vector file formats listed below also allows the ability to make edits to the original design when opened in a design software like Adobe Illustrator (the file type .AI literally stands for Adobe Illustrator) or Affinity Designer. These are beneficial to have in case you need edits made to the design because it keeps the mathematical equations within the file. You can give this file to most designers and they will know how to use these files to make the requested changes you're looking for. The most common vector file types are AI, SVG, PDF, and EPS

Choosing the Right Format for Your Projects and Logos

So why is knowing this information important? When you go to create a new graphic for your website or have a new logo created that will be usable for all your marketing, it will serve you to have the right files prepared for the right job.

Here's a brief guide to help you choose the right files: Raster : Photographs Social Media Graphics Web Graphics (Banners, hero graphics, etc.) Digital Art Thumbnails Email Graphics Vector : Logos Illustrations Icons

Print Ready Files Typography Engraving Projects Animation Fiels

To Recap,

I want you to walk away with two key points, 1. Understand the 2 primary file formats; Raster and Vector

2. Use the Correct Format for the Right Project When you know what they are and how they should be used, you will know when to use them and how to get help with them when you need updates and upgrades.

If you're still having issues knowing when to use these file formats we would be happy to help guide you in the right direction. I hope this helps you take your business to the next level, and if you need your own new logo in the right formats please reach out to us, just CLICK HERE and we'd be happy to work with you! Cheers, Josh