Vector vs. Raster: What Do I Use?

by on 6th June 2012 with 9 Comments

screenshot

With all of the image options and file formats out there, it can be a little overwhelming when you are choosing what file type to use (and send to clients). Compatibility is always a concern when you are working with different file types, but when it comes to graphics and images the type of computer graphic format you use is essential to how the image renders.

There are two types of digital graphics files – vector and raster. Vector images are made of hundreds of thousands of tiny lines and curves (or paths) to create an image. Raster images are composed of pixels. But how do you know what format is best for your next project?

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Vector Images

screenshot
screenshot

Vector images, which are made of thin lines and curves known as paths, are rooted in mathematical theory. Vector graphics must be created in computer software that is designed to create this intricate wireframe-type image and each line includes defined node positions, node locations, line lengths and curves. Any of the lines and curves in the image can be assigned a color value. Because of this defined, formulaic approach to drawing, each image can be sized and scaled repeatedly and limitlessly without losing resolution or beginning to look cloudy or pixelated.

You can identify a vector image by looking at its edges — a vector image will always appear smooth no matter how large you make it or how close you zoom in. Text is one of the most common types of vector image. No matter how much you increase a font’s size, for example, its look never changes.

Another advantage to using vector images is file-size efficiency. Because the files are only identified by mathematical descriptions and not individual pixels, files are often much smaller than those of the raster counterparts. Vector images, therefore, are often easy to transmit from one computer to another and over the Internet.

The most common problem with using vector images is compatibility. Vector images are often saved as native files from the program used to create the image, such as Adobe Illustrator, which may not be available to everyone you need to work with (though widely compatible formats do exist).

Logos

screenshot

Vector images are the No. 1 option when designing or creating a logo or illustration. Because of the way images are created and saved, you will have more flexibility with making changes and be able to use your image at a variety of sizes. You may only need a web logo now, but image how great it would be to have that image ready to use on a banner or merchandise later without having to create it all over again?

Photos

Photographs are not vector graphics. Only illustrations that are made to look like photographs can be created in a vector workspace.

In Use

Most companies create all of their logos and insignia as vector images. These files are saved and are used as the basis for raster copies that get used in print and web publishing. Keeping a nice library of vector images can save you time because of the ability to resize on the fly.

High-resolution, high-quality clip art is often developed and sold as vector images as well. You will get more flexibility and more for your money when you buy vector-based clip art rather than high-DPI images.

Type and fonts are also created as vector images, which allows you to change the size while maintaining quality. This also keeps type from looking blocky and helps certain typefaces maintain their smooth shapes and edging. Be aware though, that if you create add type to an image or another type of file in software such as Adobe Photoshop (which is raster-based), your text will lose its vector attributes once the image is flattened and saved.

Raster Images

screenshot

Raster images are often called bitmap images because they are made of millions of tiny squares, called pixels. You can identify a raster or bitmap image by looking at it very closely. If you zoom in enough, you will be able to see the square outlines of each pixel (especially around edges where there are dramatic color contrasts).

Raster graphics typically have larger file sizes than their vector counterparts. Higher DPI (dots per inch) and PPI (pixels per inch) settings also contribute to larger files because software must keep track of and be able to render each pixel. File size can become a concern if storage or server space is limited or if files have to be transmitted electronically.

Logos

You will want to avoid using raster images in creating and working with logos and illustrations. In some instances a raster image can be used successfully when working with logos, especially if there the logo is more image rather than text based. It is recommended, though, to create the logo as a vector file and save copies as raster images as needed for specific projects.

Photos

screenshot

Raster images are the preferred method when working with photographs. When photos are taken with a digital camera or copied on a scanner, the resulting files are raster images.

In Use

Almost all of the images you find on websites are raster images, even those that may have originally been created with paths. Raster images are typically acceptable for digital publication but may not work well in printed projects. Often these files are saved as low resolutions and are not suitable for print reproduction.

In printed mediums — such as books, magazines and newspapers — raster images are often used to reproduce photographs. Images are saved at a high DPI so that quality will not suffer during the printing process. You can find out more about DPI and PPI in this previous Design Shack article.

File Formats

Image files can be saved and stored in a wide variety of formats. If you are working with something you did not create, you can guess how the images file was created in terms of vector or raster by taking a look at the file format or file extension at the end of the image file name. Here are some of the more common file formats.

Vector

Basic file types: .drw (vector file), .pif (vector image GDF format), .pct (Macintosh bitmap graphics format) , .ps (Adobe PostScript), .eps (Encapsulated PostScript), .svf (Simple Vector Format).

  • Adobe Illustrator: .ai, .ait, .art
  • Corel Draw: .cdr, .cdrw, .cdt
  • Corel: pat (Paint Shop Pro Pattern Image)
  • Digital Line Graph: .dlg, .do
  • OpenOffice: .odg

Raster

Basic file types: .jpg (JPEG raster format), .gif (GIF transparent file), .png (Portanble Network Graphic Transparent file), .tiff or .tif (Tag Interleave Format)

  • Adobe Photoshop: .psd

EPS and PDF Files

Encapsulated PostScript files (.eps) are self-contained files that are the same mathematically as vector files, though they can be created from raster images as well. The format is one of the most compatible and portable because they are supported by almost all graphics software. They are an alternative to using vector files when the native formats are not available.

Adobe Portable Document Format (.pdf) files use a combination of vector and raster images. In this compact and universal format, files render as they were created. Vector images are rendered as such as and be scaled and extracted. Fonts are embedded within a file and are rendered as type, not flattened as an image element. Raster images, such as photos will appear as intended at 100 percent but will start to lose quality if they are over-enlarged.

Conclusion

screenshot
screenshot

Starting with the right type of image can save you a lot of time and rework over the course of a project. Evaluate how you will be using graphics and generate your images accordingly.

Remember vector images are best used for logos and illustrations. Raster images are the standard in digital photography and are commonly used for all graphics once they are published digitally. Consider creating a vector image library for your files and saving copies for raster-based work to save you time during the life of a project.

Image Sources: hmomoy, mistercorn, Dominic’s pics, faith goble, L2F1 and macieklew.

Comments & Discussion

9 Comments

  • Luis

    Surprised to notice that SVG is not mentioned as a vectorial format.

  • TimberFlakes

    Luis, nowadays, I rarely see SVG discussed outside of the very specific context of web (they’ve been around since 2001, and virtually no one uses them or cared to make a big deal of them before the latest iPad). I feel this article was talking in a broader sense of just raster vs. vector for general graphic design.

  • http://www.websitetemplates.org/ Alex

    Thanks for the explanations and loads of info. I’ve bookmarked it for further reference. It was new to me that one should create a logo as a vector graphic. And now I can see that it totally makes sense in every respect.

  • http://www.folksyhome.com Maria

    Great run down, and in simple enough terms this newb can understand. Gracias!

  • http://www.thinkbe.net samson

    clearly distinguished, good stuff

  • stelt

    @TimberFlakes The pixels you get on your screen don’t show if they at some step originated from SVG, rendered somewhere server- or client-side. SVG is everywhere.

  • http://timeofcreation.com Time

    this information is very usefull, thank you!

  • the trouble

    Shame on you. You have completely forgotten all _videly used_ Open Source formats such as:

    Vector: svg (Scalable Vector Graphics) -> Inkscape and others.
    Bitmap/raster: xcf (eXperimental Computing Facility) -> Gimp native.

    World is not just Adobe and Apple ;-) World is open!

  • AntoxaGray

    After Effects is vector too, as it uses formulaes to build effects, and .ae files are small in size, unless you render video (which is raster).

Subscribe

Membership
About the Author