Thursday, May 5, 2016

Raster vs Vector

There are two main type of image files: Raster and Vector. Raster images are more common in general such as jpg, gif, png, and are widely used on the web. Vector graphics are common for images that will be applied to a physical product. Also used in CAD, Engineering, and 3D graphics.


When using a raster program you paint an image and it's similar to dipping a brush in paint and painting. You can blend colors to soften the transition from one color to another.

When using a vector program you draw the outline of shapes: e.g. an eye shape, a nose shape, a lip shape. These shapes display one single color each.

A lot of images can be made with either raster or vector program and look exactly the same on both programs. Images with a subtle gradation of one color to another are the images that will look most different since vector programs need to create a separate shape for each shade of color.



Some vector programs do have the ability to create color gradients within one single shape, but these are actually raster effects. A vector graphic with gradients contains both vector and raster elements and won't be suitable for process that requires 100% vector or true vector art.

Photographs are raster images and are probably the best example of images completely made of color blends - or shade blends in the case of black and white photographs - and those images look very different when drawn in vector format. Click here for examples.

Pixels vs Vectors


Raster images are made of pixels. A pixel is a single point or the smallest single element in a display device. If you zoom in to a raster image you may start to see a lot of little tiny squares.

Vector images are mathematical calculations from one point to another that form lines and shapes. If you zoom into a vector graphic it will always look the same.



A raster image has a specific number of pixels. When you enlarge the image file without changing the number of pixels, the image will look blurry. When you enlarge the file by adding more pixels, the pixels are added randomly throughout the image, rarely producing good results.

When you enlarge a vector graphic, the math formulas stay the same, rendering the same visual graphic no matter the size.  Vector graphics can be scaled to any size without losing quality.

Common Uses


Vector graphics are commonly used for logos, illustrations, technical drawings and for use with processes that require vector art such as specialty signs and printing, engraving and etching. Also used in CAD, Engineering, and 3D graphics.

Raster, or pixel-based images represent and edit photographs and photo-like images better than vector programs because they can use an abundant number of different color pixels. By arranging pixels and slowly incrementing or changing the color or shade of the pixels adjacent to them, it creates a subtle gradation from one color to another: nice and smooth color blends.

If I am creating a new design which software should I use; Raster or Vector?


It depends on the design itself. If it's going to have photographic elements with continuous tones and blends of color, you are probably better off using a paint program.

If you want your design to look like a drawing or illustration with clear contrast between the elements of the design, then use a vector program.

Ideally a company that has a logo design with photographic elements, also has a secondary simplified version of their logo in vector format that can be used for those specialty items that require vector art.



All the images on this post have been rasterized for web display.

For more information please visit my website vector-conversions.com