raster vs. vector graphics

Posted on September 23, 2016October 5, 2021 by graphicsgrrrl@gmail.com

raster vs. vector graphics

graphics grrrl

Click to listen to the audio blog of this post here!

Are you 100% sure when to use Photoshop and when to use Illustrator? It’s okay if you are confused because I see graphic designers on Fiverr all the time say that they will create a logo in Photoshop for their customers.

To me, that shows an inherent misunderstanding between the two main type of graphics: raster and vector.

Raster graphics are created with pixels: the lower the resolution, or number of pixels per inch there are, the smaller the file. A “low res” image such as this would be for better suited for screen or web graphics, while a “high res” (high resolution) image would have more pixels per inch and thus be able to be printed and not look blurry.

If you’ve ever downloaded an image from the web and tried to print it and found it to be blurry or have a jagged appearance to the lines (otherwise known as pixelation), then you’ve experienced firsthand the limitations of an image that’s reliant upon the number of pixels it contains! It may have looked crisp at 100% magnification on your screen, but if you were to zoom in the graphic, you would actually see the individual pixels that comprise the whole.

A tangible example of a raster graphic is a photograph.

You can print a raster image such as a photo, but you need to ensure you have enough pixels: at least 300dpi (dots per inch).

Vector graphics are created with points, or mathematical calculations from one point to another called vectors that form lines and shapes, to be precise. If you zoom in on a vector graphic, the edges of the shape will appear smooth, there will be no jagged edges to it because it is not comprised of pixels. In this way, the vector shape created can be infinitely scalable because it is not limited by the number of pixels.

An example of a vector graphic is a logo.

You can print a vector logo on a small sheet of paper and then enlarge the same vector logo to billboard size and keep the same crisp quality!

Feel free to download and print out this handy reference that outlines raster and vector graphic file formats:

pixels vs. points

A pixel is the smallest single element in a display device such as a computer monitor or television screen and each of these dots is assigned a color and intensity.

Raster images lose clarity when zoomed in or scaled up, so they are called “lossy” graphics.

A point is the first step in the instructions (or vectors) for the computer to mathematically calculate the line or curve between it and another point that make up an entire shape. When you enlarge a vector image, the mathematical formula used to create it stays the same.

Vector images retain their clarity when zoomed in or scaled up, so they are called “lossless” graphics.

Photoshop vs. Illustrator

Photoshop is a raster program. When using a raster program, you paint an image; it’s similar to dipping a brush in paint and painting. You can blend colors to soften the transition from one color to another. Download your FREE trial here!

Illustrator is a vector program. When using a vector program, you draw the outline of shapes: i.e., a circle, square or triangle. These shapes display one single color each. Download your FREE trial here!

Each type of graphic and program has its strength and weaknesses:

strengths:	weaknesses:
raster – good photographic detail	raster – don’t scale well
vector – don’t pixelate – scale well	vector – can’t be used for photos

I personally love vector graphics and prefer to create artwork in Illustrator when I can because of the flexibility I have with where I choose to output the final image! I can create a logo one time in Illustrator and then export it as a screen resolution .png file for the web or scale it 500% and save it out as an eps file to print a huge sign. I don’t have to know the medium and size when I begin creating vs. Photoshop, when ideally you should know the dimensions and resolution of the graphic you need when you go to first create the file. (Of course, I love Photoshop, too, and couldn’t live without it! So a good rule of thumb is to create a large file with a high resolution and you can always scale down later—the opposite can’t be done as easily as you’ll see when we resize images in Photoshop).

Click to tweet:

do you know when to use Photoshop and Illustrator?

~graphics grrrl

file formats

In discussing creation and usage for both raster and vector graphics, I would be remiss if I didn’t address file formats. File formats can be confusing because not only are there so many types, but some of these same types can be exported to either high or low resolution.

Meaning, you can have a low resolution .jpg photo you email to a friend and then upload the same photo for printing on Snapfish.com, but as a high resolution .jpg file. Or you may have a photo you want to use in your Powerpoint presentation, which will be viewed on a screen, but it may also be printed out—so your best bet would be to use a medium to high resolution jpg. These are unique examples; however, as most high resolution photos that you’ll use in graphic design layouts that are meant to be printed should be saved as high res .tifs or kept high resolution in its native program’s (Photoshop’s) .psd file format.

Here’s a handy little chart of some raster and vector formats and their uses:

	.jpg	.tif	.png	.gif	.bmp	.svg	.ai	.psd
raster	yes	yes	yes	yes	yes	no	no	yes
vector	no	no	no	no	no	yes	yes	no
web	yes	no	yes	yes	no	yes	no	yes
print	yes	yes	yes	yes	yes	yes	yes	yes

If you’re asking yourself which type of graphics you should master, raster or vector, the answer is: both! They both have their place in graphic design—you don’t have to limit yourself into thinking you’re solely a “pixel person” when you realize that vector graphics from Illustrator can also be exported out as raster graphics. I love me a two-fer!

Have any questions about the difference between Photoshop and Illustrator or between raster and vector graphics? Enter your comments below!