What are Vector and Raster Graphics and when do I use them?

In the design world, there are 2 types of files- Vector graphics (ai, eps, pdf) and Raster graphics (jpg, png, tiff, bmp). Vector graphics are generated using mathematical and geometrical equations to represent shapes, letters, and numbers, but don’t worry about getting your calculator out, the math is all handled behind the scenes with computer magic. Vectors are great because they are able to be scaled from business card size all the way up to billboard-sized or more without losing any quality in the image. Vectors are the preferred format for logos and other brand graphics, due to their versatility.

The main that thing vectors aren’t, however, are photographs. Where a vector can be scaled without losing quality, I am sure we are all familiar with what happens to a medium or low-resolution photo when it is blown up. It becomes pixelated, or ‘blocky-looking’ and all around not great to look at, as you can see by many of the pictures on this page.

In the photo above, you’ll notice a close-up section of the IDB logo. Our logo consists of both vector and raster elements. (What?!? You can do that? Yep, when using Ai or PDF formats, you are able to have both raster and vector elements in one file!) The letters in the logo are all vector graphics, while the wood background is a raster image that was taken with a camera. You’ll notice that while the edges of the letters are all smooth, the wood has some slight distortion when zoomed in. If you blow this image up, the letters will all remain smooth, while the wood image will continue to deteriorate with size. Vectors overcome this distortion with their ability to use the equations they represent to recalculate the image at any size, and it will be in perfect quality. This is why vectors are preferred, as they speed up the process and make life easier for all of us!

If you notice the photos above, both are raster images that were exported from our master vector logo file. The image on the left was saved at 72 dpi, which is standard screen resolution. Designers will save images at this resolution for use in digital applications, such as websites, apps or on social media. It is important to make sure the file is the correct size in order to balance the best quality image with the smallest possible file size. When photographs are copied off of search engine results, from websites, or social media they are typically in this resolution at a size small enough to fit on a screen; which is much smaller than most signs.

The image on the right is the same vector logo at the same size, only this time we saved it in what is typically considered a higher-resolution image, at 300 dpi. We then took a section of the image and blew it up to show how the detail quickly deteriorates. High-resolution images are certainly preferred to low-res, but even they can be limiting. If the image was designed at a smaller scale, then it will still need resizing which will decrease the resolution.

“If you’re sitting there worrying with a medium or a low-resolution raster image, fear not, there are solutions.”

Since we deal with signage and large format printing, our ideal resolution and image size is much BIGGER! It is common to receive clients’ brand graphics in smaller or lower quality formats, particularly for smaller businesses that may not have a dedicated designer or art department and a stockpile of digital assets, so don’t worry!

If you’re sitting there worrying with a medium or a low-resolution raster image, fear not, there are solutions. With a bit of skill and some patience, we are able to trace and convert most raster images to vector format. This will typically add between 1-3 days to your lead time, and you will incur a small additional art/design fee.

Raster images do have their place, however. High-resolution photos are certainly an integral part of graphics and signage. Their success is dependent upon their quality and original intent. Photos that are taken with quality equipment and with their end application in mind are much more likely to be successful for their owners than photos that are recycled from previous projects or taken using a smartphone, etc. For this reason, we certainly recommend using a professional photographer if possible in order to get exactly the shots your project needs to succeed!

“Imagine JPG is an image printed onto white paper, while a transparent PNG is the same image printed onto clear material. “

Another important element of raster images is the specific type of file. Raster comes in many different formats, some quite dated and obsolete, and others have modern capabilities that are beneficial. For example, in the photo below you will see two images with the IDB logo and a blue square. In each instance, the blue square was placed behind a previously saved raster version of our logo. On top, the image was saved as a JPG, or JPEG, which does not have transparent background capabilities. The bottom image was saved as a PNG, which does allow for transparent backgrounds (as an option, you may also pick any color as a solid background). Imagine JPG is an image printed onto white paper, while a transparent PNG is the same image printed onto clear material. There are many other differences, such as compressed vs non-compressed and the number of colors each can store. There are also a great many other raster file types not listed here, but PNG and JPG are the most common.

One last file type worth mentioning, is the extremely versatile PDF. PDF is an Adobe-based format that stands for Portable Document Folder and it is capable of far more than just reading forms and documents with. A PDF is capable of having both raster and vector graphics inside. Additionally, PDF offers editing capabilities after files have been saved, security measures including password protection, and much more! Since PDF was created by Adobe, it is particularly friendly when going between Photoshop and Illustrator, which are both industry-leading graphic design software, are also made by Adobe. If you don’t know, Photoshop is engineered for designing and editing raster images, while Illustrator handles vector artwork.

If you’re still with us, then we hope you have learned a great deal about vector graphics and raster images and are ready to tackle your next graphics project! This article just scratches the surface, and we certainly encourage you to go out and continue to explore and expand your knowledge if you’re still interested. If you want to know more, have a specific question, or are ready to get in touch with us about your next graphics or signage project, then be sure to stop by our Contact page and fill out the form, or you can give us a call and be sure to follow us on social media. Thanks for the read and we hope you enjoyed it!

-IDB Furniture & Signs

Leave a Reply

Your email address will not be published.