Graphics

 

General Info

> Logos

> Design

> How To's

 

Graphics > Vector vs. Raster Images

Short Version:

True Vector images can be reduced and enlarged without any loss of quality while Raster images are based on dots [called pixels] and can't be elarged without the dots spreading apart and causing pixelation.

 

What's the difference between Vector and Raster images?

What does resolution mean?

Why can't you just increase a graphic's resolution?

So Vector images are better?

Still Confused?

Final Thought

 

 


What's the difference between Vector and Raster images?

  • Vector images are based on points connected by paths that are color filled. In short, you draw lines that can be reshaped as needed. You can resize vector images without a problem.
    • Pros: Can be enlarged to any size and never loses quality!
    • Cons: Not as good when used with lots of gradations and special effects
  • Raster images are based on dots called pixels and must be created at a specific size and resolution from the beginning. Think of a painting, once the paint goes down, you can't move the droplets of ink around, you have to redraw it. Raster images are size and resolution dependent.
    • Pros: Great for photographs and similar images
    • Cons: CAN'T be enlarged without loss of quality

 

^back to top


What does resolution mean?

That's the number of dots (or pixels) per inch used to create the graphic. For example:

  • Our monitors have a resolution of 72 Dots Per Inch (DPI) or Pixels Per Inch (PPI). That means for every inch, there are 72 dots across and 72 dots down. So creating graphics to be seen on the internet, 72DPI is perfect. Using a higher resolution only increases the file size since those extra dots won't be seen.
  • When printing a brochure, we need 300DPI or roughly 4 times the amount of resolution as the web. And you just can't increase the resolution of the original image.

 

^back to top


So why can't you just increase the graphic's resolution?

Because the software has to interpolate -- or guess -- what those 3 extra dots between the existing ones will be. What color will it be? Is it a natural gradation or choppy?

 

Milk Anology: Think of a 72DPI image (perfect for a website) as a quart of milk and a photo at 300DPI (perfect for a poster) as a gallon. You can't make a gallon of milk from a quart by simply adding water. What you get is a watered down gallon of milk -- not the refreshing full taste you were expecting.

 

^back to top


So vector images are always better because you can enlarge them, right?

No. Sorry, not the answer you were looking for? For example, when we create logos, we like to start with vector images. It can be tweaked and adjusted easily and used for large prints like banners. When it's perfect, we then convert it to a very large raster image with all the shadows, bevels and speciatly highlighing effects to JAZZ it up! That's what we use for Business Cards, Web Sites and more.

 

^back to top


Still confused?

Here are samples of vector and raster images and resolution:

 

 

Left image: 72DPI

Right image: 300DPI

 

Notice the pixelation on the left image when enlarged.

 

Left image: 72DPI

Right image: 72DPI with resolution increased to 300DPI.

 

Increasing the resolution DOES NOT provide a high resolution image.

Left image: 300DPI enlarged 500%

Right image: True vector image enlarged 500%.

 

You can clearly see there's no quality loss using vector images.

 

^back to top


Final Thought...

 

Many folks will still insist you can just increase the resolution to get a higher resolution image. That's like taking a Chevette, replacing the emblem with one from a Corvette and insisting you'll win the Indy 500. Oh sure, you might complete the race, but after the crowd's are long gone...

 

 

 

 

Peregrine Associates • 968 Easton Road, PO Box 721, Warrington PA • 215-343-2499
Copyright 2015 - All Rights Reserved
Powered by Peregrine Associates