Vector Graphics vs Raster Images: Which is better?

Which is better: vector graphics or raster images?

Professional designers already know the difference between vector graphics and raster images. It is always helpful when a client understands the concepts we deal with while working on your projects. Knowing the difference between a vector graphic and a raster image will allow us to skip the long explanations and give you a level of understanding that will make it easier to work with your designer.

Although not obvious at first, the difference between vector graphics and raster images are like night and day. Each has a specific set of strengths and weaknesses, depending on its usage.

The short explanation is that vector graphics are created using lines and raster images are created using pixels. I’m sure you’re here because you were looking for more detail, though. So let’s get started.

Vector Graphics

Vector graphics (EPS, AI, SVG) are created and edited in apps like Adobe Illustrator and Corel Draw. They use lines, nodes and anchors to draw and shape elements. There are absolutely no pixels used in vector graphics so image resolution is not a concern.

A vector kawaii cupcake that I created in Illustrator.

VECTOR BENEFITS

Vectors are my favorite graphic type to work with. They’re crisp, clean and bold. They are optimal for logo design because of their smooth lines and retention of image quality regardless of dimensions.

They reproduce well no matter the size of the media. You can create a 1” X 1” vector graphic and resize it to a billboard without any loss of quality. It’s optimal for just about any printing project.

Text will reproduce in a crisp, clean manner and your graphics will never appear fuzzy or pixelated. Vectors are perfect for reproducing across multiple media. Screen printing, logos, illustrations and I even prefer to use Illustrator for business cards and single page printed pieces.

VECTOR PITFALLS

I don’t’ see any, but I suppose there are probably a few. You can’t use vector graphics easily on the web … yet. They tend to be larger in size, especially when creating more complex illustrations.

Raster Images

Check out all of the cute little pixels after I open my cupcake in Photoshop.

Raster images (JPG, PNG, TIF) use pixels. The quality of a raster image is dependent upon two things. Resolution and dimension.

RESOLUTION: The more pixels per inch (ppi) or dots per inch (dpi) the better quality that photo is going to be. Most images you see on the web are 72 dpi. That is considered low resolution. When I take professional photos for a client my camera outputs a high-resolution JPG. High resolution is 300 dpi or higher

DIMENSION: Image dimension refers to the physical measurements of the image. Height and width. Ideally, the larger the dimensions, the more pixels you should have. If you have a photo that is 8 inches wide and it only has 72 pixels per inch your image is 576 pixels wide. If the same image has 300 pixels per inch your image is 2400 pixels wide. You’ll obviously have a higher quality image in the 300 ppi image.

RASTER BENEFITS

Raster is obviously what you want for photos. What about other elements, like logos? Since you can’t use vectors easily for the web because of the file size, raster is the way to go. As long as you follow image optimization best practices when using images for the web, you can get a really large image down to web resolution without losing too much quality. You can export vector graphics to raster images for web use straight from Illustrator. Alternatively, you can open an .eps or .ai file in Photoshop and use its “Save for web” feature. Both options give you the option to preview your results in real time so that you can best gauge quality.

RASTER PITFALLS

Their quality has limitations. Raster images cannot be resized over and over without consequences. You cannot take a raster image, regardless of it’s resolution, from 12” wide to 24” wide without losing quality.

So, if you start with a high-resolution image and resize it for the web, make sure to save a new version and keep that original image. I have several versions of every image I use online. I keep the original file and every version I create after that. I don’t replace them.

So, which is better?

Well, it depends on what you’re using them for. Your designer knows that you always want to start from high resolution or vector originals. Before your designer even starts your project they should be asking a few questions:

1. How will you use this design?
2. Where will people view this design?
3. Will you be using this on more than one media platform?
4. How will you reproduce it in the future?

A professional designer will know whether to use vector graphics or raster images.

If you’re working with a professional designer (I mean, you really should be) then you shouldn’t have to worry about any of this. But, like I said, it’s always good to be educated about the process. The more you know the better equipped you’ll be to evaluate and communicate with your designer.

If you aren’t working with a designer yet I would love to offer you a free consultation via phone or video. Still have questions? Leave me a comment.