0

votes

Vote

creative in Creative Channel,
Written by: Miguel Esquirol on Jan 26 2012, 12:57pm

Images: Vector vs. Raster

Vector and raster graphics are very different to graphic designers, but sometimes users are a little more clueless. This can generate confusion, extra work and sometimes a serious loss of patience. Knowing the difference between these two kinds of formats is important to provide what the graphic designer (or programmer) needs. It also helps you know what is possible to do with an image.

Vector Images

A vector image is just a collection of mathematically defined shapes. It can get as simple as a circle, and as complex as a comic drawing. Because the image is created by shapes (basically lines connecting nodes), the complexity of the image is related to the number of shapes used to create an image.

  • Pros: Vector files are pretty small and the figures are not affected by resolution. You can resize an image as much as you want, the resultant figure will have a resolution as good as the original one.
  • Cons: Complex images are not as easily done with Vectors, and more photographic images won't look real. Some colour effects like degrades, shadows and transparencies will be problematic with these kinds of images

Although an image can be turned into a vector one, the image will look wrong if it has many details. On the other hand, a vector image will be easier to modify by changing the shapes, and colours with much more precise than other kinds of images.

Vector Images are best used to create logos (because they scale easily). You end up with simple cartoon images that have plain colours, and illustrations.

Raster Images

If a vector image is created using shapes, a Raster image is defined by dots. Each of these dots, or pixels, is a tiny square with a colour. A raster image can be as complex as photography or a digital painting. Because the image is created by dots, the complexity and quality of the image is related to the number of dots. With more dots, you'll have better resolution.

  • Pros: A raster image will reproduce a photography image perfectly, with all the subtleties of colours, shadows and forms. Because each dot has a specific colour, the colour information of any image is almost limitless.
  • Cons: An image can't be easily resized, because it will just spread the same dots over a bigger space. If you make a raster image bigger, the resolution will suffer, and the shapes and colours will look pixelated. The size of the files can be really big and it depends on the quantity of dots and colours (resolution).

It's very simple to change a vector image into a raster one without losing the resolution. But once the raster image is created, it becomes impossible to make it bigger without losing resolution. Modifying a raster image is much more complicated than a vector one, and some things are almost impossible. On the other hand, changing global colours, contrasts and brightness is much more easy with a raster image.

Raster Images are best used for photography, complex paintings, composite images and effects like transparencies, shadows and colour degrades.

Software

 

These two formats are completely different from each other and the programs used to create and modify them are also different:

Vector Software

The programs that can create and modify vector images decipher the mathematical position and relationships between the shapes. With these programs you can move and modify the nodes, lines and colours that form the shapes, as well as create new ones. Besides that, this program gives you different tools to work with these shapes, and even transform regular images to vector shapes (with limitations).

Among the best programs to work with Vectors you have Adobe Illustrator as one of the most popular and a free one called Inkscape. Other programs are Freehand and Corel Draw.

Although these are vector-specific programs, many programs can do some basic editing like InDesign and Flash, or even Photoshop or LibreOffice.

Raster Software

The programs that can create and modify raster images interpret different pixels and colours, and can perform modifications to groups of pixels using complex algorithms and create from scratch or mix existing images. A camera or scanner can create this kind of images, but a specific software will be need to create modifications. The software can be as simple as MS Paint and as complex as Adobe Photoshop. Other programs that work with these kinds of images are the free one The Gimp or Paint.NET.

Formats

The formats are the form in which the information is stored and read. There are software specific formats that can store a lot of information on how the final image was created, and cross-platform standards that can be interpreted by several different kinds of programs with less information, but respecting more or less the final image.

Vector Formats

To move a vector image between programs (and sometimes between different versions of the same program) can be a little problematic, and some of the most complex elements can be lost. AI is the format specific for Adobe Illustrator, although the standard that is being established is SVG. It’s possible also to store a Vector image as a PDF to easily transfer between computers without losing information.

Raster Formats

 There are several different formats for these kinds of images according to the compression algorithms used from each one. In general these kinds of images will be easily transferred from one device to the next one maintaining the resolution of each image. Each program also has its own format, like Photoshop's PSD, although those formats are software specific and hold much more information than the simple graphic.

The most popular image formats are JPG: For complex graphics with low quality and high compression. GIF: For simple images with plain colours. PNG: For bigger files maintaining the quality of the image.

The images online

Web Browsers were created to easily understand Raster Formats, and most pages will use any of the most popular ones. Also backgrounds, shapes, borders and menus can be created with raster images. Each of the formats will have specific uses for the web when speed and size is important. The original image can be a vector image, but it has to be rasterized to use online.

Vector images are slowly being used more for online documents. One of HTML5’s interesting characteristics is the use of SVG files:

Citizens Comments

Post your comment

default Avatar

You might be interested in these related contributions

SoftCity Promotion

About the Author

Miguel Esquirol

Montreal, Quebec, CA

1103 contributions

Writers, blogger and journalist interested in different topics from literature to computers.

Popular contributions

software social commerce