What Are Raster and Vector Images—and Which Do Designers Prefer?

Raster images are probably the type you’re most familiar with. They divide the display into a set number of pixels and fill each of them in with a particular shade and color. The more pixels you cram into the display, the smaller each pixel becomes, and the more resolution improves. At normal size, the contours of the image look perfectly smooth, but if you zoom in close enough you can see the pixel grains. And you basically have to keep raster images within their originally specified dimensions because spreading them out would reduce the clarity of the picture.

The advantage to raster images is the amount of fine detail they make it possible to render. But there are two disadvantages. First, storing information for all those pixels takes up a lot of file space. Second, as good as those tiny details may look when the image is displayed in its original dimensions, enlarging the picture in response to variable screen sizes or to fit different contexts results in distortion.

Vector files, on the other hand, only contain the design specifications of the picture. So when a screen displays a vector image, it’s essentially using the specs as instructions for recreating the picture. These instructions describe things like lines, curves, distances, shading gradients, and colors. You can think of them as the DNA of the image. Instead of having to store or reproduce an entire animal, you can simply clone it from its biological blueprint.

Vector images have two major advantages. The first is that they’re easier to transfer and store because you’re only dealing with a limited set of mathematical formulas instead of information about thousands of pixels. The second advantage of vector images is that you can adjust their dimensions without any distortion. This flexibility comes from the ease of revising the instructions.

Going back to our analogy with DNA, the original size of the animal may have been based on a certain set of genes coding for the rate of growth, but all you have to do is splice in a few other genes and you’ve got an animal that’s half the size. Adjusting the size of raster images, on the other hand, is more like trying to smash or stretch a whole animal instead of tweaking a few genes—you can only go so far before it’s unrecognizable.

Which do most designers prefer to work with? As you would expect, it depends on what the images are being used for. If you’re working with a static image with a lot of fine-grained detail, then raster images are probably the way to go.

But most web designers are asking for vector images these days. This isn’t only because the flexibility of the size dimensions and other characteristics of vector images make them easier to adapt to various contexts on web pages; it’s also because most websites today are responsive, which means they have to adapt to the size of the screen they’re being viewed on. Responsive design is pretty much a requirement for any new website now that there are so many different kinds of smart phones, tablets, and laptops on the market. And that makes the type of flexibility you get with vector images extremely valuable.

Still have questions? Go ahead and write them in the comment section and I’ll be happy to take a crack at them.

via Business 2 Community http://ift.tt/1jPLJBu