Vector Images vs. Pixel Images

The Vector vs. Pixel discussion is a frequent concept that I find myself having to explain quite often. This is no fault of anyone. For people not immersed in graphics design, all that matters is whether or not their logo looks good on their buildings, website, stationery and those cool office mugs. The underlying concepts are the things we designers are paid to know about. Kind of like when I’m dealing with an auto mechanic. Don’t know, don’t want to know – just tell me where to sign, but don’t think I’m a complete idiot.

For those of you who have wondered what the difference is, here’s the deal on Pixels and Vectors:

Pixel based images are those constructed of pixels (little dots) and are dependent on resolution. The number of pixels an image contains is linked to the resolution setting. Once the resolution is set only resampling the image will create a larger image, however this technique will not achieve the effect of a true higher resolution image instead you exaggerate the effect of the pixels and make the picture look jagged (pixilation).

Files using pixels are able to produce continuous tone images, where all variations of color can be represented as a single tone of data. This digital process replicates the effect of a photograph so that the human eye sees an image with unbroken color transition.

An advantage of pixel-based rendering is the mathematical functions that can be performed on them, such as averaging the pixels to create a blur, or edge detection routines that emboss. Another advantage, is that depending upon the resolution of the graphics card, great detail can be shown. The disadvantage, in addition to not being able to resize the image, is that, because each pixel is rendered individually, each pixel must be stored separately. This can take up significantly more disk space than vector-based rendering.

Vector based images are defined by mathematical equations and are independent of resolution. Files are scalable to any size and therefore print at optimal definition at all times. Content is constructed from lines, shapes and curves which are formed by Bezier paths defined by nodes and control handles. A vector image can be rasterized into a pixel file, however the reverse conversion is limited and determined by both image content and available software.

Typical vector based files includes corporate logos, charts, diagrams and illustrations. Elements are constructed with both stroke and fill attributes, created from flat color, blends, tints or gradients. Vector images also feature no inherent background (as pixel files do), so transparency can be easily created when placing in other applications.

After drawing a vector based image you can go back and change its width and height, bring it to the foreground or send it to the background, even after other shapes had been drawn on top of it later. When saved to file, vector images also take up less disk space, since, for example in the case of a rectangle, the program is only storing four numbers no matter what size it is: the x and y starting point, plus the width and height. On the other hand, pixel based images would have to store color information for the 10,000 pixels that make up a 100x100 pixel rectangle.

In the end there really is no right or wrong method, it all depends on what you are designing and what you plan on doing with the design. i.design uses both methods often and even occasionally mixes the two.