Greetings GLAD WORKS friends!  Due to the smashing success of our post on RGB vs. CMYK color spaces, we decided to dig in a little more and explore the wild and wooly world of Raster Images vs. Vector Graphics. They’re two different kinds of computer graphics, and just like with RGB and CMYK, they have everything to do with the way your projects come out. We’re telling you about all of this so you won’t feel quite so lost and in the dark when we start speaking GLAD WORKSIAN on you. We do that sometimes and we don’t even mean to.

But that’s ok because now you can just nod along and not even have to pretend to know what we’re talking about!

Two kinds of computer graphics

Raster and Vector are types of computer graphics. Raster images (aka bitmap) are composed of pixels (bits of image color) and vector graphics are composed of paths. A raster image uses a grid of pixels where each pixel can be a different color or shade. If you were to zoom in on a raster image, the edges would become jagged as you would start to be able to see the little pixel squares of color. This is different from a vector graphic which uses mathematical relationships between points and the paths connecting them to describe an image. Since they’re composed of paths instead of pixels, when you zoom in on a vector graphic, the edges are smooth.

So what?

Raster images require higher resolutions and something called “anti-aliasing” in order to look smooth. Vector graphics, on the other hand, since they’re made of lines, curves, and points that are calculated mathematically, can be scaled to any size or resolution and still have clean edges. Each have their place in your design projects, and it’s important to have the right type of graphic depending on what you’re trying to accomplish.

Vector graphics

Vector imaging is frequently used in printed page layouts and illustrations. They can be made larger or smaller without loss of image quality because they’re mathematical descriptions of an image instead of pixels. Typography and illustration are vector graphics. Complex logos and shaded illustrations can be vector based, but it’s tough to get a photo-realistic appearance. Most of the vector images you see tend to look more one dimensional and cartoon-like.

Adobe Illustrator is a vector-based program, but you can still place raster graphics in an Illustrator file. Because you can make them bigger and smaller without losing quality, vector-based images offer freedom from resolution when developing print-based projects.

Raster images up close and personal

Raster imaging is usually used for photographic images with complex shading. They function like pointillist paintings— your brain mixes the color information into recognizable shapes. Digital photos and scanned drawings are raster images. If you scale a raster image down, you essentially omit some of the unneeded bits at the smaller size, and the software reinterprets the color for you. If you try to scale it up, you end up seeing the individual pixels. That’s why it looks jagged or blurry depending on how much you try to enlarge it. Because of this decrease in quality when enlarged, raster images are resolution dependent and require minimum resolutions, or DPI, based on the size of its intended output.

DPI: pixels for every occasion!

Because vector images are not pixel-based, they aren’t ruled by DPI. The advantage to using vectors is that they can be sized, small to large, without a loss in quality. That gives them a distinct advantage for some projects. Now, when we talk about raster images, we do have to be concerned with DPI since they’re made up of so many pixels per inch.

The number of pixels per inch (PPI) or dots per inch (DPI) is called resolution. The higher the resolution, the more pixels you have crammed in there. For web and screen view, you typically need just 72dpi because that’s the maximum amount that monitors and projectors can display. For printing from your printer at work or at home, you need 150dpi. Professional press printing typically requires a minimum of 300dpi since the equipment is capable of much finer detail.

That’s part of the reason why it’s very hard to use a photo you took with your phone as the cover of your annual report. The resolution of the image is far too low and you’re limited in what you can do to make it bigger. And although we know you’re oh-so tempted, we beg of you, just don’t do it!

The more pixels you have in an image, the more bits of data need to be stored which increases your file size from kilobytes to megabytes to (hold onto your hats) gigabytes!  So, for example, an average home page photo on your website shouldn’t be more than 100KB since most monitors max out at 72dpi, but that annual report we talked about might have an image that’s 5MB or more, weighing in at a minimum of 300dpi! When talking about raster images, the bigger the image, the bigger the file size should be. And don’t even get us started on printed billboards!  Those files can be like, whoa, HUGE!

Now, we don’t expect you to be graphics experts after having read this, but we do hope that it gives you a general idea of the different kinds of computer graphics we work with when we do our magical design-y stuff.

We want you to speak our language!  We have so much to share!