ThirdSide Inc.

Blog

Differences in File Types: Vector vs. Raster Graphics

3 min read
in Blog, Design
computer graphics on a laptop

It is essential as a business to present yourself in a professional manner. Simply having a blurry or pixelated logo in an advertisement can make that business appear to be sloppy and lack attention to detail. However, most people don’t realize this is an issue in the first place. This should serve as a guide to help anyone ensure that they are using the best possible file type for their project.

Vector Vs. Raster

example of vector image vs raster graphic

Simply put, vector graphics are able to be enlarged to any size without losing quality. Raster graphic on the other hand, are a specific size and will become pixelated when enlarged. This difference is due to how the files store their data. While raster images have tiny pixels that make up the image, vector images are created with mathematical equations that create the shapes and fill them with the appropriate colors. Since digital photographs are created with pixels, they can never be vector, but text, shapes, and created graphics can. It is best to use vector graphics whenever possible. They allow for much more freedom when editing a design, and there will never be an issue with files being pixelated. However, many vector file types, such as PDF and EPS, are not supported on the web.

JPG vs. PNG

example of png versus jpg graphic

Raster files most commonly are one of two different file types, these are JPG and PNG. JPG files are best used for photographs due to their ability to compress images. This results in good picture quality while maintaining a small file size. Unfortunately, JPGs use a lossy compression algorithm, resulting in JPG images losing quality each time it is saved. When it comes to non-realistic graphics, such as cartoons, PNG files are a much better option to use. PNGs are a lossless file type and the size of the file is determined mostly by the number of colors in the graphic. Large areas of solid color will result in a smaller file size since many of the pixels are identical.

The most notable difference between these file types is that a PNG has the ability to have a transparent background. This is essential for putting graphics, such as a logo, on a colored background. Using a JPG in the same manner would result in a white rectangle around the logo.

PSD & AI

These files types are for the editable files and may only be used with the Adobe Creative Suite. Photoshop primarily deals with raster graphics while Illustrator is the go-to for vector. Although they can be edited, there are many complications that can arise by sending these files to users on different computers. All fonts and linked images must also be sent with the working file in order to properly open the image. Without these the file may open with the wrong fonts and photos missing.

All in all, there are many different file types that all serve different functions. JPG is pretty much the top choice for photographs. PNG is great for transparent backgrounds, small file sizes, and use on the web. PDF, the most common of vector file types, is perfect for print and also has the ability to have transparent backgrounds. It is important to note that while it is possible to save a vector graphic as a raster file, it is not possible to do the opposite. Opening a raster graphic, such as JPG, and saving it as a vector, such as PDF, will save properly, but the graphic will still maintain all the qualities of a JPG. When in doubt it is best to work with a PDF. This allows the freedom to scale without losing quality, and the ability to export the document as a JPG or PNG if needed.

Meet the Author

Pat has always been enthusiastic about portraying information visually, and aims to do so in unique and clever ways.

In his free time Pat enjoys playing and listening to music. He loves playing guitar and drums, but still hasn’t mastered playing both at once.

Next post:

Previous post: